webpack基础用法（4）：文件指纹策略和压缩1 文件指纹策略2 代码压缩

1 文件指纹策略

文件指纹是指打包后输出的文件名的后缀
指纹策略：

• Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会更改
• Chunkhash：和 webpack 打包的 chunk 有关， 不同的 entry 会生成不同的 chunkhash 值
• Contenthash：根据文件内容来定义hash，文件内容不变，则 contenthash 不变

1.1 JS的文件指纹设置

设置 output 的 filename，使用 [chunkhash]

module.exports = {
    ...,
    output: {
        ...,
        filename: '[name][chunkhash:8].js'
    },
    ...
}

1.2 CSS的文件指纹设置

设置 MiniCssExtractPlugin（将css提取成独立的文件）的 filename, 使用[contenthash]

1.2.1 安装插件

npm i mini-css-extract-plugin -D

1.2.2 配置

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...
module.exports = {
    ...,
    module: {
        rules: [
            ...,
            {test: /.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader']},
			...
        ]
    },
    plugins: {
        ...,
        new MiniCssExtractPlugin({
        	filename: '[name][contenthash:8].css'
       	})
    },
    ...
}

1.3 图片的文件指纹设置

设置 file-loader 的 name，使⽤[hash]

module.exports = {
    ...,
    module: {
        rules: [
            ...,
            {test: /.(png|jpg|gif|jpeg)$/, use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name][hash:8].[ext]'
                    }
                }
            ]},
        ]
    },
    ...
}

2 代码压缩

2.1 JS压缩

webpack4 内置了 uglifyjs-webpack-plugin

2.2 CSS压缩

使用 optimize-css-assets-webpack-plugin，同时使用 cssnano

2.2.1 安装依赖

npm install optimize-css-assets-webpack-plugin cssnano -D

2.2.2 配置

...
const OptimizeCSSAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
...
module.exports = {
    ...,
    module: {
        rules: [
            ...,
            {test: /.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader']},
			...
        ]
    },
    plugins: {
        ...,
        new OptimizeCSSAssetsWebpackPlugin( {
            assetNameRegExp: /.css$/g,
            cssProcessor: require('cssnano')
        })
    },
    ...
}

2.3 html文件压缩

修改 html-webpack-plugin，设置压缩参数

2.3.1 安装依赖

npm i html-webpack-plugin -D

2.3.2 配置

const path = require('path');
...
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...,
   
    mode: 'production',
    plugins: [
        ...,
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src/index.html'),
            filename: "index.html",
            chunks: ['index'],
            inject: true,
            minify: {
                html5: true,
                collapseWhitespace: true, //是否去掉空格
                preserveLineBreaks: false, //是否保留换行
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        }),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src/search.html'),
            filename: "search.html",
            chunks: ['search'],
            inject: true,
            minify: {
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        })
    ]
}

最后

以上就是潇洒白羊为你收集整理的webpack基础用法（4）：文件指纹策略和压缩1 文件指纹策略2 代码压缩的全部内容，希望文章能够帮你解决webpack基础用法（4）：文件指纹策略和压缩1 文件指纹策略2 代码压缩所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。