先上代码：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {entry: {//  index: './src/index.js',//  utils: './src/utils.js'index: path.resolve(__dirname, 'src/index.js'),utils: path.resolve(__dirname, 'src/utils.js')},output: {//path: __dirname + '/dist',//filename: '[name]-[chunkhash].js'path: path.resolve(__dirname, 'dist'),filename: '[name]_bundle.js'  //配合下面配置中的hash选项使用，可不加[chunkhash]},module: {rules: [{test: /\.css$/,//use: ['style-loader', 'css-loader']use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'// fallback: {// 这里表示不提取的时候，使用什么样的配置来处理css//   loader: 'style-loader',//   options: {//     singleton: true // 表示将页面上的所有css都放到一个style标签内//   }// },// use: [//   {//     loader: 'css-loader',//     // options: {//     //   minimize: true //css-loader 1.0之后不支持该配置//     // }//   }// ]})}]},plugins: [new HtmlWebpackPlugin({title: 'My Test',filename: 'test.html',hash: true,chunks: ['utils']}),new HtmlWebpackPlugin({title: 'My App',filename: 'index.html',hash: true,chunks: ['index']}),//new ExtractTextPlugin('style.css')new ExtractTextPlugin({filename: '[name].min.css'})]
}
复制代码

如果直接安装的话，会安装"extract-text-webpack-plugin": "^3.0.2"，执行webpack打包命令时会报错

原因是因为这个版本中还不能支持webpack4.0.0以上的版本，所以就需要安装webpack4.0以下的版本或者是安装extract-text-webpack-plugin4.0以上的版本。

解决方法：npm install extract-text-webpack-plugin@next --save-dev，会下载到4.0版本

参考： blog.csdn.net/gezilan/art…

allChunks属性

当为false的时候，只会提取初始化的时候引入的css,当allChunks属性为true时，会把异步引入的css也提取出来。

new ExtractTextWebpackPlugin({ // 在plugins中配置属性allChunks: false // true表示会把所有的css都提取出来，false只会把初始化的提取，默认是false
})
复制代码

• 在src/css目录下新建一个components目录，并在components目录新建一个a.css，并添加代码

div{font-size: 20px;color: #000;
}
复制代码

• 在src目录下新建components目录，并在components目录新建一个a.js，并引入a.css

import '../css/components/a.css';
复制代码

• 在index.js中异步引入a.js

import(/* webpackChunkName: 'a' */ './components/a').then(function (a) {console.log(a);
})
复制代码

• 执行打包webpack，会发现index.min.css中没有a.css中的样式，而在a.bundle.js中有引入的a.css的样式

(n.exports = i(4)(!1)).push([n.i, "div{\r\n    font-size: 20px;\r\n    color: #000;\r\n}", ""])
复制代码

• 若将allChunks设置为true，会发现index.min.css中有a.css样式。

如果有多于一个extract-text-webpack-plugin示例的情形，请使用此方法每个实例上的 extract 方法。

const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 创建多个实例
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
module.exports = {module: {rules: [{test: /\.css$/,use: extractCSS.extract(['css-loader', 'postcss-loader'])},{test: /\.less$/i,use: extractLESS.extract(['css-loader', 'less-loader'])},]},plugins: [extractCSS,extractLESS]
};
复制代码