原文地址本文是作者对所学webpack技巧的总结，除特殊情况外，适用于webpack3.0版本。进度报告使用webpack--progress--colors这样编译后的输出可以有进度和颜色。压缩在生产环境构建项目时，使用webpack-p这行代码自动设置webpack2中的process.env.NODE_ENV==='production'，通过设置output属性为[name]来导出多文件打包.js复数包。以下示例将生成a.js和b.js。module.exports={entry:{a:'./a',b:'./b'},output:{filename:'[name].js'}}担心重复打包？使用CommonsChunkPlugin将公共块移动到新的输出文件中。plugins:[newwebpack.optimize.CommonsChunkPlugin('init.js')]将应用文件与第一个第三方库文件使用CommonsChunkPlugin将第三方代码移动到vendor.js中。varwebpack=require('webpack')module.exports={entry:{app:'./app.js',vendor:['jquery','underscore',...]},output:{文件名:'[name].js'},plugins:[newwebpack.optimize.CommonsChunkPlugin('vendor')]}让我们看看CommonsChunkPlugin是如何工作的：我们指定一个名为vendor的入口，它加载第三方库，例如jquery。CommonsChunkPlugin识别到这些第三方库在app.js中重复出现，将app.js中的第三方库全部移除。在vendor.js中，CommonsChunkPlugin还添加了webpackruntime。参考链接：Codesplittingresourcemapping(webpack1)最好的资源映射选项是cheap-module-eval-source-map。使用chrome/firefox的开发人员工具时，它会显示原始资源文件。另一方面，它比source-map和eval-source-map更快。//仅在webpack1中可用constDEBUG=process.env.NODE_ENV!=='production'module.exports={debug:DEBUG?真：假，devtool：调试？'cheap-module-eval-source-map':'hidden-source-map'}您的文件在chrome开发人员工具中显示为webpack:///foo.js?a93h。如果我们想让文件名显示得更清楚怎么办，比如webpack:///path/to/foo.js？output:{devtoolModuleFilenameTemplate:'webpack:///[absolute-resource-path]'}参考链接：devtooldocumentationResourceMapping(webpack2-3)在webpack2-3版本中，最好的资源映射选项是cheap-module-source-map，因为cheap-module-eval-source-map策略不能再在chrome/firefox中显示正确的路径。constDEBUG=process.env.NODE_ENV!=='production'module.exports={devtool:DEBUG?'cheap-module-source-map':'hidden-source-map'}如果你使用的是extract-text-webpack-plugin，你可以使用'source-map'代替，否则css的资源映射将不起作用。//仅当你使用extract-text-webpack-pluginmodule.exports={devtool:DEBUG?'source-map':'hidden-source-map'}同理，要webpack:///path/to像/foo.js这样清晰的路径，我们可以这样写：output:{devtoolModuleFilenameTemplate:'webpack:///[absolute-resource-path]'}参考链接：devtool文档输出css文件这是一个复杂的过程，你可以在这里找到答案。（译者注：本指南尚未翻译。）开发模式是否希望某些配置仅存在于开发环境中？constDEBUG=process.env.NODE_ENV!=='production'//Webpack1module.exports={debug:DEBUG?真：假，devtool：调试？'cheap-module-eval-source-map':'hidden-source-map'}//Webpack2module.exports={devtool:DEBUG?'cheap-module-source-map':'hidden-source-map'}在webpack1中，打包项目资源时，通过envNODE_ENV=productionwebpack-p来调用webpack命令。在webpack2中，只需webpack-p就足够了，因为webpack会自动为您设置NODE_ENV。AnalyzeBundleSize你想知道资源包中有哪些“重量级”依赖吗？请改用webpack-bundle-size-analyzer。$yarnglobaladdwebpack-bundle-size-analyzer$./node_modules/.bin/webpack--json|webpack-bundle-size-analyzerjquery:260.93KB(37.1%)moment:137.34KB(19.5%)parsleyjs:87.88KB(12.5%)bootstrap-sass:68.07KB(9.68%)...如果你正在生成资源地图，您还可以使用独立于webpack工作的source-map-explorer。$yarnglobaladdsource-map-explorer$source-map-explorerbundle.min.jsbundle.min.js.map参考链接：webpack-bundle-size-analyzersource-map-explorer较小的react项目react会默认生成一些您在生产中不需要的开发工具。使用EnvironmentPlugin将它们非人化。这可能会节省大约30kb的空间。plugins:[newwebpack.EnvironmentPlugin({NODE_ENV:'development'})]在webpack1中，使用envNODE_ENV=productionwebpack-p命令启动webpack打包资源。在webpack2中，只要webpack-p就可以了，原因省略。参考链接：EnvironmentPlugindocumentation更小的LodashLodash很好用，但是我们平时用到的只是其功能的沧海一粟。lodash-webpack-plugin可以用noop、identity或其他更简化的选项替换功能集，以帮助您减少lodash占用的空间。constLodashModuleReplacementPlugin=require('lodash-webpack-plugin');constconfig={plugins:[newLodashModuleReplacementPlugin({path:true,flattening:true})]};此方法可以帮助您节省至少10kb。如果你的项目中lodash的比例高，那么你会节省更多的资源。导入文件夹中的所有文件您是否尝试过下面的代码但它不起作用？require('./behaviors/*')/*看起来是正确的*/事实上，你应该使用require.context。//http://stackoverflow.com/a/30652110/873870functionrequireAll(r){r.keys().forEach(r)}requireAll(require.context('./behaviors/',true,/\.js$/))参考链接：require.contextClearextract-text-webpack-pluginlog如果你在使用extract-text-webpack-plugin时看到如下调试日志：Childextract-text-webpack-plugin:+2hiddenmodulesChildextract-text-webpack-plugin:+2hiddenmodulesChildextract-text-webpack-plugin:+2hiddenmodules你可以用stats关闭它:{children:false}:/*webpack.config.js*/stats:{children:false,},参考链接：extract-text-webpack-plugin#35总结以上是rstacruz总结的关于webpack的13条建议。这是几乎所有项目都能用到的Webpack配置技巧~
