webpack4.0版本之css单独打包

这个适应新版本webpack4.0以上，太难了

参考官方文档，不仅让我大声呼喊，官方牛逼

MiniCssExtractPlugin

      

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

本插件基于 webpack v4 的新特性（模块类型）构建，并且需要 webpack 4 才能正常工作。

与 extract-text-webpack-plugin 相比：

• 异步加载
• 没有重复的编译（性能）
• 更容易使用
• 特别针对 CSS 开发

快速开始 

首先，你需要安装 mini-css-extract-plugin：

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

建议 mini-css-extract-plugin 与 css-loader 一起使用。

之后将 loader 与 plugin 添加到你的 webpack 配置文件中。 例如：

style.css

body {
  background: green;
}

component.js

import './style.css';

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'],
      },
    ],
  },
};