先上代码：
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版本
参考：
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 ]};复制代码