1. 在使用webpack打包时，将css代码从bundle.js中抽离出来，单独出一个模块，需要用到extract-text-webpack-plugin插件
    3. webpack版本不同，相对于的插件也不同，如下：
    5. 复制代码
    6. # for webpack 4
    7. npm install --save-dev mini-css-extract-plugin 
    8. # for webpack 3
    9. npm install --save-dev extract-text-webpack-plugin
    10. # for webpack 2
    11. npm install --save-dev extract-text-webpack-plugin@2.1.2
    12. # for webpack 1
    13. npm install --save-dev extract-text-webpack-plugin@1.0.1
    14. 复制代码
    15. 之前版本使用方法，可参照：https://github.com/webpack-contrib/extract-text-webpack-plugin
    17. 在webpack4中，用mini-css-extract-plugin替代。
    19. webpack.config.js:
    21. 复制代码
    22. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    24. module.exports = {
    25.   plugins: [new MiniCssExtractPlugin(
    26.     filename:'./css/[name].css'
    27.   )],
    28.   module: {
    29.     rules: [
    30.       {
    31.         test: /\.css$/i,
    32.         use: [
    33.           {
    34.             loader: MiniCssExtractPlugin.loader,
    35.             options: {
    36.               publicPath: '../',
    37. 　　　　　　　　 hmr: process.env.NODE_ENV === 'development',　　
    38.             },
    39.           },
    40.           'css-loader',
    41.         ],
    42.       },
    43.     ],
    44.   },
    45. };
    46. 复制代码
    47. 更多mini-css-extract-plugin的使用方法请查看：https://www.npmjs.com/package/mini-css-extract-plugin