hooyantsing's Blog

P05 打包样式资源

字数统计: 500阅读时长: 2 min
2020/11/28

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

引言

原生的webpack不能处理css/less/scss文件,因此需要以下方法。

编写webpack配置文件

webpack配置文件名:webpack.config.js

默认采用 commonjs 模块。

module.exports对象包含一下五个属性:

  • entry 执行入口
  • output 文件输出
  • module 模块
  • plugins 插件
  • mode 模式
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
44
45
46
47
48
49
50
51
52
53
54
55
/*
webpack.config.js webpack的配置文件
作用:指示webpack干哪些活(当你运行webpack指令时,会加载里面的配置)

所有构建工具都是基于 nodejs 平台运行的 模块默认采用 commonjs
*/

const {resolve} = require('path');

module.exports = {
// webpack 配置
// 入口起点
entry:'./src/index.js',
// 输出
output:{
// 输入文件名
filename:'built.js',
// 输出路径
// __dirname (两个_) nodejs 的变量,代表当前文件的目录绝对路径
path:resolve(__dirname,'build')
},
module:{
rules:[
// 详细 loader 配置
{
// 正则,匹配哪些文件
test: /\.css$/,
// 使用哪些 loader 处理
use:[
// use数组中的loader执行顺序:从右至左,从下到上
// 创建 style 标签,将js中的样式资源插入进行,添加到 head 中生效
'style-loader',
// 将 css 文件变成 commonjs 模块加载到js中,里面内容是样式字符串
'css-loader'
]
},
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
// 将 less 文件编译成 css 文件
// 注意:下载依赖 less 和 less-loader
'less-loader'
]
}
]
},
// 插件配置
plugins:[
// 详细插件配置
],
// 模式 'production' 生产环境
mode: 'development'
}
CSS

想要打包css文件,需要使用css-loaderstyle-loader 两个loader。

控制台下载loader依赖:

1
2
npm i css-loader -D
npm i style-loader -D
LESS

想要打包less文件,需要使用css-loader style-loaderless-loader 三个loader。

控制台下载loader依赖:

其中 less-loader 包含 less 和 less-loader 两个依赖。

1
2
3
4
npm i less -D
npm i less-loader -D
npm i css-loader -D
npm i style-loader -D

打包

控制台输入:

1
webpack

完成打包。

最后,html直接引用生成的js文件即可。

CATALOG
  1. 1. 引言
  2. 2. 编写webpack配置文件
    1. 2.1. CSS
    2. 2.2. LESS
  3. 3. 打包