Webpack 是目前最流行的 js 打包工具，这得益于 Web 应用程序日益复杂和 js 模块化的流行。 webpack2 添加了一些新功能，并已进入预发布阶段。 现在是时候告诉您如何使用 webpack2 来优化您的创建，以便它可以创建更小的文件大小和更好的开发体验。
优化输出
较小的打包结果可以使网页打开速度更快并简化带宽。这可以通过以下几点来完成
1.压缩css
webpack2 中 css-loader 默认不启用压缩。 最终生成的css文件中有很多空格和制表符。 通过配置 css-loader?minimize 参数，可以开启压缩，输出最小的 css。 CSS压缩实际上是通过cssnano来实现的。
2. 树摇动
摇树是指利用es6import导出句型的静态特性，删除已经导出和未导入的东西。 要使Tree Shaking发挥作用，需要注意以下几点：
1）配置babelwebpack优化highcharts，使其在编译转换es6代码时不将import export转换为cmd module.export。 配置如下：
2）分发到npm的库中大部分代码都是es5，但是一些库（redux、react-router等）已经开始支持tree-shaking。 这些库发布到npm的代码既包括es5，也包括全部使用es6 import export句型的代码。 以redux库为例，npm下载的目录结构如下：
lib目录下存放的是编译好的es5代码，es目录下存放的是使用import-export句型编译好的es5代码。 redux package.json 文件中有这两个配置：
这里指的是这个库的入口文件的位置，所以为了让webpack读取es目录下的代码，需要使用jsnext:main数组中配置的入口。 为此，webpack 需要进行如下配置：
这将导致 webpack 首先使用 jsnext:main 数组，如果没有可用的数组，则使用 main 数组。 这使得支持 tree-shaking 的库得以优化。
3.优化UglifyJsPlugin
webpack--optimize-minimize选项会让UglifyJsPlugin压缩输出js，但是默认的UglifyJsPlugin配置不会将代码压缩到最小输出js。 输出的js中仍然有注释和空格。 您需要覆盖默认配置：
4.定义环境变量NODE_ENV=Production
很多库（比如react）都有这样的部分代码：
当环境变量NODE_ENV等于Production时，UglifyJs会认为if语句是死代码，并在压缩代码时将其删除。
5.使用CommonsChunkPlugin提取公共代码
CommonsChunkPlugin可以提取多个代码块所依赖的模块并生成单个模块。 要发挥CommonsChunkPlugin的作用，还需要浏览器缓存机制的配合。 在应用有多个页面的场景下，提取所有页面通用的代码，以减少单个页面的代码。 不同页面切换时webpack优化highcharts，所有页面通用的代码之前已经加载过，无需重新加载。 这种方法对于提高应用程序性能非常有效。
6.DedupePlugin 和 OccurrenceOrderPlugin
在 webpack1 中，经常使用 DedupePlugin 插件来去除重复模块，使用 OccurrenceOrderPlugin 插件将依赖关系较高的模块分配给较小 ID 的模块，以减少输出的代码量。 在webpack2中，已经使用了这两个插件。 它已被删除，因为该函数已被外部化。
除了压缩文本代码之外，您还可以：
1）使用imagemin-webpack-plugin压缩图片
2）使用webpack-spritesmith合并精灵图片
3）使用babili作为支持es6的js运行环境
上述优化点只需要在为生产环境创建代码时使用。 最好在开发环境中关闭它们，因为它们非常耗时。
优化开发体验
优化开发体验主要从更快的创建和更便捷的功能入手。
更快的构建
1.缩小文件搜索范围
Webpack的resolve.modules配置模块库的位置（通常是node_modules）。 当js中出现import 'redux'时，既不是相对路径，也不是绝对路径，就会在node_modules目录下找到。 但默认配置会采用向下递归查找的方式来查找node_modules，但一般在项目目录下的项目根目录下只有一个node_modules。 为了减少搜索，我们直接写node_modules的全路径：
另外，webpack在配置loader时还可以缩小文件搜索范围。
1）加载器的测试正则表达式应该尽可能简单。 例如，如果您的项目中只有 .js 文件，则不要将 test 写为 /.jsx?$/
2）loader使用include来命中只需要处理的文件，比如babel-loader的这两个配置：
Babel只编译项目目录下src目录下的代码
项目目录下的所有js都会被babel编译，包括庞大的node_modules下的js
2.启用babel-loader缓存
babel编译过程需要很长时间。 幸运的是，babel-loader 提供了缓存编译结果的选项。 重启webpack时，不需要创新编译，而是复用缓存的结果，减少编译过程。 babel-loader 缓存机制默认是关闭的。 开启它的配置如下：
3.使用别名
resolve.alias 配置路径映射。 发布到npm的库大多包含两个目录，一个是放置cmd的lib目录，另一个是dist目录，将所有文件合并为一个文件。 大多数入口文件都指向lib。 默认情况下，webpack会读取lib目录下的入口文件，然后递归加载其他依赖文件。 这个过程需要很长时间。 别名配置可以让webpack直接使用dist目录下的整体文件，减少文件递归解析。 配置如下：
4.使用noParse
module.noParse 配置哪些文件可以在没有 webpack 的情况下解析。 有些库是自包含的，不依赖其他库，没有模块化，例如jquey、momentjs、chart.js，必须整体导入才能使用。 webpack是一个模块化的打包工具，完全不需要解决此类文件的依赖关系，因为它们不依赖于其他文件，而且体积很大，所以忽略它们的配置，如下：
此外，还有很多加速的方法：
1）使用happypack并行创建多个进程
2）使用DllPlugin复用模块
更便捷的功能
1.模块热更换
模块热替换是指开发过程中更改代码后，无需刷新页面，直接用旧模块替换已更改的模块，使页面显示最新的疗效。 webpack-dev-server的外部模块是可热替换的，配置也非常方便。 我们以react应用程序为例。 步骤如下：
1）启动webpack-dev-server时，带上--hot参数以启用模块热替换。 开启--hot后，会对css变化进行手动热替换，但js涉及复杂逻辑，需要进一步处理配置。
2）配置页面入口文件
当./app发生变化或者./app依赖的文件发生变化时，./app会被编译成模块来替换旧的。 更换后，会重新执行run函数，以呈现最新的疗效。
2.自动生成html
webpack只做了资源打包的工作，缺乏在html中加载运行的功能。 在一个庞大的app中通过手写html来加载此类资源是非常繁琐且容易出错的。 我们需要手动正确加载打包的资源。 。 webpack原生不支持这个功能，所以我做了一个插件web-webpack-plugin来具体使用。 单击链接可查看详细文档。 用法大致如下：
网页包配置
会输出一个index.html文件，该文件会手动导入entryA和B生成的js文件，
输出html：
输出目录结构
分析输出结果
webpack 有一个叫做 webpackanalyze 的工具，可以用可视化的方式直观地进行分析和构建，进一步优化结果和速度。 使用它需要在执行webpack时带上--json --profile2参数，意思是让webpack以json的形式输出构建结果并带上构建性能信息，使用如下：
会产生一个stats.json文件，然后打开webpackanalyze上传该文件开始分析。
最后附上本文提到的webpack的整体配置，分为开发环境的webpack.config.js和生产环境的webpack-dist.config.js
扫描下方二维码，
发表评论