Webpack实践技巧与建议

在使用Webpack的践技过程中总结的一系列建议与技巧，不过需要注意的巧建是这些小技巧都是关于Webpack 1的。Webpack 2与Webpack 1相比其API发生了较大变化，践技本文提及的巧建不少技巧可能在Webpack 2并不能起作用。如果你想了解从Webpack 1迁移到Webpack 2的践技详细教程，可以参考这里，巧建另外可以参考笔者的践技基于Webpack 2的模板 Webpack2-React-Redux-Boilerplate。

进度反馈

可以在使用Webpack的源码库巧建时候添加如下选项:

--progress --colors 

压缩

可以在进行生产环境构建时添加-p选项：

webpack -p 

多模块分割

在设置output的文件名时可以使用[name].js多匹配名，如下的践技例子会生成a.js与b.js：

module.exports = {   entry: {     a: ./a,     b: ./b   },   output: { filename: [name].js } } 

如果你担心代码重复的问题，可以使用CommonsChunkPlugin来抽取出多个输出文件的巧建公共代码:

plugins: [ new webpack.optimize.CommonsChunkPlugin(init.js) ] <script src=init.js></script> <script src=a.js></script> 

分割应用于渲染代码

同样是使用CommonsChunkPlugin来讲公共的渲染代码移动到vendor.js中:

var webpack = require(webpack) module.exports = {   entry: {     app: ./app.js,     vendor: [jquery, underscore, ...]   },   output: {     filename: [name].js   },   plugins: [     new webpack.optimize.CommonsChunkPlugin(vendor)   ] } 

其工作流程如下，具体可以参考Code Splitting:

添加vendor入口并且指定关联库 CommonsChunkPlugin会从app.js中移除相关库 CommonsChunkPlugin 同样会把Webpack的践技运行时依赖迁移到vendor.js中

Source Maps

目前***的Source Maps选项是cheap-module-eval-source-map，这个工具会帮助开发环境下在Chrome/Firefox中显示源代码文件，巧建其速度快于source-map与eval-source-map：

const DEBUG = process.env.NODE_ENV !== production module.exports = {   debug: DEBUG ?践技 true : false,   devtool: DEBUG ? cheap-module-eval-source-map : hidden-source-map } 

在Chrome Devtools你可以在webpack:///foo.js?a93h路径下查看文件，也可以选择自定义配置:

output: {    devtoolModuleFilenameTemplate: webpack:///[absolute-resource-path]  } 

CSS

作者正在编辑中，巧建请过几日回来查看。免费源码下载践技

开发模式

如果你希望在仅仅在开发模式下开启某些选项:

const DEBUG = process.env.NODE_ENV !== production module.exports = {   debug: DEBUG ? true : false,   devtool: DEBUG ? cheap-module-eval-source-map : hidden-source-map } 

这个时候你需要注意在编译生产环境版本时使用如下命令:env NODE_ENV=production webpack -p

包体组成分析

如果你觉得你的包体有点匪夷所思的大并且想具体了解到底是哪个模块占据了大量的提及，可以使用webpack-bundle-size-analyzer:

$ yarn global add webpack-bundle-size-analyzer $ ./node_modules/.bin/webpack --json | webpack-bundle-size-analyzer jquery: 260.93 KB (37.1%) moment: 137.34 KB (19.5%) parsleyjs: 87.88 KB (12.5%) bootstrap-sass: 68.07 KB (9.68%) ... 

优化React包体

React在开发模式下会自带开发工具，而我们希望在生产环境下能够移除该工具从而减少包体，我们可以通过如下配置:

plugins: [   new webpack.DefinePlugin({     process.env: {       NODE_ENV: JSON.stringify(process.env.NODE_ENV || development)     }   }) ] 

优化Lodash

Lodash是非常不错的工具库，不过很多时候我们仅需要其一小部分功能，此时lodash-webpack-plugin就派上了用场:

const LodashModuleReplacementPlugin = require(lodash-webpack-plugin); const config = {   plugins: [     new LodashModuleReplacementPlugin({       path: true,       flattening: true     })   ] }; 

引用某个文件夹中的所有文件

如果你希望达到如下的效果:

require(./behaviors/*) /* Doesnt work! */ 

你需要使用require.context:

// stackoverflow.com/a/30652110/873870

function requireAll (r) { r.keys().forEach(r) }  requireAll(require.context(./behaviors/, true, /\.js$/))s 

【本文是专栏作者“张梓雄 ”的原创文章，如需转载请通过与作者联系】

戳这里，b2b信息网看该作者更多好文