1090人阅读
什么是 webpack？
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。
你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期 Github 上各大主流的（React相关）项目来说，它们仓库上所展示的示例已经是基于 webpack 来开发的，比如 React-Boostrap 和 Redux。
webpack的官网是&&，文档地址是&&，想对其进行更详细了解的可以点进去瞧一瞧。
webpack 的优势
其优势主要可以归类为如下几个：
1. webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2. 能被模块化的不仅仅是 JS 了。
3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
4. 扩展性强，插件机制完善，特别是支持 React 热插拔（见&&）的功能让人眼前一亮。
我们谈谈第一点。以 AMD/CMD 模式来说，鉴于模块是异步加载的，所以我们常规需要使用 define 函数来帮我们搞回调：
define(['package/lib'],
function(lib){
&&&&function
&&&&&&&&lib.log('hello
&&&&return
&&&&&&&&foo:
另外为了可以兼容 commonJS 的写法，我们也可以将 define 这么写：
define(function
(require, exports, module){
someModule = require(&someModule&);
anotherModule = require(&anotherModule&);&&&
&&&&someModule.doTehAwesome();
&&&&anotherModule.doMoarAwesome();
&&&&exports.asplode
= function
&&&&&&&&someModule.doTehAwesome();
&&&&&&&&anotherModule.doMoarAwesome();
然而对 webpack 来说，我们可以直接在上面书写 commonJS 形式的语法，无须任何 define （毕竟最终模块都打包在一起，webpack 也会最终自动加上自己的加载器）：
someModule = require(&someModule&);
anotherModule = require(&anotherModule&);&&&
&&&&someModule.doTehAwesome();
&&&&anotherModule.doMoarAwesome();
&&&&exports.asplode
= function
&&&&&&&&someModule.doTehAwesome();
&&&&&&&&anotherModule.doMoarAwesome();
这样撸码自然更简单，跟回调神马的说 byebye~
不过即使你保留了之前 define 的写法也是可以滴，毕竟 webpack 的兼容性相当出色，方便你旧项目的模块直接迁移过来。
安装和配置
我们常规直接使用 npm 的形式来安装：
$ npm install webpack -g
当然如果常规项目还是把依赖写入 package.json 包去更人性化：
$ npm init
$ npm install webpack --save-dev
每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。
我们看看下方的示例：
webpack = require('webpack');
commonsPlugin = new
monsChunkPlugin('common.js');
module.exports
&&&&plugins:
[commonsPlugin],
&&&&entry:
&&&&&&&&index
: './src/js/page/index.js'
&&&&output:
&&&&&&&&path:
'dist/js/page',
&&&&&&&&filename:
'[name].js'
&&&&module:
&&&&&&&&loaders:
&&&&&&&&&&&&{
test: /\.css$/, loader: 'style-loader!css-loader'
&&&&&&&&&&&&{
test: /\.js$/, loader: 'jsx-loader?harmony'
&&&&&&&&&&&&{
test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
&&&&&&&&&&&&{
test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
&&&&resolve:
&&&&&&&&root:
'E:/github/flux-example/src',
&&&&&&&&extensions:
&&&&&&&&alias:
&&&&&&&&&&&&AppStore
: 'js/stores/AppStores.js',
&&&&&&&&&&&&ActionType
: 'js/actions/ActionType.js',
&&&&&&&&&&&&AppAction
: 'js/actions/AppAction.js'
⑴ plugins 是插件项，这里我们使用了一个 CommonsChunkPlugin&的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。
⑵ entry 是页面入口文件配置，output 是对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里），其语法大致为：
&&&&entry:
&&&&&&&&page1:
&./page1&,
&&&&&&&&page2:
[&./entry1&,
&./entry2&]
&&&&output:
&&&&&&&&path:
&dist/js/page&,
&&&&&&&&filename:
&[name].bundle.js&
该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夹下。
⑶ module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理：
&&&&&&&&loaders:
&&&&&&&&&&&&
&&&&&&&&&&&&{
test: /\.css$/, loader: 'style-loader!css-loader'
&&&&&&&&&&&&
&&&&&&&&&&&&{
test: /\.js$/, loader: 'jsx-loader?harmony'
&&&&&&&&&&&&
&&&&&&&&&&&&{
test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
&&&&&&&&&&&&
&&&&&&&&&&&&{
test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
如上，&-loader&其实是可以省略不写的，多个loader之间用“!”连接起来。
注意所有的加载器都需要通过 npm 来加载，并建议查阅它们对应的 readme 来看看如何使用。
拿最后一个&&来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：
npm install url-loader -save-dev
配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式（其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）。
⑷ 最后是 resolve 配置，这块很好理解，直接写注释了：
&&&&&&&&root:
'E:/github/flux-example/src',
&&&&&&&&extensions:
&&&&&&&&alias:
&&&&&&&&&&&&AppStore
: 'js/stores/AppStores.js',
&&&&&&&&&&&&ActionType
: 'js/actions/ActionType.js',
&&&&&&&&&&&&AppAction
: 'js/actions/AppAction.js'
关于 webpack.config.js 更详尽的配置可以参考。
运行 webpack
webpack 的执行也很简单，直接执行
$ webpack --display-error-details
即可，后面的参数“--display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。
其他主要的参数有：
webpack --config XXX.js&&
webpack --watch&&
webpack -p&&&
webpack -d&&&
其中的&-p&是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb（主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大）。
上面唠嗑了那么多配置和执行方法，下面开始说说寻常页面和脚本怎么使用呗。
直接在页面引入 webpack 最终生成的页面脚本即可，不用再写什么 data-main 或&seajs.use 了：
lang=&en&&
charset=&UTF-8&&
&&&title&demo&/title&
src=&dist/js/page/common.js&&&/script&
src=&dist/js/page/index.js&&&/script&
可以看到我们连样式都不用引入，毕竟脚本执行时会动态生成&style&并标签打到head里。
各脚本模块可以直接使用 commonJS 来书写，并可以直接引入未经编译的模块，比如 JSX、sass、coffee等（只要你在 webpack.config.js 里配置好了对应的加载器）。
我们再看看编译前的页面入口文件（index.js）：
require('../../css/reset.scss');
require('../../css/allComponent.scss');
React = require('react');
AppWrap = require('../component/AppWrap');
createRedux = require('redux').createR
Provider = require('redux/react').P
stores = require('AppStore');
redux = createRedux(stores);
App = React.createClass({
&&&&render:
function()
&&&&&&&&return
&&&&&&&&&&&&&Provider
redux={redux}&
&&&&&&&&&&&&&&&&{function()
&AppWrap /&; }}
&&&&&&&&&&&&&/Provider&
&&&&&&&&);
React.render(
/&, document.body
一切就是这么简单么么哒~ 后续各种有的没的，webpack 都会帮你进行处理。
至此我们已经基本上手了 webpack 的使用，下面是补充一些有用的技巧。
一. shimming
在 AMD/CMD 中，我们需要对不符合规范的模块（比如一些直接返回全局变量的插件）进行 shim 处理，这时候我们需要使用&&来帮忙：
{ test: require.resolve(&./src/js/tool/swipe.js&),
loader: &exports?swipe&}
之后在脚本中需要引用该模块的时候，这么简单地来使用就可以了：
require('./tool/swipe.js');
二. 自定义公共模块提取
在文章开始我们使用了&CommonsChunkPlugin 插件来提取多个页面之间的公共模块，并将该模块打包为 common.js 。
但有时候我们希望能更加个性化一些，我们可以这样配置：
CommonsChunkPlugin = require(&webpack/lib/optimize/CommonsChunkPlugin&);
module.exports
&&&&entry:
&&&&&&&&p1:
&./page1&,
&&&&&&&&p2:
&./page2&,
&&&&&&&&p3:
&./page3&,
&&&&&&&&ap1:
&./admin/page1&,
&&&&&&&&ap2:
&./admin/page2&
&&&&output:
&&&&&&&&filename:
&[name].js&
&&&&plugins:
&&&&&&&&new
CommonsChunkPlugin(&admin-commons.js&,
&&&&&&&&new
CommonsChunkPlugin(&commons.js&,
&admin-commons.js&])
三. 独立打包样式文件
有时候可能希望项目的样式能不要被打包到脚本中，而是独立出来作为.css，然后在页面中以&link&标签引入。这时候我们需要&&来帮忙：
webpack = require('webpack');
commonsPlugin = new
monsChunkPlugin('common.js');
ExtractTextPlugin = require(&extract-text-webpack-plugin&);
&&&&module.exports
&&&&&&&&plugins:
[commonsPlugin, new
ExtractTextPlugin(&[name].css&)],
&&&&&&&&entry:
最终 webpack 执行后会乖乖地把样式文件提取出来：
四. 使用CDN/远程文件
有时候我们希望某些模块走CDN并以&script&的形式挂载到页面上来加载，但又希望能在 webpack 的模块中使用上。
这时候我们可以在配置文件里使用&externals 属性来帮忙：
&&&&externals:
&&&&&&&&&jquery&:
需要留意的是，得确保 CDN 文件必须在 webpack 打包文件引入之前先引入。
我们倒也可以使用&&在脚本中来加载我们的模块：
$script = require(&scriptjs&);
$script(&///ajax/libs/jquery/2.0.0/jquery.min.js&,
function()
&&$('body').html('It
五. 与 grunt/gulp 配合
以 gulp 为示例，我们可以这样混搭：
gulp.task(&webpack&,
function(callback)
&&&&webpack({
function(err,
&&&&&&&&if(err)
gutil.PluginError(&webpack&,
&&&&&&&&gutil.log(&[webpack]&,
stats.toString({
&&&&&&&&&&&&
&&&&&&&&}));
&&&&&&&&callback();
当然我们只需要把配置写到 webpack({ ... }) 中去即可，无须再写 webpack.config.js 了。
更多参照信息请参阅：&/&&。
六. React 相关
⑴ 推荐使用&npm install react&的形式来安装并引用 React 模块，而不是直接使用编译后的 react.js，这样最终编译出来的 React 部分的脚本会减少 10-20 kb左右的大小。
⑵&&是一款非常好用的 React 热插拔的加载插件，通过它可以实现修改-运行同步的效果，配合&&使用更佳！
什么是 webpack？
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。
你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期 Github 上各大主流的（React相关）项目来说，它们仓库上所展示的示例已经是基于 webpack 来开发的，比如 React-Boostrap 和 Redux。
webpack的官网是&&，文档地址是&&，想对其进行更详细了解的可以点进去瞧一瞧。
webpack 的优势
其优势主要可以归类为如下几个：
1. webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2. 能被模块化的不仅仅是 JS 了。
3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
4. 扩展性强，插件机制完善，特别是支持 React 热插拔（见&&）的功能让人眼前一亮。
我们谈谈第一点。以 AMD/CMD 模式来说，鉴于模块是异步加载的，所以我们常规需要使用 define 函数来帮我们搞回调：
define(['package/lib'],
function(lib){
&&&&function
&&&&&&&&lib.log('hello
&&&&return
&&&&&&&&foo:
另外为了可以兼容 commonJS 的写法，我们也可以将 define 这么写：
define(function
(require, exports, module){
someModule = require(&someModule&);
anotherModule = require(&anotherModule&);&&&
&&&&someModule.doTehAwesome();
&&&&anotherModule.doMoarAwesome();
&&&&exports.asplode
= function
&&&&&&&&someModule.doTehAwesome();
&&&&&&&&anotherModule.doMoarAwesome();
然而对 webpack 来说，我们可以直接在上面书写 commonJS 形式的语法，无须任何 define （毕竟最终模块都打包在一起，webpack 也会最终自动加上自己的加载器）：
someModule = require(&someModule&);
anotherModule = require(&anotherModule&);&&&
&&&&someModule.doTehAwesome();
&&&&anotherModule.doMoarAwesome();
&&&&exports.asplode
= function
&&&&&&&&someModule.doTehAwesome();
&&&&&&&&anotherModule.doMoarAwesome();
这样撸码自然更简单，跟回调神马的说 byebye~
不过即使你保留了之前 define 的写法也是可以滴，毕竟 webpack 的兼容性相当出色，方便你旧项目的模块直接迁移过来。
安装和配置
我们常规直接使用 npm 的形式来安装：
$ npm install webpack -g
当然如果常规项目还是把依赖写入 package.json 包去更人性化：
$ npm init
$ npm install webpack --save-dev
每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。
我们看看下方的示例：
webpack = require('webpack');
commonsPlugin = new
monsChunkPlugin('common.js');
module.exports
&&&&plugins:
[commonsPlugin],
&&&&entry:
&&&&&&&&index
: './src/js/page/index.js'
&&&&output:
&&&&&&&&path:
'dist/js/page',
&&&&&&&&filename:
'[name].js'
&&&&module:
&&&&&&&&loaders:
&&&&&&&&&&&&{
test: /\.css$/, loader: 'style-loader!css-loader'
&&&&&&&&&&&&{
test: /\.js$/, loader: 'jsx-loader?harmony'
&&&&&&&&&&&&{
test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
&&&&&&&&&&&&{
test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
&&&&resolve:
&&&&&&&&root:
'E:/github/flux-example/src',
&&&&&&&&extensions:
&&&&&&&&alias:
&&&&&&&&&&&&AppStore
: 'js/stores/AppStores.js',
&&&&&&&&&&&&ActionType
: 'js/actions/ActionType.js',
&&&&&&&&&&&&AppAction
: 'js/actions/AppAction.js'
⑴ plugins 是插件项，这里我们使用了一个 CommonsChunkPlugin&的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。
⑵ entry 是页面入口文件配置，output 是对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里），其语法大致为：
&&&&entry:
&&&&&&&&page1:
&./page1&,
&&&&&&&&page2:
[&./entry1&,
&./entry2&]
&&&&output:
&&&&&&&&path:
&dist/js/page&,
&&&&&&&&filename:
&[name].bundle.js&
该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夹下。
⑶ module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理：
&&&&&&&&loaders:
&&&&&&&&&&&&
&&&&&&&&&&&&{
test: /\.css$/, loader: 'style-loader!css-loader'
&&&&&&&&&&&&
&&&&&&&&&&&&{
test: /\.js$/, loader: 'jsx-loader?harmony'
&&&&&&&&&&&&
&&&&&&&&&&&&{
test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
&&&&&&&&&&&&
&&&&&&&&&&&&{
test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
如上，&-loader&其实是可以省略不写的，多个loader之间用“!”连接起来。
注意所有的加载器都需要通过 npm 来加载，并建议查阅它们对应的 readme 来看看如何使用。
拿最后一个&&来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：
npm install url-loader -save-dev
配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式（其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）。
⑷ 最后是 resolve 配置，这块很好理解，直接写注释了：
&&&&&&&&root:
'E:/github/flux-example/src',
&&&&&&&&extensions:
&&&&&&&&alias:
&&&&&&&&&&&&AppStore
: 'js/stores/AppStores.js',
&&&&&&&&&&&&ActionType
: 'js/actions/ActionType.js',
&&&&&&&&&&&&AppAction
: 'js/actions/AppAction.js'
关于 webpack.config.js 更详尽的配置可以参考。
运行 webpack
webpack 的执行也很简单，直接执行
$ webpack --display-error-details
即可，后面的参数“--display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。
其他主要的参数有：
webpack --config XXX.js&&
webpack --watch&&
webpack -p&&&
webpack -d&&&
其中的&-p&是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb（主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大）。
上面唠嗑了那么多配置和执行方法，下面开始说说寻常页面和脚本怎么使用呗。
直接在页面引入 webpack 最终生成的页面脚本即可，不用再写什么 data-main 或&seajs.use 了：
lang=&en&&
charset=&UTF-8&&
&&&title&demo&/title&
src=&dist/js/page/common.js&&&/script&
src=&dist/js/page/index.js&&&/script&
可以看到我们连样式都不用引入，毕竟脚本执行时会动态生成&style&并标签打到head里。
各脚本模块可以直接使用 commonJS 来书写，并可以直接引入未经编译的模块，比如 JSX、sass、coffee等（只要你在 webpack.config.js 里配置好了对应的加载器）。
我们再看看编译前的页面入口文件（index.js）：
require('../../css/reset.scss');
require('../../css/allComponent.scss');
React = require('react');
AppWrap = require('../component/AppWrap');
createRedux = require('redux').createR
Provider = require('redux/react').P
stores = require('AppStore');
redux = createRedux(stores);
App = React.createClass({
&&&&render:
function()
&&&&&&&&return
&&&&&&&&&&&&&Provider
redux={redux}&
&&&&&&&&&&&&&&&&{function()
&AppWrap /&; }}
&&&&&&&&&&&&&/Provider&
&&&&&&&&);
React.render(
/&, document.body
一切就是这么简单么么哒~ 后续各种有的没的，webpack 都会帮你进行处理。
至此我们已经基本上手了 webpack 的使用，下面是补充一些有用的技巧。
一. shimming
在 AMD/CMD 中，我们需要对不符合规范的模块（比如一些直接返回全局变量的插件）进行 shim 处理，这时候我们需要使用&&来帮忙：
{ test: require.resolve(&./src/js/tool/swipe.js&),
loader: &exports?swipe&}
之后在脚本中需要引用该模块的时候，这么简单地来使用就可以了：
require('./tool/swipe.js');
二. 自定义公共模块提取
在文章开始我们使用了&CommonsChunkPlugin 插件来提取多个页面之间的公共模块，并将该模块打包为 common.js 。
但有时候我们希望能更加个性化一些，我们可以这样配置：
CommonsChunkPlugin = require(&webpack/lib/optimize/CommonsChunkPlugin&);
module.exports
&&&&entry:
&&&&&&&&p1:
&./page1&,
&&&&&&&&p2:
&./page2&,
&&&&&&&&p3:
&./page3&,
&&&&&&&&ap1:
&./admin/page1&,
&&&&&&&&ap2:
&./admin/page2&
&&&&output:
&&&&&&&&filename:
&[name].js&
&&&&plugins:
&&&&&&&&new
CommonsChunkPlugin(&admin-commons.js&,
&&&&&&&&new
CommonsChunkPlugin(&commons.js&,
&admin-commons.js&])
三. 独立打包样式文件
有时候可能希望项目的样式能不要被打包到脚本中，而是独立出来作为.css，然后在页面中以&link&标签引入。这时候我们需要&&来帮忙：
webpack = require('webpack');
commonsPlugin = new
monsChunkPlugin('common.js');
ExtractTextPlugin = require(&extract-text-webpack-plugin&);
&&&&module.exports
&&&&&&&&plugins:
[commonsPlugin, new
ExtractTextPlugin(&[name].css&)],
&&&&&&&&entry:
最终 webpack 执行后会乖乖地把样式文件提取出来：
四. 使用CDN/远程文件
有时候我们希望某些模块走CDN并以&script&的形式挂载到页面上来加载，但又希望能在 webpack 的模块中使用上。
这时候我们可以在配置文件里使用&externals 属性来帮忙：
&&&&externals:
&&&&&&&&&jquery&:
需要留意的是，得确保 CDN 文件必须在 webpack 打包文件引入之前先引入。
我们倒也可以使用&&在脚本中来加载我们的模块：
$script = require(&scriptjs&);
$script(&///ajax/libs/jquery/2.0.0/jquery.min.js&,
function()
&&$('body').html('It
五. 与 grunt/gulp 配合
以 gulp 为示例，我们可以这样混搭：
gulp.task(&webpack&,
function(callback)
&&&&webpack({
function(err,
&&&&&&&&if(err)
gutil.PluginError(&webpack&,
&&&&&&&&gutil.log(&[webpack]&,
stats.toString({
&&&&&&&&&&&&
&&&&&&&&}));
&&&&&&&&callback();
当然我们只需要把配置写到 webpack({ ... }) 中去即可，无须再写 webpack.config.js 了。
更多参照信息请参阅：&/&&。
六. React 相关
⑴ 推荐使用&npm install react&的形式来安装并引用 React 模块，而不是直接使用编译后的 react.js，这样最终编译出来的 React 部分的脚本会减少 10-20 kb左右的大小。
⑵&&是一款非常好用的 React 热插拔的加载插件，通过它可以实现修改-运行同步的效果，配合&&使用更佳！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：13144次
排名：千里之外
原创：79篇
转载：20篇
(7)(2)(12)(79)前端自动化工具推荐 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了23535字，被247人关注，获得了765个喜欢
前端自动化工具推荐
随着前端开发技术的不断发展，前端开发工作也变得越来越复杂，如果能合理地采用一些自动化的工具，生活要容易得多。
LiveReload
我目前的开发主力机是一台较早的 13寸 Macbook Pro，外加一台戴尔的显示器。相信做前端开发的都知道，这多出来的一台显示器对工作效率的提升有多大。
LiveReload 技术+两块显示屏可以帮你省去重复刷新浏览器这一枯燥的工作。目前实现 LiveReload 的方式很多，如果你倾向于图形化的桌面应用，可以尝试一下 LiveReload.app,
地址是：， 这款应用同时有 Mac 版和 Windows 版，使用起来也很简单，通过图形界面设置好需要监听文件所在的文件夹，然后将一段脚本插入到 HTML 页面即可。?
livereload.app
如果你和我一样更喜欢命令行，可以使用如下命令安装 LiveReload。
npm i livereload -g
接下来还需要安装 Chrome 插件，地址是：
使用时，只需要在工作目录下执行livereload，然后在 Chrome 中点击插件图标启动监听就可以了。
现在做前端开发，通常还会涉及到预处理器，虽然技术的多样化给我们带来了更多选择，但要这些技术产生的代码在浏览器中获得一致的表现，还得将其转化为浏览器支持的类型。
Webpack 是一款模块加载兼打包工具，丰富的插件让这款工具非常实用。虽然现在 Grunt 和 Gulp 作为两款前端自动化工具非常流行，但其实 Webpack结合Npm脚本在大多数场合就已经足够了。
安装 Webpack 非常简单，建议直接全局安装
$ npm install webpack -g
你可能还需要安装对应的加载器，比如 JSX loader, Less loader，这部分包建议安装在项目文件夹下。
$ npm install css-loader style-loader less-loader jsx-loader --save-dev
你只需要在 webpack 的配置文件中定义好加载器，各种流行的前端开发技术随你使用。
更多 Webpack 的用户请可参考官方文档。
django-webpack-loader
如果你在使用 Django ，django-webpack-loader是一款你不可错过的 Webpack 插件。
我们都知道浏览器缓存对页面加载速度的重要性， 同时我们也希望当资源文件发生变化时，页面能立刻向用户呈现变化。
通常的做法是将资源文件的 hash 值作为资源地址的一部分，比如main-cf4b5fab6e00a404e0c7.js， Webpack虽然支持这种命名方式，在配置文件中按如下方式设置即可。
config.output.filename = '[name]-[hash].js';
但却没办反自动更新资源文件在页面中的链接。django-webpack-loader解决的就是这个问题。
django-webpack-loader 分为两部分，一部分是 Webpack 插件，一部分是 Django 应用，安装方式如下
npm install --save-dev webpack-bundle-tracker
pip install django-webpack-loader
配置工作需要分别在 Webpack 和 Django 中进行，具体配置方法可参考项目主页（）。
WeFlow 是最近腾讯团队推出的一款前端开发工作流工具，官网声明的功能特性包括：
自动化流程
Less -& CSS (Sass 可自行定制)
CSS Autoprefixer 前缀自动补全
自动生成图片 CSS 属性，width & height 等
CSS 压缩 cssnano
CSS Sprite 雪碧图合成
Retina @2x & @3x 自动生成适配
imagemin 图片压缩
JS 合并压缩
EJS 模版语言
调试 & 部署
监听文件变动，自动刷新浏览器 (LiveReload)
FTP 发布部署
ZIP 项目打包
解决方案集成
px -& rem 兼容适配方案
智能 WebP 解决方案
去缓存文件 Reversion (MD5) 解决方案
喜欢图形化界面的同学可以试一试
除了免费的工具，还有一款付费工具值得一提。 CodeKit 是Mac 下老牌的前端开发辅助工具，目前价格32美刀。虽然不便宜，但功能强大，号称可以编译目前所有的前端脚本，支持浏览器自动刷新，内置Bower，第三方包的安装只需要一次点击即可完成。图形化的界面操作起来也很方便，不差钱的同学可以考虑。
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
爱前端，在路上，希望结伴而行。
· 6187人关注
前端开发学习、总结
· 3444人关注
Android，Java，前端，Node.js，React，React Native
· 2822人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：