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的更多相关文章

  1. webpack中Module build failed: Unknown word (2:1)

    在新建的webpack.config.js文件中配置好style-loader和css-loader,注意顺序为:style-loader,css-loader,less-loader,postcss ...

  2. webpack 命令 Module build failed (from ./node_modules/babel-loader/lib/index.js) 错误问题解决方案

    在项目中运行的时候出现报错,错误为Module build failed (from ./node_modules/babel-loader/lib/index.js) 解决方案: 控制台输入  np ...

  3. how webpack Hot Module Replacement works

    https://medium.com/@rajaraodv/webpack-hot-module-replacement-hmr-e756a726a07

  4. webpack入门(四)webpack的api 2 module

    接着介绍webpack的module. module Options affecting the normal modules (NormalModuleFactory)  这些选项影响普通的模块 m ...

  5. webpack 模块标识符(Module Identifiers)

    让我们向项目中再添加一个模块 print.js: project webpack-demo |- package.json |- webpack.config.js |- /dist |- /src ...

  6. A Beginner’s Guide to Webpack 4 and Module Bundling

    原文: https://www.sitepoint.com/beginners-guide-webpack-module-bundling/ ----------------------------- ...

  7. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  8. webpack踩坑之路——构建基本的React+ES6项目

    转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...

  9. 转:入门Webpack,看这篇就够了

    写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段 ...

随机推荐

  1. Ubuntu python-opcua Test

    /********************************************************************************* * Ubuntu python-o ...

  2. opencv-python教程学习系列9-程序性能检测及优化

    前言 opencv-python教程学习系列记录学习python-opencv过程的点滴,本文主要介绍程序性能检测及优化,坚持学习,共同进步. 系列教程参照OpenCV-Python中文教程: 系统环 ...

  3. BZOJ4836: [Lydsy1704月赛]二元运算【分治FFT】【卡常(没卡过)】

    Description 定义二元运算 opt 满足 现在给定一个长为 n 的数列 a 和一个长为 m 的数列 b ,接下来有 q 次询问.每次询问给定一个数字 c 你需要求出有多少对 (i, j) 使 ...

  4. Oracle 服务命名(别名)的配置及原理,plsql连接用

    Oracle 服务命名(别名)的配置及原理 连接数据库必须配置服务命名(别名,用于plsql的连接),不管是本地还是远程,服务命名即简单命名,简单命名映射到连接描述符,他包含服务的网络位置和标识,配置 ...

  5. rabbitmq学习(五):springboot整合rabbitmq

    一.Springboot对rabbitmq的支持 springboot提供了对rabbitmq的支持,并且大大简化了rabbitmq的相关配置.在springboot中,框架帮我们将不同的交换机划分出 ...

  6. net core web服务器实现

    net core 系列 18 web服务器实现 一. ASP.NET Core Module 在介绍ASP.NET Core Web实现之前,先来了解下ASP.NET Core Module.该模块是 ...

  7. LeetCode-Microsoft-Populating Next Right Pointers in Each Node

    Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...

  8. linux中tomcat内存溢出解决办法

    用命令 tail -f /root/apache-tomcat-6.0.20/logs/catalina.out(需要找到tomcat路径) 查看日志,查看是否有错误 linux中tomcat内存溢出 ...

  9. centos6 ext4修复

    输入root密码后: fsck -y /dev/mapper/vg_logserv-lv_root 修复完后重启 reboot 若忘记了root密码,可用系统ISO盘引导进入Rescue救援模式 在这 ...

  10. ML(4.2): R CART

    CART模型 :即Classification And Regression Trees.它和一般回归分析类似,是用来对变量进行解释和预测的工具,也是数据挖掘中的一种常用算法.如果因变量是连续数据,相 ...