今天討論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；

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