Webpack2入门

介绍

webpack 是一个 JavaScript 应用程序模块打包器(module bundler)。webpack 通过快速建立应用程序依赖图表并以正确的顺序打包它们来简化你的工作流。你能够针对你的代码来对 webpack 进行自定义的优化配置,比如为生产环境拆分 vendor/css/js 代码,无刷新热重载(hot-reload)等.

Webpack可以做什么

  • 处理module依赖关系
  • 打包js,css和png等
  • 降低页面初始加载时间
  • 方便组合第三方组件库
  • 可以转换不同语法成标准语法

安装

这里使用的是 webpack 2.4.1 版本。

# 全局安装
npm install -g webpack

#本地安装
npm install --save-dev webpack

一个小例子

创建应用并安装必要的依赖库

$ mkdir webpack-demo
$ cd webpack-demo
$ npm init -y
$ npm install --save-dev webpack
$ npm install --save-dev css-loader
$ npm install --save-dev style-loader
$ npm install --save-dev extract-text-webpack-plugin
$ npm install webpack-dev-server

入口 (index.js)

import './style.css';
content = require("./content.js")

var element = document.createElement('message');
element.innerHTML = content;
document.body.appendChild(element);

自定义模块 (content.js)

module.exports = "It works from content.js!!!";

css (style.css)

body {
  background: grey;
}

html页面 (index.html)

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
   </body>
</html>

webpack配置

module.exports = {
    entry: "./index.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }]
    }
};

打包生成 bundle.js文件

$ webpack
Hash: 62f1078175b4dbbd7d46
Version: webpack 2.4.1
Time: 368ms
    Asset     Size  Chunks             Chunk Names
bundle.js  19.1 kB       0  [emitted]  main
   [0] ./content.js 48 bytes {0} [built]
   [1] ./style.css 992 bytes {0} [built]
   [2] ./index.js 171 bytes {0} [built]
   [3] ./~/css-loader!./style.css 192 bytes {0} [built]
   [4] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
   [5] ./~/style-loader/addStyles.js 9.15 kB {0} [built]
   [6] ./~/style-loader/fixUrls.js 3.01 kB {0} [built]

运行后可以看到生成一个 bundle.js 文件,其中包含了所有js和css。

在浏览器直接访问 index.html 文件查看结果。

热部署

本地热部署

  • 第一步:启动 webpack $ webpack --watch
  • 第二步:修改代码
  • 第三部:浏览器刷新(访问file:///.../index.html)

服务器热部署

  • 第一步:启动 webpack-dev-server $ webpack-dev-server
  • 第二步:修改代码
  • 第三步:浏览器刷新(访问http://localhost:8000

自动刷新页面

到目前为止,我们的开发每次在修改完js和css之后都需要手动刷新浏览器来查看结果,其实 webpack-dev-server 可以启动成每次修改后自动刷新浏览器,听起来酷酷的,下面就试试吧。使用下面的命令来启动 webpack-dev-server:

$ webpack-dev-server --hot --inline

然后修改 js 或者 css,保存,页面自动刷新了吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DT乱“码”

CRT连接mysql数据库操作

1。连接到远程主机上的MYSQL。假设远程主机的IP为:110.110.110.110,用户名为root,密码为123,则键入以下命令:      mysql...

2557
来自专栏源码之家

CP面板自动备份2——有了它,还有必要一定要买VPS吗?

2065
来自专栏木子昭的博客

最简单靠谱的vsftpd安装指南(Ubuntu16.04)

vsftp (very secure FTP daemon)意为非常安全的ftp进程 特点:小巧|免费 | 安全,是Linux下最受推崇的ftp服务 -...

3418
来自专栏我是攻城师

Solr中Group和Facet的用法

2575
来自专栏IMWeb前端团队

node.js入门心得

很多前端开发的同学应该都会接触或者了解nodejs,但是经常会听到入门难的抱怨。一方面不知道怎么学习nodejs。另一方面,拿到一些大牛写的nodejs源代码,...

2307
来自专栏散尽浮华

jenkins配置记录(1)--添加用户权限

前一阵子在线上部署了一套jenkins环境,作为线上代码发布平台使用。 部署记录:http://www.cnblogs.com/kevingrace/p/565...

3468
来自专栏DeveWork

WordPress 一键关闭/禁止页面评论功能

WordPress 中页面都是默认开启批量功能的,对于一些特殊的网站,可能需要禁止所有的页面的评论功能;一个个去页面编辑页面去禁止固然可以,但是页面一多的话那就...

1946
来自专栏西安-晁州

nodejs中引入art-template模板

使用Webstorm创建nodejs express应用时,默认使用的是jade或者ejs模板,对于不习惯这两种模板语法的人来说确实不是很方便。没关系,这里我们...

3330
来自专栏同步博客

自定义搭建PHP开发环境

  3、将安装包准备好。http://pan.baidu.com/s/1mhxEPkc

1471
来自专栏nummy

sphinx入门指南【2】 toctree指令详解

reST本身并不支持同时与多个文档进行交互,或者说将一个文档保存到多个文件中。Sphinx提供了自定义指令toctree来支持实现这个功能。

1093

扫码关注云+社区