代码压缩 (HTML,CSS,JS)
HTML代码的压缩,我们还是需要借助 htmlWebpackPlugin
。
new HtmlWebpackPlugin({
filename: 'index.html', // 配置输出文件名和路径
template: 'src/index.html', // 配置文件模板
title: '陪你渡过漫长岁月', // title变量
minify: { // 压缩HTML代码的配置
minifyCSS: true, // HTML 中的 css
minifyJS: true, // HTML 中 js
collapseWhitespace: true // 标签之间的空白格
}
})
JS代码的压缩,在 webpack4
中,我们只需要把 mode
设置为 production
即可。
可以在 pageage.json
中对 script task
进行配置:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --watch --mode development",
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production" //这里就是 生产 模式
},
也可以在 webpack.config.js
中进行配置:
module.exports = {
mode: 'production',
entry: '',
output: '',
//
}
CSS 代码的压缩,首先我们需要知道,我们并没有生成 .css
文件,所以我们首先需要抽离出 css
文件,我们需要借助 mini-css-extract-plugin
,上一节我们说过,要想让其 css
生效,我们动态创建 style
标签进行引入(这就是 style-loader
的作用),另一种就是生成 css
文件,然后在 html 中直接进行引用。 很显然,mini-css-extract-plugin
和 style-loader
使用其中一个就可以了。
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['MiniCssExtractPlugin.loader', 'css-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin()
]
}
然后我们可以使用 css-loader
为我们提供的 minimize
来对 css
进行压缩。
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, {
loader: 'css-loader',
options: {
minimize: true
}
}]
}
]
},
plugins: [
new MiniCssExtractPlugin()
]
}