webpack(7)_CSS_使用extract-text-webpack-plugin提取css

版权声明：本博客主要记录学习笔记和遇到的一些问题解决方案，转载请注明出处！ https://blog.csdn.net/u010982507/article/details/81337529

本文主要讲解使用extract-text-webpack-plugin提取css，主要从以下几个方面：

• 项目准备
• extract-text-webpack-plugin的安装
• 在webpack.config.js中配置
• extract-text-webpack-plugin插件的属性配置
• extract-text-webpack-plugin多实例应用

项目准备

• 新建目录test
  mkdir test
• 初始化package.json
  npm init，关于项目的一些描述，一路回车键。
• 新建dist目录和src目录，并在src目录下新建index.js，在src/css目录下新建base.css
• 在项目根目录下新建webpack.config.js，下图是整个项目结构
  
• 安装style-loader和css-loader
  如果有不懂style-loader和css-loader的，请查看文章：https://blog.csdn.net/u010982507/article/details/81277151

extract-text-webpack-plugin的安装

• 作用
  extract-text-webpack-plugin插件主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
  官网介绍：https://webpack.docschina.org/plugins/extract-text-webpack-plugin/
• 安装webpack
  npm install webpack --save-dev
  注：直接安装的话，会安装当前最新的版本。我当前安装的是"webpack": "^4.16.4"。
• 安装extract-text-webpack-plugin
  npm install extract-text-webpack-plugin --save-dev
  注：如果直接安装的话，会安装"extract-text-webpack-plugin": "^3.0.2"，执行webpack打包命令时会报错

node:8596) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
D:\webwork\webpack\007_wp_css_postcss\node_modules\webpack\lib\Chunk.js:824
                throw new Error(
                ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (D:\webwork\webpack\007_wp_css_postcss\node_modules\webpack\lib\Chunk.js:824:9)
    at D:\webwork\webpack\007_wp_css_postcss\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
    at Array.forEach (<anonymous>)
    at D:\webwork\webpack\007_wp_css_postcss\node_modules\extract-text-webpack-plugin\dist\index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\webwork\webpack\007_wp_css_postcss\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\webwork\webpack\007_wp_css_postcss\node_modules\tapable\lib\Hook.js:35:21)
    at Compilation.seal (D:\webwork\webpack\007_wp_css_postcss\node_modules\webpack\lib\Compilation.js:1203:27)
    at hooks.make.callAsync.err (D:\webwork\webpack\007_wp_css_postcss\node_modules\webpack\lib\Compiler.js:547:17)
    at _err0 (eval at create (D:\webwork\webpack\007_wp_css_postcss\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (D:\webwork\webpack\007_wp_css_postcss\node_modules\webpack\lib\Compilation.js:1054:12)
    at processModuleDependencies.err (D:\webwork\webpack\007_wp_css_postcss\node_modules\webpack\lib\Compilation.js:980:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

原因是因为这个版本中还不能支持webpack4.0.0以上的版本，所以就需要安装webpack4.0以下的版本或者是安装extract-text-webpack-plugin4.0以上的版本。
解决方法：npm install extract-text-webpack-plugin@next --save-dev，会下载到4.0版本

"extract-text-webpack-plugin": "^4.0.0-beta.0",
"webpack": "^4.16.4"

参考：https://blog.csdn.net/gezilan/article/details/80020417

在webpack.config.js中配置

1、引入extract-text-webpack-plugin

var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

2、在plugins中配置

   plugins: [
        new ExtractTextWebpackPlugin({ // 在plugins中配置属性
            filename: '[name].min.css' // 配置提取出来的css名称
        })
    ]

3、在module中配置

rules: [
         {
             test: /\.css$/,
             use: ExtractTextWebpackPlugin.extract({ // 使用ExtractTextWebpackPlugin的extract方法
                 fallback: {// 这里表示不提取的时候，使用什么样的配置来处理css
                     loader: 'style-loader',
                     options: {
                         singleton: true // 表示将页面上的所有css都放到一个style标签内
                     }
                 },
                 use: [ // 提取的时候，继续用下面的方式处理
                     {
                         loader: 'css-loader',
                         options: {
                             minimize: true  // 开启压缩
                         }
                     }  
                 ]
             })
         }
     ]

4、整个webpack.config.js的配置

var path = require("path");
// 1、引入ExtractTextWebpackPlugin
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: {
        index: "./src/index.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        publicPath: "dist/",
        filename: '[name].bundle.js',
        chunkFilename: "[name].bundle.js"// 指定打包文件的块名称
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({ // 2、使用ExtractTextWebpackPlugin
                    fallback: {// 不提取的时候，使用什么样的配置来处理css
                        loader: 'style-loader',
                        options: {
                            singleton: true
                        }
                    },
                    use: [ // 提取的时候，继续用下面的方式处理
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true
                            }
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        new ExtractTextWebpackPlugin({ //3、 在plugins中配置属性
            filename: '[name].min.css' // 配置提取出来的css名称
        })
    ]
}

5、打包测试

• 在base.css中添加代码

html {
    background: red;
}

• 在index.js中引入base.css

import './css/base.css' // 或import BaseCss './css/base.css'

• 执行打包命令webpack，会在dist目录下生成index.min.css和index.bundle.js
  
  打开提取出来的index.min.css，会看到index.js中引入的base.css的css样式被提取出来了。

extract-text-webpack-plugin插件的属性配置

1、filename属性
filename属性是用来配置提取出来的css名称。如下面配置会提取成[name].min.css。

 new ExtractTextWebpackPlugin({ // 在plugins中配置属性
            filename: '[name].min.css'// 配置提取出来的css名称
        })

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

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

下面我们来测试一下allChunks属性

• 在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.config.js中配置allChunks为false

 allChunks: false

• 执行打包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样式。

• ExtractTextWebpackPlugin.extract()方法

ExtractTextWebpackPlugin.extract({
    fallback:{},
    use:[]
})

fallback：指编译后用什么loader来提取css文件。例如使用style-loader

{
    loader: 'style-loader',
    options: {
       singleton: true
    }
}

use：指需要什么样的loader去编译文件。
如.css文件使用css-loader

{
    loader: 'css-loader',
    options: {
        minimize: true
    }
}

.less文件使用less-loader

{
    loader: 'less-loader',
    options: {
        minimize: true
    }
}

extract-text-webpack-plugin多实例应用

如果有多于一个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
    ]
};

extract-text-webpack-plugin还有几个属性没做介绍，有兴趣的可以参考官方文档。
https://webpack.docschina.org/plugins/extract-text-webpack-plugin/