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
            }
        })
    ]
}