引言
因为webpack默认只能解析js资源,当我们要处理css等资源时,无法进行处理,所以我们就要通过loader
loader来载入加载器来对相应的资源做特定的解析。
报错案例
例如:我们直接在js中引入css文件再次编译时,会报错。
index.css
.box1{
width: 100px;
height: 100px;
background-color: pink;
}
我们在main.js中引入它
import count from './js/count'
import sum from './js/sum'
// 想要webpack打包资源,必须引入资源
import './css/index.css'
console.log(count(2, 1))
console.log(sum(2, 1,3))
在输入npx webpack
命令时会报错:
ERROR in ./src/css/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .box1{
| width: 100px;
| height: 100px;
@ ./src/main.js 4:0-24
webpack 5.88.2 compiled with 1 error in 101 ms
解决方法
我们在webpack.conf.js文件中在module.rules
中添加loader:
// 加载器
module: {
rules: [
// loader的设置
{
test: /\.css$/, // 只想检测.css文件
use: [ // 执行顺序:先下后上
'style-loader', // 将js中的css通过创建style标签添加到html文件中生效
'css-loader' // 将css资源编译成commonjs的模块到js中
]
}
],
},
但是现在执行打包依然会报错,但是报错内容不一样:
Module not found: Error: Can't resolve 'style-loader' in 'E:\workSpace\JavaScript\webpack_study'
resolve 'style-loader' in 'E:\workSpace\JavaScript\webpack_study'
Parsed request is a module
using description file: E:\workSpace\JavaScript\webpack_study\package.json (relative path: .)
resolve as module
looking for modules in E:\workSpace\JavaScript\webpack_study\node_modules
single file module
using description file: E:\workSpace\JavaScript\webpack_study\package.json (relative path: ./node_modules/style-loader)
no extension
...............
此时,我们只需要安装对应的loader在执行打包即可:
PS E:\workSpace\JavaScript\webpack_study> npm i style-loader
added 1 package in 2m
PS E:\workSpace\JavaScript\webpack_study> npm i css-loader
added 16 packages in 2m
其余资源的loader使用也是类似,举一反三地工作这里就不重复了。
标签:--,study,js,webpack,workSpace,loader,css From: https://www.cnblogs.com/fanick/p/17691203.html