webpack(7)_CSS_使用extract-text-webpack-plugin提取css
本文主要讲解使用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 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
打开提取出来的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/
上一篇: Word 2007无法看见图片怎么办?