Webpack系列（七）：css文件的代码分割

怎么对css文件进行代码分割？

如果我们想让引入的css文件，在打包时，单独生成一个css文件到dist目录的话，可以这样做

• 先下载一个插件

  npm install --save-dev mini-css-extract-plugin
  

• 在webpack.config.js中进行配置

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = {
       
    plugins: [new MiniCssExtractPlugin()],
    module: {
       
      rules: [
        {
       
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
      ],
    },
  };
  

• 这时候你会发现，引入的css文件