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