webpack 样式文件代码分离

1、安装相关依赖 mini-css-extract-plugin

cnpm i mini-css-extract-plugin -D

值得注意的是，该插件是不支持模块热更新的，所以只能部署在生产环境中(反正开发环境是无所谓的)

2、配置 webpack.config.js 文件

• a、引入 mini-css-extract-plugin 依赖

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

• b、配置 module，这里暂时只使用 css 和 scss 样式文件

module: {
  rules: [
    // 识别 css 文件
    {
      test: /\.css$/,
      use: [
        /**
         * MiniCssExtractPlugin.loader 将处理完的 css 代码
         * 放在 style 标签上挂载到 body 标签中
         */
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
        },
        /**
         * postcss-loader
         * 用于添加 css3 的浏览器前缀
         * 需要在根目录下创建一个 postcss.config.js 的配置文件来支持
         * postcss-loader 被使用的就会去执行 postcss.config.js 配置文件
         * package.json 文件需要添加 browserslist 配置项
         */
        {
          loader: 'postcss-loader'
        }
      ]
    },
    // 识别 scss 文件
    {
      test: /\.scss$/,
      use: [
        /**
         * MiniCssExtractPlugin.loader 将处理完的 css 代码
         * 放在 style 标签上挂载到 body 标签中
         */
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader',
        'sass-loader'
      ]
    }
  ]
}

• c、配置 plugins

plugins: [
  // 样式文件代码分离
  new MiniCssExtractPlugin({
    // 打包的文件被 index.html 直接引用走这里
    filename: '[name].css',
    // 打包的文件被 index.html 间接引用走这里
    chunkFilename: '[name].chunk.css'
  })
]

配置完以上步骤，即可做到生产环境的样式文件代码分离

3、压缩打包分离的 css 样式文件

• a、安装 optimize-css-assets-webpack-plugin 依赖

cnpm i optimize-css-assets-webpack-plugin -D

• b、在 webpack 中配置

const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// 主要是在 plugins 添加一个插件配置
plugins: [
  // 样式文件代码分离
  new MiniCssExtractPlugin({
    // 打包的文件被 index.html 直接引用走这里
    filename: '[name].css',
    // 打包的文件被 index.html 间接引用走这里
    chunkFilename: '[name].chunk.css'
  }),
  // 压缩打包分离出来的 css 样式文件
  new optimizeCssAssetsWebpackPlugin()
]