前言：在现实项目中，我们可能很少需要从头开始去配置一个webpack 项目，特别是webpack4.0发布以后，零配置启动一个项目成为一种标配。正因为零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化，所以实际应用中，我们可以把精力更多专注在业务层面上，而无需分心于项目构建上的优化。然而从学习者的角度，我们需要了解webpack在项目的构建和打包压缩过程中做了哪些的优化，以及在原有默认配置上，还可以做哪些性能方面上的改进。

       最近在完成vue的单页面应用后萌生了一个想法，抛弃掉vue-cli的构建配置，从零开始进行webpack优化，并将过程中的思路和体会分享在这篇文章中。webpack的初始配置在我之前写的另一篇
但是接下来，我们需要将css代码独立开来，为什么呢？最主要的一点是我们希望更好的利用浏览器的缓存，当单独修改了样式时，独立的css文件可以不需要应用去加载整个的脚本文件，提高效率。并且，当遇到多页面的应用时，可以单独将一些公共部分的样式抽离开来，加载一个页面后，接下来的页面同样可以利用缓存来减少请求。

webpack4.0 中提供了抽离css文件的插件，mini-css-extract-plugin,只需要简单的配置便可以将css文件分离开来

const MiniCssExtractPlugin = require('mini-css-extract-plugin')  module.exports = {     ···     plugins: [         new MiniCssExtractPlugin({             filename: "[name].[contenthash].css",             chunkFilename: "[name].[contenthash].css"         })     ],     module: {         rules: {             test: /\.(css|scss)$/,             use: [process.env.NODE_ENV == 'production' ? MiniCssExtractPlugin.loader : 'style-loader', {               loader: 'css-loader',               options: {                 sourceMap: true               },             }, "sass-loader"]         }     }     ··· }

分离后

3.3 压缩js, html, css 文件

要想优化构建后的体积，不断减少静态资源文件的大小，我们希望webpack帮助我们尽可能压缩文件的体积。对于js 脚本文件而言，webpack4.0 在mode 为‘production’时，默认会启动代码的压缩。除此之外，我们需要手动对html和css 进行压缩。

       针对html 的压缩，只需要对html-webpack-plugin进行相关配置。

// webpack.base.js   module.exports = {     plugins: [         new HtmlWebpackPlugin({           title: 'minHTML',           filename: 'index.html',           template: path.resolve(__dirname, '../index.html'),           minify: { // 压缩 HTML 的配置             collapseWhitespace: true,             removeComments: true,             useShortDoctype: true           }         }),     ] } 

       针对css 的压缩， webpack4.0 使用optimize-css-assets-webpack-plugin来压缩单独的css 文件。

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");  module.exports = {     plugins: [         new OptimizeCSSAssetsPlugin()     ], }

对比之下，我们可以看到明显的效果，关于压缩css 更多的配置可以参考

关键字：