Component-baseddesignworkflowandinterfaceabstractionComponent-baseddesignworkflowandinterfaceabstractionComponent-baseddesignworkflowandinterfaceabstraction本文是笔者在使用Webpack过程中总结的一系列建议和建议Tips，但需要注意的是，这些技巧都是针对Webpack1的，与Webpack1相比，Webpack2的API发生了较大的变化。本文提到的很多技巧在Webpack2中可能并不适用。如果你想了解从Webpack1迁移到Webpack2的详细教程，可以参考这里。另外可以参考作者基于Webpack2的模板Webpack2-React-Redux-Boilerplate。进度反馈使用Webpack时可以添加如下选项：--progress--colorscompression构建生产环境时可以添加-p选项：webpack-pmulti-modulesplit设置输出文件名时可以使用[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:{filename:'[name].js'},plugins:[newwebpack.optimize.CommonsChunkPlugin('vendor')]}它的工作流程如下。详情请参考CodeSplitting：AddingavendorentryandspecifyingtheassociatedlibraryCommonsChunkPluginwillremovetherelatedlibraryfromapp.js。CommonsChunkPlugin也会移除Webpack的Runtime依赖，迁移到vendor.js中的SourceMaps目前最好的SourceMaps选项是cheap-module-eval-source-map，这个工具将有助于在开发环境中显示Chrome/Firefox中的源代码文件，而且它的速度很快对于source-map和eval-source-map:constDEBUG=process.env.NODE_ENV!=='production'module.exports={debug:DEBUG?true:false,devtool:DEBUG?'cheap-module-eval-source-map':'hidden-source-map'}在ChromeDevtools中你可以找到webpack:///foo.js?查看a93h路径下的文件，或者选择自定义配置：output:{devtoolModuleFilenameTemplate:'webpack:///[absolute-resource-path]'}CSS作者正在编辑中，请过几天再来查看开发模式如果只想在开发模式下启用某些选项：constDEBUG=process.env.NODE_ENV!=='production'module.exports={debug:DEBUG?true:false,devtool:DEBUG?'cheap-module-eval-source-map':'hidden-source-map'}这时候需要注意在编译生产环境版本时使用如下命令：envNODE_ENV=productionwebpack-ppackagebodycompositionanalysis如果你认为你的包体有点大得令人难以置信，想确切知道哪些模块占了很多提及，可以使用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%)...优化React包体开发模式下的React会自带一个开发工具，我们希望在生产环境下去掉这个工具，减少包的大小。我们可以配置如下：很好的工具库，但很多时候我们只需要它的一小部分功能，这时候lodash-webpack-plugin就派上用场了用法：constLodashModuleReplacementPlugin=require('lodash-webpack-plugin');constconfig={plugins:[newLodashModuleReplacementPlugin({path:true,flattening:true})]};引用一个文件夹下的所有文件，如果想实现如下效果：require('./behaviors/*')/*不起作用！*/你需要使用require.context://http://stackoverflow.com/a/30652110/873870functionrequireAll(r){r.keys().forEach(r)}requireAll(require.context('./behaviors/',true,/\.js$/))s查看该作者更多好文章
