webpack4--MiniCssExtractPlugin(extract-text-webpack-plugin)

在使用webpack打包時，將css代碼從bundle.js中抽離出來，單獨出一個模塊，需要用到extract-text-webpack-plugin插件

webpack版本不同，相對於的插件也不同，如下：

# for webpack 4 npm install --save-dev mini-css-extract-plugin 
# for webpack 3
npm install --save-dev extract-text-webpack-plugin
# for webpack 2
npm install --save-dev extract-text-webpack-plugin@2.1.2
# for webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1

之前版本使用方法，可參照：https://github.com/webpack-contrib/extract-text-webpack-plugin

在webpack4中，用mini-css-extract-plugin替代。

webpack.config.js:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
module.exports = {
  plugins: [new MiniCssExtractPlugin(
    filename:'./css/[name].css'
  )],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
　　　　　　　　 hmr: process.env.NODE_ENV === 'development',　　
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

更多mini-css-extract-plugin的使用方法請查看：https://www.npmjs.com/package/mini-css-extract-plugin