欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-14 13:48:50
...

本文主要讲解使用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,下图是整个项目结构
    webpack(7)_CSS_使用extract-text-webpack-plugin提取css
  • 安装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 aaa@qq.com --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
    webpack(7)_CSS_使用extract-text-webpack-plugin提取css
    打开提取出来的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/

相关标签: 学习笔记