又又又开始继续学习webpack啦！🏷


本文记录有关webpack压缩🗜️相关的东西。


所见即所得，所见即所碍。

start


JavaScript 压缩


内置了uglifyjs-webpack-plugin,所以默认打包出来的js文件已经被压缩。但是我们也可以自行安装该插件去开启并行压缩等。


css文件压缩


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

module.exports = {
    entry:{
        app:'./src/app.js',
        search:'./src/search.js'
    },
    output:{
        filename:'[name][chunkhash:8].js',
        path:__dirname+'/dist'
    }，
    plugin:[
        new OptimizeCSSAssentsPlugin({
            assetNameRegExp:/\.css$/g,
            cssProcessor:require('cssnano')
        })
    ]
}

匹配到所有的css文件，再通过cssnano对css进行压缩。


html文件压缩


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


module.exports = {
    entry:{
        app:'./src/app.js',
        search:'./src/search.js'
    },
    output:{
        filename:'[name][chunkhash:8].js',
        path:__dirname+'/dist'
    },
    plugins:[
        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
            }
        })
    ]
}