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
原文地址：https://www.cnblogs.com/luckyXcc/p/9837454.html