概念

webpack 的配置文件,也就是名为webpack.config.js的文件中,有一个module的属性配置,可以在此属性内,配置相关的规则

可以使用module.rules来进行规则匹配,键值为一个数组,分别传入不同的匹配规则rule

创建模块时,匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader,或者修改解析器(parser)。

每个rule可以分为三部分 - 条件(condition)结果(result)和嵌套规则(nested rule)

例如:我们想给js文件,使用babel-loader来把es6代码转为es5代码

既然使babel-loader,那么我们首先需要安装babel-loader,根据babel-loadernpm社区所写

1
npm install -D babel-loader @babel/core @babel/preset-env webpack

建议使用yarn来安装

1
yarn add -D babel-loader @babel/core @babel/preset-env webpack

然后将webpack.config.js中加入规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    //webpack.config.js
const path = require('path');//引入nodejs的path模块
module.exports = {
entry: './src/index.js',//设置默认
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module:{
+ rules:[{
+ //里面为匹配的规则
+ test: /\.m?js$/,
+ exclude: /(node_modules|bower_components)/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-env']
+ }
+ }
+ }]
+ }
};

然后再执行打包指令

1
npm run build #或者 yarn build

然后打包后的代码,就没有了letmodule.exports了,就可以在不支持es6的浏览器中使用了,如果要是用其他的loader,也可以使用哦

webpack的loader列表