https://v4.webpack.docschina.org/plugins/extract-text-webpack-plugin/

npm install --save-dev extract-text-webpack-plugin
# 对于 webpack 2
npm install --save-dev [email protected]
# 对于 webpack 1
npm install --save-dev [email protected]

extract-text-webpack-plugin-updated

# for webpack 3
npm install --save-dev extract-text-webpack-plugin-updated
# for webpack 2
npm install --save-dev [email protected]
# for webpack 1
npm install --save-dev [email protected]

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

它会将所有的入口 chunk(entry chunks)中引用的 .css，移动到独立分离的 CSS 文件。

因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。

如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。