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

方式一

1. 在项目中用npm命令本地安装style-loader和css-loader两个包

npm install style-loader css-loader --save--dev 
复制代码

2. 在引用style.css文件时，将import './css/style.css';代码改成如下代码：

import 'style-loader!css-loader!./style.css'")'; //先通过css-loader和style-loader处理 复制代码

3. 从新用webpack打包

npm run dev 
复制代码

这种方式的缺点是，当须要引入多个css文件，每次引入时都须要加style-loader!css-loader!，比较麻烦，所以推荐使用如下方式：

方式二

1. 在项目中用npm命令本地安装style-loader和css-loader两个包

npm install style-loader css-loader --save--dev 
复制代码

2. 打开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能够进行打包的数据。

3. 引入style.css文件

import './css/style.css';
复制代码

4. 从新用webpack打包

npm run dev 
复制代码

如下全部其余类型文件的打包同方式二

处理less文件

1. 在项目中用npm命令本地安装style-loader和css-loader和less-loader和less三个包(若已有style-loader和css-loader则没必要再安装这两个)

npm install style-loader css-loader less-loader less --save--dev 
复制代码

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

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

3. 引入style.less文件

import './css/style.less';
复制代码

4. 从新用webpack打包

npm run dev 
复制代码

处理scss文件

1. 在项目中用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 
复制代码

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

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

3. 引入style.scss文件

import './css/style.lcss';
复制代码

4. 从新用webpack打包

npm run dev 
复制代码

处理url地址

例如，在css样式中使用background-image:url('...')，webpack默认没法处理url，所以也须要手动安装第三方loader

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

npm install url-loader file-loader --save--dev 
复制代码

2. 打开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 
复制代码

3. 从新用webpack打包

npm run dev 
复制代码

处理ES6高级语法

webpack默认只能处理一部分的ES6语法，对于一些更高级的ES6语法，webpack没法处理，以下代码用webpack打包会报错。

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

webpack须要借助于第三方的 loader，这里使用Babel，将高级的ES6语法转为低级的语法以后，再将结果进行打包。

1. 用npm命令安装以下包：

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D
复制代码

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

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

3. 在项目的 根目录中，新建一个 叫作 .babelrc 的Babel 配置文件，这个配置文件，属于JSON格式。里面写入以下代码：

{
   "presets": ["env", "stage-0"],
   "plugins": ["transform-runtime"]
}
复制代码

4. 从新用webpack打包