非常教程

Webpack参考手册

组态 | Configuration

配置类型 | Configuration Types

除了导出单个配置对象之外,还有其他一些方法可以满足其他需求。

导出函数

最终,你会发现需要在开发和生产构建之间,消除 webpack.config.js 的差异。(至少)有两种选项:

作为导出一个配置对象的替代,还有一种可选的导出方式是,从 webpack 配置文件中导出一个函数。该函数在调用时,可传入两个参数:

环境对象(environment)作为第一个参数。有关语法示例,请查看CLI 文档的环境选项。 一个选项 map 对象(argv)作为第二个参数。这个对象描述了传递给 webpack 的选项,并且具有 output-filenameoptimize-minimize 等 key。

  • 选项映射(argv)作为第二个参数。这描述了传递给webpack的选项,以及诸如output-filename和的键optimize-minimize
-module.exports = {
+module.exports = function(env, argv) {
+  return {
+    devtool: env.production ? 'source-maps' : 'eval',
     plugins: [
       new webpack.optimize.UglifyJsPlugin({
+        compress: argv['optimize-minimize'] // only if -p or --optimize-minimize were passed
       })
     ]
+  };
};

导出一个Promise

webpack 将运行由配置文件导出的函数,并且等待 Promise 返回。便于需要异步地加载所需的配置变量。

module.exports = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        entry: './app.js',
        /* ... */
      })
    }, 5000)
  })
}

导出多个配置

作为导出一个配置对象/配置函数的替代,你可能需要导出多个配置对象(从 webpack 3.1.0 开始支持导出多个函数)。当运行 webpack 时,所有的配置对象都会构建。例如,导出多个配置对象,对于针对多个构建目标(例如 AMD 和 CommonJS)打包一个 library 非常有用。

module.exports = [{
  output: {
    filename: './dist-amd.js',
    libraryTarget: 'amd'
  },
  entry: './app.js',
}, {
  output: {
    filename: './dist-commonjs.js',
    libraryTarget: 'commonjs'
  },
  entry: './app.js',
}]
Webpack

webpack 是一个模块打包器。webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。

主页 https://webpack.js.org/
源码 https://github.com/webpack/webpack
发布版本 3.8.1

Webpack目录

1.指南 | Guides
2.接口 | API
3.概念 | Concepts
4.组态 | Configuration
5.装载 | Loaders