Webpack 代码压缩 js、CSS、HTML压缩

webpack代码压缩

• js压缩
• css压缩
• html压缩

js压缩

webpack4内置了uglifyjs-webpack-plugin,在生产模式默认开启这个插件

所以我们默认打包的js文件以及是压缩过的

当然我们也可以手动安装一下这个插件并且手动设置一个参数

去做一些并行压缩之类的事情

css文件压缩

使用optimize-css-assets-webpack-plugin

同时使用css预处理器-- cssnano

npm i optimize-css-assets-webpack-plugin@5.0.1 -D
npm i cssnano@4.1.10 -D

const OptimizeCssAssetsPlugin = require(\'optimize-css-assets-webpack-plugin\')
module.exports={
    plugins:[
        new OptimizeCssAssetsPlugin({
            assetNameRegExp:/\.css$/g,
            cssProcessor:require(\'cssnano\')
        })
    ]
}

html文件的压缩

html-webpack-plugin,使用webpakc一定会接触的一个很强大的插件

压缩html时只需要设置相应参数就可以了

通常来说一个html页面对应一个html-webpack-plugin,两个的话需要两个当然后面有更好的方法

后面会将多页面打包具体要怎么做

npm i html-webpack-plugin@3.2.0 -D

module.exports = {
    entry:{
        app:\'./src/app.js\',
        search:\'./src/search.js\',
    },
    output:{
        path:path.join(__dirname,\'dist\'),
        filename:\'[name]-[chunkhash:8].js\'
    },
    plugins:[
        new HtmlWebpackPlugin({
            // html模板所在路径
            template:path.join(__dirname,\'src/search.html\'),
            // 指定打包出来的输出的文件名称
            filename:\'search.html\',
            // 生成这个html使用哪些chunk
            chunks:[\'search\'],
            // 为true的话，js、css会自动注入到这个html里面来
            inject:true,
            // minify 处理换行，空格，注释
            minify:{
                html5:true,
                collapseWhiteSpace:true,
                preserveLineBreaks:false,
                minifyCss:true,
                minifyJS:true,
                removeCommnts:false
            }
        })
    ]
}