CD's blog CD's blog
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

CD_wOw

内卷的行情,到不了的梦
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 配置

    • 配置
    • 使用不同语言进行配置(configuration languages)
    • 多种配置类型(configuration types)
      • 导出为一个函数
      • 导出一个Promise
      • 导出多个配置对象
    • 入口和上下文(entry and context)
    • 输出(output)
    • 模块(module)
    • 解析(resolve)
    • 插件(plugins)
    • 开发中 Server(devServer)
    • devtool
    • 构建目标(targets)
    • watch 和 watchOptions
    • 外部扩展(externals)
    • 性能(performance)
    • Node
    • 统计信息(stats)
    • 其它选项(other options)
  • 指南(实例)

  • 《Webpack》笔记
  • 配置
CD_wOw
2020-12-14
目录

多种配置类型(configuration types)

除了导出单个配置对象,还有一些方式满足其他需求

# 导出为一个函数

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

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

  • 环境对象(environment)作为第一个参数。有关语法示例,请查看CLI 文档的环境选项 (opens new window)。 一个选项 map 对象(argv)作为第二个参数。这个对象描述了传递给 webpack 的选项,并且具有 output-filename (opens new window) 和 optimize-minimize (opens new window) 等 key。
-module.exports = {
+module.exports = function(env, argv) {
+  return {
+    mode: env.production ? 'production' : 'development',
+    devtool: env.production ? 'source-maps' : 'eval',
     plugins: [
       new webpack.optimize.UglifyJsPlugin({
+        compress: argv['optimize-minimize'] // 只有传入 -p 或 --optimize-minimize
       })
     ]
+  };
};
1
2
3
4
5
6
7
8
9
10
11
12

# 导出一个Promise

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

module.exports = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        entry: './app.js',
        /* ... */
      })
    }, 5000)
  })
}
1
2
3
4
5
6
7
8
9
10

# 导出多个配置对象

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

module.exports = [{
  output: {
    filename: './dist-amd.js',
    libraryTarget: 'amd'
  },
  entry: './app.js',
  mode: 'production',
}, {
  output: {
    filename: './dist-commonjs.js',
    libraryTarget: 'commonjs'
  },
  entry: './app.js',
  mode: 'production',
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
编辑 (opens new window)
#Webpack
上次更新: 2021/08/22, 01:09:59
使用不同语言进行配置(configuration languages)
入口和上下文(entry and context)

← 使用不同语言进行配置(configuration languages) 入口和上下文(entry and context)→

最近更新
01
gsap动画库学习笔记 - 持续~
06-05
02
远程组件加载方案笔记
05-03
03
小程序使用笔记
03-29
更多文章>
Theme by Vdoing | Copyright © 2020-2023 CD | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式