webpack对html压缩,Webpack系列-代码压缩

代码压缩

Webpack对代码的压缩可分为三个部分，HTML、CSS、JS。

压缩HTML

通过 html-webpack-plugin 插件进行HTML的压缩

html-webpack-plugin 插件主要是有来简化HTML文件的创建，将webpack中配置的output js文件和 mini-css-extract-plugin 等插件抽取的CSS文件插入到提供的template中生成一个html文件放在输出目录中。

同时该插件也可以对html进行压缩，压缩主要是使用 [html-minifier-terser] 来完成，可用的压缩配置项如下 html-minifier options

示例：

new HtmlWebpackPlugin({

filename: `${projectName}/index.html`,

template: `src/${projectName}/index.html`,

minify: {

html5: true, // 根据HTML5规范解析输入

collapseWhitespace: true, // 折叠空白区域

preserveLineBreaks: false,

minifyCSS: true, // 压缩文内css

minifyJS: true, // 压缩文内js

removeComments: false // 移除注释

}

})

复制代码

minify可以传Boolean和Object两种类型，当mode为“production”模式是，minify默认为true，其他模式为默认为false。

但尝试在production模式下，minify不配置的情况下，html并没有被压缩。

压缩CSS

CSS的压缩需要两个插件配合使用：

mini-css-extract-plugin

该插件可以分离提取CSS到单独的文件中，该插件仅在生产环境上使用，开发环境可以使用style-loader，特别是你开启了HMR热更新。

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const devMode = process.env.NODE_ENV === 'development'

// ...

module: {

rules: [

{

test: /\.css$/,

use: [

{ loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader },

{ loader: 'css-loader' },

{

loader: 'px2rem-loader',

options: {

remUnit: 37.5,

remPrecision: 8

}

},

{ loader: 'postcss-loader' }

]

}

]

},

plugins: [

new MiniCssExtractPlugin({

filename: '[name].[contenthash:8].css',

chunkFilename: '[id].[contenthash:8].css'

}),

]

复制代码

optimize-css-assets-webpack-plugin

在生产环境可以使用该插件来压缩CSS，需要设置optimization.minimizer属性，但是设置该属性会覆盖webpack默认的js压缩，所有还必须设置js的压缩插件。

const TerserJSPlugin = require("terser-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {

optimization: {

minimizer: [

new TerserJSPlugin({}),

new OptimizeCSSAssetsPlugin({})

]

},

plugins: [

new MiniCssExtractPlugin({

filename: '[name].[contenthash:8].css',

chunkFilename: '[id].[contenthash:8].css'

}),

],

module: {

rules: [

{

test: /\.css$/,

use: [

{ loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader },

{ loader: 'css-loader' },

{

loader: 'px2rem-loader',

options: {

remUnit: 37.5,

remPrecision: 8

}

},

{ loader: 'postcss-loader' }

]

}

]

}

}

复制代码

压缩JS

用于压缩JS代码的插件主要有两个：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

optimization: {

minimizer: [

new UglifyJsPlugin()

],

noEmitOnErrors: true

},

复制代码

压缩ES6

const TerserPlugin = require('terser-webpack-plugin')

optimization: {

minimizer: [

new TerserPlugin()

],

noEmitOnErrors: true

},

复制代码