webpack 如何压缩文件
本节我们学习如何压缩 webpack 中的文件。在实际应用中，为了缩小打包后包的体积，我们可能需要将 CSS 和 JS 文件进行压缩，这需要用到 webpack 中的不同插件来实现。
压缩 CSS
在 webpack 中要压缩 CSS 文件，需要用到 optimize-css-assets-webpack-plugin 插件，这个插件会在 webpack 构建过程中搜索 CSS ，并优化 CSS。
首先我们需要安装这个插件，命令如下所示：
npm install optimize-css-assets-webpack-plugin --save-dev
执行命令后，会发现插件成功添加到了 package.json 文件中的 devDependencies 依赖中。
这个插件在使用时可以接受以下选项：
-
assetNameRegExp：一个正则表达式，指示应优化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源 CSS 文件的文件名。默认为/\.css$/g。 -
cssProcessor：用于优化 CSS 的 CSS 处理器，默认为cssnano。这应该是一个遵循cssnano.process接口的函数（接收 CSS 和options参数并返回一个Promise）。 -
cssProcessorOptions：传递给cssProcessor的选项，默认为{}。 -
canPrint：一个布尔值，指示插件是否可以将消息打印到控制台，默认为true。
示例：
然后我们可以在 webpack.config.js 配置文件中配置这个插件，注意一下，我们之前在学习插件的时候就讲到过，插件在使用之前需要先通过 require 引用。
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
entry:'./index.js',
},
output: {
path:__dirname + '/dist',
filename:'./bundle.js'
},
module:{
rules:[
{
test:/.css$/,
use:['style-loader','css-loader']
}]
},
mode: 'production',
plugins: [
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true },
normalizeUnicode: false }],
},
canPrint: true
})
]
}
压缩 JS
如果我们要在 webpack 中压缩 JS ，可以使用 uglifyjs-webpack-plugin 插件。uglifyjs-webpack-plugin 插件用来对 JS 文件进行压缩，减小 JS 文件的大小，加速加载速度。因为这个插件会拖慢 webpack 的编译速度，所以一般我们在开发时会将其关闭，部署的时候再将其打开。
在使用此插件时，同样需要先进行安装：
npm install uglifyjs-webpack-plugin --save-dev
uglifyjs-webpack-plugin 插件的选项有如下所示：
-
test：测试匹配文件，默认值为/\.js(\?.*)?$/i。 -
include：要包含的文件，默认值为undefined。 -
exclude：要排除的文件。 -
cache：启用文件缓存。当 JS 没有发生变化则不压缩。 -
parallel：是否启用并行压缩。 -
sourceMap：是否启用sourceMap。
示例：
uglifyjs-webpack-plugin 插件的使用如下所示：
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
plugins: [
new UglifyJsPlugin({
test: /\.js(\?.*)?$/i, //测试匹配文件,
include: /\/index.js/, //包含哪些文件
excluce: /\/excludes/, //不包含哪些文件
chunkFilter: (chunk) => {
// `vendor` 模块不压缩
if (chunk.name === 'vendor') {
return false;
}
return true;
},
cache: true,
parallel: true,
sourceMap: true
})
]
}
