webpack(4)--module
Module
module的配置如何处理模块。
配置Loader
rules 配置模块的读取和解析规则, 通常用来配置loader, 其类型是一个数组, 数组里每一项都描述了如何去处理部分文件。
配置一项rules大致通过以下方式:
1. 条件匹配: 通过test、include、exclude三个配置来命中Loader要应用的规则文件。
2. 应用规则: 对选中后的文件通过use配置项来应用loader,可以应用一个loader或者按照从后往前的顺序应用一组loader。同时还可以分别给loader传入参数。
3. 重置顺序: 一组loader的执行顺序默认是从有道左执行,通过exforce选项可以让其中一个loader的执行顺序放到最前或者是最后。
例子:
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader?cacheDirectory'],
include: path.resolve(__dirname, 'src')
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
exclude: path.resolve(__dirname, 'node_modules')
}
]
}
在loader需要传入很多参数的时候,我们还可以通过一个object来描述,如:
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
},
// enforce:'post' 的含义是把该 Loader 的执行顺序放到最后
// enforce 的值还可以是 pre,代表把 Loader 的执行顺序放到最前面
enforce:'post'
}
]
上面例子中 test、include、exclude这三种命中文件的配置项只传入一个字符串或者是正则,其实他们还支持数组类型:
{
test: [/\.jsx?$/, /\.tsx?$/],
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'test')
],
exclude: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'bower_modules')
]
}
noParse
noParse可以让webpack忽略对部分没有采用模块化的文件的递归解析和处理,这样做的好处是能提高构建性能。原因是一些库例如jq这些,庞大又没有采用模块化标准,让webpack去解析是没有意义的。
noParse是可选配置下,类型是:RegExp, [RegExp], function其中一个。
noParse: /jquery|chartjs/
noParse: (content) => {
//content代表一个模块的文件路径
//返回true of false
return /jquery|chartjs/.test(content)
}
parser
因为webpack是以模块化的JavaScript文件为入口,所以内置了对模块化JavaScript的解析功能。支持AMD、Commonjs、SystemJs、ES6。parse属性可以更细粒度的配置哪些模块语法要解析,哪些不解析。和noParse的区别在于parser可以精确道语法层面上。noParse只能控制哪些文件不进行解析。
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader'],
parser: {
amd: false, // 禁用 AMD
commonjs: false, // 禁用 CommonJS
system: false, // 禁用 SystemJS
harmony: false, // 禁用 ES6 import/export
requireInclude: false, // 禁用 require.include
requireEnsure: false, // 禁用 require.ensure
requireContext: false, // 禁用 require.context
browserify: false, // 禁用 browserify
requireJs: false, // 禁用 requirejs
}
},
]
}
webpack(4)--module的更多相关文章
- webpack中Module build failed: Unknown word (2:1)
在新建的webpack.config.js文件中配置好style-loader和css-loader,注意顺序为:style-loader,css-loader,less-loader,postcss ...
- webpack 命令 Module build failed (from ./node_modules/babel-loader/lib/index.js) 错误问题解决方案
在项目中运行的时候出现报错,错误为Module build failed (from ./node_modules/babel-loader/lib/index.js) 解决方案: 控制台输入 np ...
- how webpack Hot Module Replacement works
https://medium.com/@rajaraodv/webpack-hot-module-replacement-hmr-e756a726a07
- webpack入门(四)webpack的api 2 module
接着介绍webpack的module. module Options affecting the normal modules (NormalModuleFactory) 这些选项影响普通的模块 m ...
- webpack 模块标识符(Module Identifiers)
让我们向项目中再添加一个模块 print.js: project webpack-demo |- package.json |- webpack.config.js |- /dist |- /src ...
- A Beginner’s Guide to Webpack 4 and Module Bundling
原文: https://www.sitepoint.com/beginners-guide-webpack-module-bundling/ ----------------------------- ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- webpack踩坑之路——构建基本的React+ES6项目
转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...
- 转:入门Webpack,看这篇就够了
写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段 ...
随机推荐
- STM32 IAP docs
/********************************************************************************* * STM32 IAP docs ...
- CentOS 7关闭图形桌面开启文本界面
1,命令模式systemctl set-default multi-user.target 2,图形模式systemctl set-default graphical.target CentOS 7 ...
- TensorFlow笔记-01-开篇概述
人工智能实践:TensorFlow笔记-01-开篇概述 从今天开始,从零开始学习TensorFlow,有相同兴趣的同志,可以互相学习笔记,本篇是开篇介绍 Tensorflow,已经人工智能领域的一些名 ...
- WAJUEJI which home strong!nyoj
WAJUEJI which home strong! 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 在一个山沟里,姐弟俩同时考上了大学.但由于家里拮据,所以这并不是 ...
- 【转】每天一个linux命令(27):linux chmod命令
原文网址:http://www.cnblogs.com/peida/archive/2012/11/29/2794010.html chmod命令用于改变linux系统文件或目录的访问权限.用它控制文 ...
- Oracle活动会话历史(ASH)及报告解读
对于数据库运行期间的各种状态的实时监控以及相关性能数据捕获对于解决性能问题,提高整体业务系统运行效率是至关重要的.在Oracle数据库中,实时捕获相关性能数据是通过ASH工具来实现的.ASH通过每秒钟 ...
- 用Qstring给char[]数组赋值(转)
tree_data.Desc //Desc是char[80]类型的数据 Qstring newDescStr; strcpy(tree_data.Desc , newDescStr.toLocal8 ...
- javascript 变量定义
一.javascript中,变量定义的位置与写在哪个<script></script>标签对内无关,只分前后顺序,写在前面的后面就能够访问,写在后面的前面会提示“未定义”. 例 ...
- iText使用经历
最近用iText搞了下PDF,虽然一路趟坑而过,毕竟是搞出来了,所以iText还是不错的开源PDF生成软件的.先看搞出来的PDF长啥样: 然后看一路趟过来的坑: 1.表格怎么生成,具体是行怎么生成?列 ...
- ToString yyyy-MM-dd ,MM 小写的故事。
ToString MM 小写,有可能时间转为 :2013-49-02,放到数据库中查询,就报错.