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