webpack打包优化

1、优化图片

在url-loader的options参数中设置limit属性，将小图片编译成base64格式，减少http请求。

module: {
      rules: [{
         test: /\.(png|svg|jpg|gif)$/,
         use: [{
           loader: 'url-loader', // 优化小图片过多造成请求数太多
           options: {
             limit: 5120, // 如果图片小于5kb就直接转成base64内置到模板，否则才拷贝图片
             outputPath: 'img/'
           } 
         }]
      },

2、Code Splitting

Webpack 大法之 Code Splitting

3、分离CSS文件并压缩

const ExtractTextPlugin = require("extract-text-webpack-plugin");  //记得先install该模块
module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ['sass-loader','postcss-loader']
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'css/[name].[contenthash].css',
            allChunks: true
        })
    ]

4、压缩HTML、JS

const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin = require('html-webpack-plugin');
plugins:[
    new uglify(),
    new htmlPlugin({
        minify:{
            removeAttributeQuotes:true
        },
        hash:true,
        template:'./src/index.html'
     })
]