Webpack速查

模块导入

参考文档：module-methods，不作重复说明

主要为ES Module格式、commonjs格式和动态、批量导入

ES Module

基本导入导出

import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';

export const c = 111;
export default "222";

动态(异步)导入

import()函数，类型function(string path):Promise

import('lodash').then(_ => {
  // Do something with lodash (a.k.a '_')...
});

批量导入(带变量)

const language = "具体值";
import(`./locale/${language}.json`).then(module => {
  // do something with the translations
});
// 或者
import("./locale/" + language + ".json").then(module => {
  // do something with the translations
});

打包并导入./locale目录及其子目录下的所有.json文件，即使某些文件没有被明确使用。

特别的：

• 没有指明路径如import(language + ".json")时，默认从当前文件所在目录下寻找
• 没有指明后缀如import("./locale/" + language)时，./locale下所有类型的文件均被导入
• 全部没有指明如import(language)时，可能导致Can't not find module

Magic Comments

形如import(/* webpackIgnore: true */ 'ignored-module.js');，略

commonjs

require(dependency: String); 参见commonjs规范

Webpack 特供

require.context 精确的批量导入，能够明确打包、导入哪个目录下的哪些文件

var context = require.context('./components', true, /\.js/);
var a = context('./a.js'); // 也可使用完整的相对路径: require('./components/a.js')

⚠️：lazy模式时参考动态(异步)导入，Promise取值

loader

加载顺序

参考文档：Loader Interface

...
    rules: [
      {
        test: /\.js/,
        loaders: ["a-loader", "b-loader"],
        // enforce: "pre"
      },
      {
        test: /\.js/,
        loaders: ["c-loader"]
      }
    ]
...

• 对于pitch阶段：a->b->c
• 对于normal阶段：c->b->a

loader有4种分类，为pre、normal、inline、post：

• pre：配置中enforce属性指定为pre
• normal：配置中enforce属性不设置
• inline：导入时如import "d-loader!./a.js";
• post：配置中enforce属性指定为post

分类的loader拥有额外的优先级：

• 对于pitch阶段：post->inline->normal->pre
• 对于normal阶段：pre->normal->inline->post

placeholders

参考文档：loader-utils

• [ext] the extension of the resource
• [name] the basename of the resource
• [path] the path of the resource relative to the context query parameter or option.
• [folder] the folder the resource is in
• [query] the queryof the resource, i.e. ?foo=bar
• [emoji] a random emoji representation of options.content
• [emoji:<length>] same as above, but with a customizable number of emojis
• [contenthash] the hash of options.content (Buffer) (by default it's the hex digest of the md4 hash)
• [<hashType>:contenthash:<digestType>:<length>] optionally one can configure other hashTypes, i. e. sha1, md4, md5, sha256, sha512 other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64 and length the length in chars
• [hash] the hash of options.content (Buffer) (by default it's the hex digest of the md4 hash)
• [<hashType>:hash:<digestType>:<length>] optionally one can configure other hashTypes, i. e. sha1, md4, md5, sha256, sha512 other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64 and length the length in chars
• [N] the N-th match obtained from matching the current file name against options.regExp

In loader context [hash] and [contenthash] are the same, but we recommend using [contenthash] for avoid misleading.

---

留坑