在webpack中支持的模块语法风格有：ES6，commonJS和AMD
ES6风格(推荐)
在webpack2中，webpack支持ES6模块语法。这意味着在没有babel等工具处理的情况下你就可以使用import和export。下面的方法在webpack中被支持：
import
静态地导入其他模块的导出
import MyModule from ‘./my-module.js‘;
import { NamedExport } from ‘./other-module.js‘;
注：import只能静态的导入其他模板。不能在其他逻辑或者包含变量中动态使用
export
导出变量，函数
import()
import(‘path/to/module‘) -> promise
import()在运行期间动态的加载模块,它在内部依赖promise。import()的调用被视为一个分割点，这意味着请求的模块以及它的子模块被分隔到单个的包中。
if(module.hot) {
import(‘loadsh‘).then(_ => {
// Do something with lodash (a.k.a ‘_‘)...
})
}
import()的注释
行内注释让import()更加地强大。添加注释到import()中，使我们能够对模块进行命名以及选择不同的模式。下面有一些列子：
// single target
import(
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
‘module‘
)
// Multiple possible targets
import(
/* webpackInclude: /\.json$/ */
/* webpackExclude: /\.noimport\.json$/ */
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
/* webpackPrefetch: true */
/* webpackPreload: true */
`./locale/${language}`
)
import(
/* webpackIgnore: true */
‘ignored-module.js‘
)
行内注释可设置的属性
- webpackIgnore: 如果将webpackIgnore被设置为true，将不能动态导入
- webpackChunkName：给包命名。从2.6.0起，占位符[index]和[request]在给定的字符串中被支持，[index]为递增的数字，[request]为实际解析的文件名。在注释中添加webpackChunkName：‘my-chunk-name‘,这会使分隔的包名为 [my-chunk-name].js而不是[id].js
- webpackPrefetch：告诉浏览器，这个资源在将来可能会被需要用于一些导航。
- webpackPreload：告诉浏览器，这个资源在当前导航中可能会需要。
- webpackMode：从2.6.0起，能够指定不同的动态导入模式。可选项如下：
- ‘lazy‘(default)：为每一个import()的模块生成一个懒加载chunk。
- ‘lazy-once‘：只生成一个满足所有import()调用的懒加载chunk。在第一次调用import()时就会去获取chunk，在之后调用import()会使用相同的网络响应。注意这只在部分动态语句中才有意义，例如:import(`./locales/${language}.json`),这儿可能有多个模块路径被请求。
- ‘eager‘：不生成额外的chunk，所有的模块被包含中当前的chunk中并且不会增加额外的网络请求。只要被解析，promise依然会返回。与静态导入不同的是，直到调用import(),module才会被执行
- ‘weak‘：如果模块功能已经在其他地方被加载了(如：在其他模块中导入了它或者加载了包含这个模块的脚本)，就尝试去加载这个模块。promise依然会返回，但是只有当chunk已经在客户端了才会resolve，如果模块不可用就会reject。不会发送网络请求。
- ‘webpackInclude‘：在导入期间这个正则表达式会用于匹配，只有被匹配到的模块才会被打包。
- ‘webpackExclude‘：在导入期间这个正则表达式会用于匹配，只要是被匹配到的模块就不会被打包。
commonJS
commonJS的目标是为浏览器之外的JavaScript指定一个生态系统。下面的commonJS方法在webpack中被支持：
require
require(dependency: String);
从其他的模块中同步检索exports。编辑器会确认在输出包中依赖是可用的
var $ = require(‘jquery‘);var myModule = require(‘my-module‘);
require.resolve
var ID = require.resolve(dependency: String);
同步检索模块ID，编辑器会确认在输出包中依赖是可用的
require.cache
对同一个模块的多次require，只有一个模块执行并且只有一次导出。这是因为在运行期间存在cache。从cache中移除值这会导致新的模块执行以及新的导出。
var d1 = require(‘dependency‘);
require(‘dependency‘) === d1;
delete require.cache[require.resolve(‘dependency‘)];
require(‘dependency‘) !== d1;
// in file.js
require.cache[module.id] === module;
require(‘./file.js‘) === module.exports;
delete require.cache[module.id];
require.cache[module.id] === undefined;
require(‘./file.js‘) !== module.exports; // in theory; in praxis this causes a stack overflow
require.cache[module.id] !== module;
require.ensure
require.ensure(
dependencies: String[],
callback: function(require),
errorCallback: function(error),
chunkName: String
)
分隔指定的依赖到单独的包中，并且包会被异步加载。使用commonJs语法这是唯一一种动态加载包的方式。这意味着，该代码可以在执行中运行，只有在满足某些条件时才加载依赖项。这个功能在内部依赖promise
if ( module.hot ) {
require.ensure([‘b‘], function(require) {
var c = require(‘c‘);
// Do something special...
});
require.ensure支持如下参数:
- dependencies:字符串数组。声明在callback要执行的所有模块。
- callback:一个函数。当所有的依赖加载完成就会这些这个回调函数。require会作为这个函数的参数，在函数中可以使用require去引入其他的依赖。
- errorCallback：如果依赖加载失败就会执行这个函数
- chunkName：给通过require.ensure()创建的包名指定一个名字
AMD
AMD是一个JavaScript规范，它为书写模块，加载模板定义了接口。在webpack中支持如下的AMD方法
define (with factory)
define([name: String], [dependencies: String[]], factoryMethod: function(...))
如果提供了dependencies，factoryMethod会带着每个dependency输出(按dependencies的相同顺序)被调用，如果dependencies没有被提供，factoryMethod会带着require, exports 和 module被调用，如果这个函数有返回值，这个值会作为模块的输出。webpack会忽略name
define([‘jquery‘, ‘my-module‘], function($, myModule) {
// Do something with $ and myModule...
// Export a function
return function doSomething() {
// ...
};
});
它不能在异步函数中使用
define (with value)
define(value: !Function)
define({
answer: 42
});
简单的导出value，这儿的value可以是除函数之外的任何值
require (amd-version)
require(dependencies: String[], [callback: function(...)])
它与require.ensure()类似。它会分隔dependencies到一个独立中包中，并且这个包会被异步加载
require([‘b‘], function(b) {
var c = require(‘c‘);
});
webpack
除了上面描述的模块语法之外，webpack还提供了一些webpack特有的方法
require.context
require.context( directory: String, includeSubdirs: Boolean /* optional, default true */, filter: RegExp /* optional, default /^\.\/.*$/, any file */, mode: String /* optional, ‘sync‘ | ‘eager‘ | ‘weak‘ | ‘lazy‘ | ‘lazy-once‘, default ‘sync‘ */ )
require.include
require.include(dependency: String)
在不执行依赖项的情况下包含依赖项.在优化性能时非常有用
require.include(‘a‘);
require.ensure([‘a‘, ‘b‘], function(require) { /* ... */ });
require.ensure([‘a‘, ‘c‘], function(require) { /* ... */ });
这会生成如下输出:
- 入口chunk:file.js 和 a
- 异步chunk:b
- 异步chunk:c
如果没有使用require.include(‘a‘)。a会被复制在两个anonymous chunk中
原文地址：https://www.cnblogs.com/QxQstar/p/10331205.html