tree-shaking:用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的特性，例如 import 和 export 。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。
我们通过使用tree-shaking，可以极大的减少代码的体积，对于提高打包性能很有帮助。为了使tree-shaking能生效，我们还要在webpack配置文件中开启：
// webpack.base.js optimization: { usedExports: true }
还有一个问题，由于tree-shaking是基于import 和export的，当我们用import引入css文件时，是没有导出的，所以我们需要配置忽略css文件的tree-shaking，在package.json中添加如下配置：
// package.json "sideEffects": [ "*.css", "*.less" ],
在打包的过程中，每次执行打包都会新建一个打包文件，我们想要每次打包之前都清除上一次打包的文件怎么办呢？我们可以使用clean-webpack-plugin来实现，首先先安装，然后具体配置如下：
// webpack.prod.js plugins: [ new CleanWebpackPlugin() ],
该插件会默认清除dist目录下的打包文件。 接下来我们安装jquery：
npm install jquery -S
在index.js引入并使用：
import $ from 'jquery'; import './styles/app.css' console.log($('#root').html('hello world'));
执行npm run build后，我们在浏览器中打开，即可看到jq的作用：
但是我们看dist目录下的js文件，发现jquery和业务代码都打包进一个页面了，这样会导致当业务复杂时，整个页面代码会非常大，我们进一步做优化，即js代码分割。 根据webpack官网的方案，我们只需要进行简单的配置，便可以进行对js代码分割：
//webpack.base.js optimization: { splitChunks: { chunks: 'all', // chunks: 'async', // async表示只对异步代码进行分割 minSize: 30000, // 当超过指定大小时做代码分割 // maxSize: 200000, // 当大于最大尺寸时对代码进行二次分割 minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '_', name: true, cacheGroups: { // 缓存组：如果满足vendor的条件，就按vender打包，否则按default打包 vendors: { test: /[\\/]node_modules[\\/]/, priority: -10, // 权重越大，打包优先级越高 // filename: 'js/vender.js' //将代码打包成名为vender.js的文件 name: 'vender' }, default: { minChunks: 2, priority: -20, name: 'common', // filename: 'js/common.js', reuseExistingChunk: true // 是否复用已经打包过的代码 } } }, usedExports: true }
由于篇幅限制，splitChunks的具体配置我通过注释写出来了，如果想了解更详细的配置，后面大家可以去webpack官网查看。此时执行npm run build,我们可以看到代码已经进行了分割：
当然只满足与css和js的打包还远远不够，我们项目中还会用到各种图片，字体图标，css预编译语言如less或者scss，由于这部分的安装比较简单，我们直接上代码。 首先安装相关依赖：
npm install url-loader file-loader less less-loader
此时我们webpack.base.js中module变为：
module: { rules: [ // 将es6编译成es5 { test: /\.jsx?$/, // ?表示x有0个或一个 exclude: /node_modules/, // 不编译某个目录下的文件 include: path.resolve(__dirname, '../src'), // 只在include包含的目录下进行loader编译 use: [ "babel-loader", ] }, // 加载解析文件资源 { test: /\.(jpg|png|gif)$/, use: { loader: 'url-loader', // 和file-loader功能相同，但更智能 options: { // 配置打包后的文件名,具体可看webpack的file-loader文档 name: '[name].[ext]?[hash]', outputPath: 'images/', limit: 4096 // 当图片大小大于4k时将以文件形式输出，否则以base64输出 } } }, // 引入字体，svg等文件 { test: /\.(eot|ttf|svg)$/, use: { loader: 'file-loader' } } ] },
为了支持less，我们修改一下dev和prod文件：
// webpack.dev.js module: { rules: [ { test: /\.(css|less)$/, use: [ // loader解析的顺序是从下到上，从右到左的顺序 'style-loader', //使用MiniCssExtractPlugin时就不能使用style-loader了 { loader: 'css-loader', options: { importLoaders: 2 //该方式可以让@import引入的css文件再次执行一边css打包loader } }, 'less-loader', ] } ] } // webpack.prod.js module: { rules: [ { test: /\.(css|less)$/, use: [ // loader解析的顺序是从下到上，从右到左的顺序 { loader: MiniCssExtractPlugin.loader, options: { filename: '[name].css', chunkFilename: '[name].css', publicPath: '../' //****最后打包的时候替换引入文件路径 }, }, { loader: 'css-loader', options: { importLoaders: 2 //该方式可以让@import引入的css文件再次执行一边css打包loader } }, 'less-loader' ] } ] }
我们写一段less代码试试：
body { #root { background-color: #000; color: #fff; } }
我们执行build之后在浏览器打开看看效果：
