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的執行順序放到最前或者最后