你所不知的Webpack-多种配置方法

除了通过最常见的导出一个 Object 来描述 Webpack 所需的配置外,还有其它更灵活的方式,以简化不同场景的配置。 下面来一一介绍它们。

导出一个 Function

在大多数时候你需要从同一份源代码中构建出多份代码,例如一份用于开发时,一份用于发布到线上。

如果采用导出一个 Object 来描述 Webpack 所需的配置的方法,需要写量个文件。 一个用于开发环境,一个用于线上环境。再在启动时通过 webpack --config webpack.config.js 指定使用哪个配置文件。

采用导出一个 Function 的方式,能通过 JavaScript灵活的控制配置,做到只用写一个配置文件就能完成以上要求。

导出一个 Function 的使用方式如下:

const path = require('path');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

module.exports = function (env = {}, argv) {
  const plugins = [];

  const isProduction = env['production'];

  // 在生成环境才压缩
  if (isProduction) {
    plugins.push(
      // 压缩输出的 JS 代码
      new UglifyJsPlugin()
    )
  }

  return {
    plugins: plugins,
    // 在生成环境不输出 Source Map
    devtool: isProduction ? undefined : 'source-map',
  };
}

在运行 Webpack 时,会给这个函数传入2个参数,分别是:

  1. env:当前运行时的 Webpack 专属环境变量,env 是一个 Object。读取时直接访问 Object 的属性,设置它需要在启动 Webpack 时带上参数。例如启动命令是 webpack --env.production --env.bao=foo时,则 env 的值是 {"production":"true","bao":"foo"}
  2. argv:代表在启动 Webpack 时所有通过命令行传入的参数,例如 --config--env--devtool,可以通过 webpack -h 列出所有 Webpack 支持的命令行参数。

就以上配置文件而言,在开发时执行命令 webpack 构建出方便调试的代码,在需要构建出发布到线上的代码时执行 webpack --env.production 构建出压缩的代码。

本实例 提供项目完整代码

导出一个返回 Promise 的函数

在有些情况下你不能以同步的方式返回一个描述配置的 Object,Webpack 还支持导出一个返回 Promise 的函数,使用如下:

module.exports = function(env = {}, argv) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        // ...
      })
    }, 5000)
  })
}

导出多份配置

除了只导出一份配置外,Webpack 还支持导出一个数组,数组中可以包含每份配置,并且每份配置都会执行一遍构建。

注意本特性从 Webpack 3.1.0 版本才开始支持。

使用如下:

module.exports = [
  // 采用 Object 描述的一份配置
  {
    // ...
  },
  // 采用函数描述的一份配置
  function() {
    return {
      // ...
    }
  },
  // 采用异步函数描述的一份配置
  function() {
    return Promise();
  }
]

以上配置会导致 Webpack 针对这三份配置执行三次不同的构建。

这特别适合于用 Webpack 构建一个要上传到 Npm 仓库的库,因为库中可能需要包含多种模块化格式的代码,例如 CommonJS、UMD。

阅读原文

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏为数不多的Android技巧

Android Studio你不知道的快捷键(三)

有没有这样的场景:你在Android Studio打开了一个图片文件(或者别的文件),想在资源浏览器里面查看这图片;在Eclipse里面我想大部分的人是Alt ...

1081
来自专栏vue学习

34、vuex初探(二)

首先我们讲在组件中分发 Action,使用的是dispatch这个方法。也就是说如果你想在组件中改变vuex仓库的值,可以使用这个方法。

1452
来自专栏技术博文

PHP抓取采集类snoopy

snoopy是一个php类,用来模仿web浏览器的功能,它能完成获取网页内容和发送表单的任务。官方网站 http://snoopy.sourceforge.ne...

5998
来自专栏计算机编程

Vue 单文件组件详解<1>--简单上手

vue 的webpack的结构非常简单,简单的一眼就可以知道每个目录下是干啥的,在components目录下就有属于我们想要详细解析的内容,这两个vue文件即为...

801
来自专栏WindCoder

数组版通讯录-C++

851
来自专栏前端杂谈

使用vue开发项目需要注意的问题和可能踩到的坑

最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下:

1012
来自专栏ASP.NET MVC5 后台权限管理系统

Fastreport.net 如何在开发MVC应用程序时使用报表

1884
来自专栏张戈的专栏

利用腾讯云 COS 云对象存储定时远程备份网站

一、优点分析 内网传输:和阿里云 OSS 一样,腾讯云 COS 同样支持内网和外网文件传输,对于腾讯云服务器,使用内网传输绝对是最快、最稳定的备份方案! 免费...

2.1K10
来自专栏挖坑填坑

angular页面打印局部功能实现方法思考

在页面显示的时候是分页现实的,当前页面只有10条数据,但是打印需要打印完整的100条数据。 并且在当前页面包含了表格之外的标题,菜单等其他元素。 后天api...

872
来自专栏流媒体

gcc用法以及静态/动态链接

-E:只进行预处理,不编译 -S:只编译,不汇编 -c:只编译、汇编,不链接 -g:编译器在编译的时候产生调试信息。 -I:指定include包含文件的...

722

扫码关注云+社区