发布于2021-03-13 18:39 阅读(1328) 评论(0) 点赞(24) 收藏(2)
A:首先我们从字面意思来解读以下 Module
就是模块,从宏观角度说,在 Webpack
中一切都是模块,相信都听过这句话,所以那么就很容易理解了, Module
就是文件呀!
webpack.config.js
文件进行配置吗?A:当然不是,只是说上面的那个方式是我们最常用也是官方最推荐的方式,配置 loader
一共有三种方式
我们来看看三种方式的用法:
//webpack.config.js
module: {
rules: [
{
test: /\.css$/, //以 .js 结尾的文件。
use: [
"style-loader",
{loader:"css-loader",options:{modules:true}}
]
}
]
}
// 内联
import Styles from 'style-loader!css-loader?modules!./styles.css';
//CLI
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
上面三段代码的意义对于 ./styles.css
来说是一样的配置,都是先通过 css-loader
进行解析,然后通过 style-loader
进行解析 ,而上面的 options
表示该 loader
可配置的设置。可以看到上面虽然 webpack.config.js
的方式代码量最多,但是在项目级别里面他是代码量最少的,可追溯性最强的一种方式,所以下面我们全都使用该方式进行举例。
A:Module
中可以配置对指定的文件类型进行指定的 Loader
解析规则。
module: {
rules: [
{
test: /\.js$/, //以 .js 结尾的文件。
use: ["babel-loader"], //使用babel-loader 对以.js结尾的文件进行解析。
include: path.resolve(__dirname, 'src') //通过include 规定只匹配src目录下的js文件。
},
{
test: /\.css$/, //匹配以 .css结尾的文件
use: ['style-loader', 'css-loader'], //可以看到 use 后跟的是一个数组,所很明显我们可以使用一组 loader 来对某一种文件进行解析,但是这里需要注意的是,解析顺序是从右到左,也就是:css文件 -> css-loader->style-loader,完成解析。
exclude: path.resolve(__dirname, 'node_modules'), //通过exclude排除 node_modules 目录下的所有文件。
},
{
test: /\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/, // 匹配非文本文件
use: ['file-loader'], //使用 file-loader 来进行解析。
},
]
}
上面,是对于 rules
基本配置,这里需要说一句的是 include
和 exclude
对于打包效率有很大的提升,一定要注意,因为我注意到很多地方忽略了这两个配置的配置,这是最简单也是最好提升你生产效率的方式。
在 use
中我们除了使用一个字符串来设置 loader
此外还可以通过一个对象来表示对 loader
的配置,下面来看示例:
//方式1
module: {
rules: [
{
test: /\.css$/, //匹配以 .css结尾的文件
use: ['style-loader', 'css-loader?modules'],
},
]
}
// 方式2
module: {
rules: [
{
test: /\.css$/, //匹配以 .css结尾的文件
use: [
{loader:'style-loader'},
{loader:'css-loader?modules',opions:{modules:true}}
],
},
]
}
在上面两种配置方式里面,表示的配置是完全一样的,通常我们在对基本使用的时候会使用字符串的方式,但是在需要进行较多自定义配置的时候,我们会通过对象的方式对配置项进行设置。
好了,今天对于 webpack 中的 Module 配置的已经进行了简单的总结,希望对大家有帮助,持续关注,一起走进 webpack 的世界,我们一起真正掌握我们每天都在使用的工具。
原文链接:https://blog.csdn.net/weixin_45958151/article/details/114693152
作者:西门费雪
链接:http://www.qianduanheidong.com/blog/article/35689/b65ec5d7fde37c7fd551/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!