526互联

webpack--loader

发布时间 2023-09-10 15:06:44作者: 隔岸苦晴

引言

因为webpack默认只能解析js资源，当我们要处理css等资源时，无法进行处理，所以我们就要通过loaderloader来载入加载器来对相应的资源做特定的解析。

报错案例

例如：我们直接在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使用也是类似，举一反三地工作这里就不重复了。