webpack - 文件打包

文件指纹

Hash: 和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会更改

Chunkhash：和webpack打包的chunk有关，不同的entry会生成不同的chunhash值

Contenthash：根据文件内容来定义hash，文件内容不变，则contenthash不变

js文件指纹

设置output的filename，使用[chunkhash]

output: {
    filename: "[name][chunkhash:8].js",
        path: path.resolve(__dirname, "/dist")
}

css文件指纹

设置MiniCssExtractPlugin的filename，使用[contenthash]

plugin:[
    new MiniCssExtranctPlugin({
        filename: `[name][contenthash:8].css`
    })
]

图片文件指纹

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

占位符名称	含义
[ext]	资源后缀名
name	文件名称
[path]	文件的相对路径
[folder]	文件所在的文件夹
[contenthash]	文件的内容hash，默认是md5生成
[hash]	文件内容的Hash，默认是md5生成
[emoji]	一个随机的指代文件内容的emoji

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

代码压缩

js压缩

webpack4后已经内置了uglifyjs-webpack-plugin插件进行代码压缩，我们也可以安装这个插件，并在压缩的时候添加一些参数

css压缩（这个有点问题）

使用optimize-css-assets-webpack-plugin

同时使用cssnano

plugins:[
    new OptimizeCSSAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano')
    })
]

html文件的压缩（并没有压缩）

修改html-webpack-plugin，设置压缩参数，一个html文件需要加上一段下面的代码

plugins:[
    new HtmlWebpackPlugin({
        template: path.join(__dirname, "src/search.html"),
        filename: "search.html",
        chunks: ["search"],
        inject: true,  // 注入js
        minify: {
            html5: true,
            conllapseWhitespace: true,
            preserveLineBreaks: false,
            minifyCSS: true,
            minifyJS: true,
            removeComments: false
        }
    })
]

webpack打包文件清理

使用clean-webpack-plugin插件进行清理打包出来的文件

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

new CleanWebpackPlugin()