webpack4中的module和loader

今天讨论webpack4中的module，webpack中一切皆模块，一个模块对应一个文件，webpack会从配置的entry开始递归找出所有依赖的模块。
webpack4支持多种形式的模块类型，但是有时候可能需要加上type进行配合
如果是CommonJS, AMD, ESM三种类型的模块，使用javascript/auto；
如果是EcmaScript modules(.mjs)，使用javascript/esm，其他的模块类型将不生效；
如果只有CommonJS和EcmaScript modules不可用，使用javascript/dynamic；
如果是json类型的文件，允许使用require和import来导入json，使用json；
如果是Webassembly，使用webassembly/experimental —— 官方说是一个实验性的功能。

rules: [ { test: /\.json$/, type: "javascript/auto" } ]

loader

模块转换器，用于将模块的原内容按照需求转换成新的内容
举个栗子：
将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss或A.less转变为B.css，单纯的文件转换过程；
在webpack3.x中还保留之前版本的loaders，与rules并存都可以使用，在新版中完全移除了loaders，必须使用rules。

相比于 grunt 和 gulp，webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。
看下配置项

const utils = require('./utils') module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { test: /\.js$/, loader: 'babel-loader', include: path.resolve(__dirname, 'src') }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } }, ] } }

utils.js

const config = require('../config') const path = require('path') exports.assetsPath = function (_path) { var assetsSubDirectory = process.env.NODE_ENV === 'production' ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory return path.posix.join(assetsSubDirectory, _path) }

rules

配置模块的读取和解析规则，通常用来配置loader。其类型是一个数组，数组里的每一项用来描述如何处理指定的文件，基本配置如下

• 条件匹配：通过test、include、exclude三个配置项来选中loader要应用的规则
• 应用规则：对选中的文件通过use配置项类应用loader，可以只应用一个loader或者按照从右往左的顺序应用一组loader，同时可分别向loader传递参数
• 重置顺序：一组loader的执行顺序默认是从右向左，通过enforce可以将其中一个loader的执行顺序放到最前或者最后