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文件

方式一

在项目中用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作进一步处理，处理为webpack可以进行打包的数据。

引入style.css文件

import './css/style.css';

重新用webpack打包

npm run dev 

以下所有其他类型文件的打包同方式二

处理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