webpack学习笔记5-loader
概念
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-loader
的npm社区所写
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 | //webpack.config.js |
然后再执行打包指令
1 | npm run build #或者 yarn build |
然后打包后的代码,就没有了let
与module.exports
了,就可以在不支持es6
的浏览器中使用了,如果要是用其他的loader
,也可以使用哦
原文作者: IT梅
原文链接: http://www.meixiaohan.com/2019/08/08/webpack_learn_5/
版权声明: 转载请注明出处(必须保留原文作者署名原文链接)