Webpack配置各类文件Loader打包实战指南

Webpack Loader配置概述

前言

在Webpack项目中，若直接在main.js里通过代码引入style.css，控制台会报错提示：You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.，表明当前未配置处理该文件类型的加载器。

import './css/style.css';

这是因为Webpack默认仅支持打包.js格式的文件，无法直接处理其他类型资源。若要打包非.js文件，必须手动安装并配置对应的第三方loader加载器。

以下是针对不同类型文件进行打包的具体配置实例：

CSS文件打包配置

处理CSS文件

方式一

首先，在项目根目录下通过npm命令本地安装style-loader和css-loader两个依赖包。

npm install style-loader css-loader --save--dev 

接着，在引入style.css文件时，将原有的import './css/style.css';修改为以下代码：

import 'style-loader!css-loader!./style.css'")'; //先经过css-loader和style-loader处理

最后，重新执行webpack打包命令。

npm run dev 

这种方式的缺点在于，如果需要引入多个CSS文件，每次引入时都必须手动添加style-loader!css-loader!前缀，操作繁琐。因此，推荐使用以下更规范的配置方式：

方式二

同样，先在项目中通过npm命令本地安装style-loader和css-loader两个包。

npm install style-loader css-loader --save--dev 

然后，打开webpack.config.js配置文件，新增一个module配置节点。在module对象中，有一个rules属性，它是一个数组，用于存放所有第三方文件的匹配和处理规则。如下代码展示了如何配置以处理CSS文件：

module: { // 配置所有第三方loader 模块
 rules: [ // 第三方模块的匹配规则
  { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
 ]
 }

注意：此处'style-loader'和'css-loader'的顺序不可互换。因为use数组中的处理顺序是从后往前执行的：先由css-loader对CSS文件进行解析处理，将结果传递给style-loader，再由style-loader将其转换为Webpack可打包的数据格式。

完成配置后，正常引入style.css文件即可。

import './css/style.css';

重新运行webpack进行打包。

npm run dev 

后续所有其他类型文件的打包配置，均参照方式二的模式进行。

Less与SCSS文件处理

处理Less文件

在项目中使用npm命令本地安装style-loader、css-loader、less-loader以及less四个包（若项目中已存在style-loader和css-loader，则无需重复安装这两个）。

npm install style-loader css-loader less-loader less --save--dev 

打开webpack.config.js文件，在module节点的rules属性数组中，新增如下针对Less文件的规则配置：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } // 处理 less 文件的 loader

在代码中引入style.less文件。

import './css/style.less';

重新执行webpack打包命令。

npm run dev 

处理SCSS文件

在项目中使用npm命令本地安装style-loader、css-loader、sass-loader以及node-sass这四个包（若已有style-loader和css-loader则不必再安装这两个）。

npm install style-loader css-loader sass-loader node-sass --save--dev 

打开webpack.config.js文件，在module节点的rules属性数组中，新增如下针对SCSS文件的规则：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } // 处理 less 文件的 loader

在代码中引入style.scss文件。

import './css/style.lcss';

重新执行webpack打包命令。

npm run dev 

图片与字体资源处理

处理URL地址资源

例如，在CSS样式中使用background-image:url('...')引用图片时，Webpack默认无法直接处理该URL路径，因此也需要手动安装第三方loader进行转换。

在项目中使用npm命令本地安装url-loader和file-loader两个包。

npm install url-loader file-loader --save--dev 

打开webpack.config.js文件，在module节点的rules属性数组中，新增如下规则配置：

{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, // 处理 图片路径的 loader
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 

重新执行webpack打包命令。

npm run dev 

ES6高级语法转译

处理ES6高级语法

Webpack默认只能处理部分ES6语法，对于一些更高级的ES6特性，直接打包会报错。例如以下代码使用Webpack打包时会出错：

class Person {
	static info = {name:'zlx',age:18}
};
console.log(Person.info);

为解决此问题，Webpack需要借助第三方loader，这里使用Babel工具，将高级ES6语法转换为低版本兼容语法，然后再进行打包处理。

使用npm命令安装以下相关包：

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

打开webpack.config.js文件，在module节点的rules属性数组中，新增如下规则配置：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // exclude是防止node_modules中的js文件被打包

在项目的根目录中，新建一个名为.babelrc的Babel配置文件，该文件属于JSON格式。在其中写入如下代码：

{
 "presets": ["env", "stage-0"],
 "plugins": ["transform-runtime"]
}

重新执行webpack打包命令。

总结

以上就是本文的全部内容，希望这些配置示例对大家在Webpack学习或实际工作中有所帮助，感谢支持。