extract-text-webpack-plugin 切换到 mini-css-extract-plugin

之前大家都用过，css 想要打包成单独的文件，需要借助 webpack 的 extract-text-webpack-plugin 插件，但是今天用的时候，出现了报错信息：

后来发现，在 npm 官网上 extract-text-webpack-plugin 已经申明废弃了：

于是开始了替身 mini-css-extract-plugin 的使用之旅：

安装依赖

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

修改 webpack 的配置文件 webpack.config.js

修改之前的 webpack 配置 css loader 部分

{
    test: /\.css/,
    use: ExtractTextPlugin.extract({
        use: ['css-loader'],
    }),
 },

修改之后的 webpack 配置 css loader 部分

{
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          // you can specify a publicPath here
          // by default it uses publicPath in webpackOptions.output
          publicPath: '../',
          hmr: process.env.NODE_ENV === 'development',
        },
      },
      'css-loader',
    ],
},

修改之前的 plugin 配置：

new ExtractTextPlugin({
  filename: '[name].css',
}),

修改之后的 plugin 配置：

new MiniCssExtractPlugin({
  filename: '[name].css',
  chunkFilename: '[id].css',
}),

更多信息，可参考 github.com/webpack-con…