webpack优化篇（打包css与页面分离）

1.webpack打包前没有抽离css部分的话，css会直接合并到页面上导致页面文件加载多一些依赖的插件也会打入（下图：）

如何解决这种问题呢
1.安装mini-css-extract-plugin webacpk4.*建议用

cnpm i mini-css-extract-plugin -D

使用：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '/style/[name].css',
      chunkFilename: '/style/[id].css',
    }),
  ],
  //设置optimization.splitChunks.cacheGroups，可以将css代码块提取到单独的文件中。
  optimization: {
        runtimeChunk: true,
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                styles: {
                  name: 'styles',
                  test: /\.css$/,
                  chunks: 'all',
                  enforce: true,
                },
            },
        }
    },
  module: {
    rules: [
      {   test: /\.css$/, use:[MiniCssExtractPlugin.loader,'css-loader']},
      {   test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']},
    ]
  }
}

上面只是少部分代码提供藏考
更进一步可以把css进行压缩,如果分离之后出现图片找不到可以看一下

  {   test: /\.(png|jpg)$/, loader: 'url-loader',
      options: {
          limit: '8192',     //表示目标文件的体积大于多少字节就换用file-loader来处理了
          publicPath:"../images/",  //修改你打包存放的地址
          outputPath: './images/'
      }
  }

处理后（直接上图了）