hooyantsing's Blog

P12 提取css成单独文件

字数统计: 898阅读时长: 5 min
2020/11/29

尚硅谷2020最新版Webpack5实战教程

编写webpack配置文件

之前的css样式直接写到html中。现在要将css单独以文件的形式输出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { resolve } = require('path');

module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname,'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
// 创建 style 标签,将样式放入
// 'style-loader',
// 取代 style-loader , 提取js中的css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件整合到js文件中
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
// 对输出的css文件重命名
// filename: 'static/css/[name].[chunkhash:8].css'
filename: 'css/built.css'
})
],
mode: 'development',

devServer: {
contentBase: resolve(__dirname,'build'),
compress: true,
port: 3000
}
}

控制台下载插件:

1
npm i mini-css-extract-plugin -D
踩坑

webpack5 与 mini-css-extract-plugin 插件不兼容,目前还未找到解决办法。

报错信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
PS E:\Project_atguigu_webpack\09.提取css成单独文件> webpack
(node:17692) [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] DeprecationWarning: SingleEntryPlugin was renamed to EntryPlugin
(Use `node --trace-deprecation ...` to show where the warning was created)
[webpack-cli] Compilation finished
asset js/built.js 8.52 KiB [compared for emit] (name: main)
asset index.html 304 bytes [compared for emit]
runtime modules 931 bytes 4 modules
cacheable modules 126 bytes
./src/js/index.js 48 bytes [built] [code generated]
./src/css/a.css 39 bytes [built] [code generated] [1 error]
./src/css/b.css 39 bytes [built] [code generated] [1 error]

ERROR in ./src/css/a.css
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: The 'compilation' argument must be an instance of Compilation
at getCompilationHooks (E:\Project_atguigu_webpack\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119:10)
at E:\Project_atguigu_webpack\node_modules\webpack\lib\javascript\CommonJsChunkFormatPlugin.js:30:19
at Hook.eval [as call] (eval at create (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:942:30)
at C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:984:29
at Hook.eval [as callAsync] (eval at create (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
at Compiler.compile (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:979:28)
at Compiler.runAsChild (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:494:8)
@ ./src/js/index.js 1:0-22

ERROR in ./src/css/b.css
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: The 'compilation' argument must be an instance of Compilation
at getCompilationHooks (E:\Project_atguigu_webpack\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:119:10)
at E:\Project_atguigu_webpack\node_modules\webpack\lib\javascript\CommonJsChunkFormatPlugin.js:30:19
at Hook.eval [as call] (eval at create (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:942:30)
at C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:984:29
at Hook.eval [as callAsync] (eval at create (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
at Compiler.compile (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:979:28)
at Compiler.runAsChild (C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:494:8)
@ ./src/js/index.js 2:0-22

webpack 5.8.0 compiled with 2 errors in 309 ms

临时解决方案(可能存在问题,不推荐):

为了后续的学习,webpack降级至4,webpack-cli降级至3

1
npm i webpack@4 webpack-cli@3 -g

控制台的webpack和webpack-cli是全局安装的,安装路径为:C:\Users\Hooyantsing\AppData\Roaming\npm\node_modules

完成降级后,html-webpack-plugin 插件也需要降级。(之前为了兼容webpack5,使用的是测试版本,版本相对高,详见 P06 打包html资源

1
npm install html-webpack-plugin -D
CATALOG
  1. 1. 编写webpack配置文件
    1. 1.1. 踩坑