extract-text-webpack-plugin

先上代码：

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