深入浅出webpack学习(11)--多种类型配置

idisfkj 发布于2019-08-22 15:08 / 2368人阅读

摘要：如果采用导出一个来描述所需配置的方法需要写两个文件。再在启动时通过指定使用哪个配置文件。例如启动命令是时，则的值是。采用描述的一份配置采用函数描述的一份配置采用异步函数描述的一份配置以上配置会导致针对这三份配置执行三次不同的构建。

除了通过导出一个Object来描述webpack所需要的配置，还有其他更灵活的方式，以简化不同场景的配置。下面来一一介绍它们。

1. 导出一个Function

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

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

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

const path = require("path")
const UglifyJsPlugin = require("webpack/lib/optimize/UglifyJsPlugin")

module.exports = function(env={}, argv) {
    const plugins = []
    const isProducton = 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构建出压缩代码。

2. 导出一个返回promise的函数

有些情况下你不能以同步的方式返回一个描述配置的object，webpack还支持导出一个返回promise的函数，使用如下：

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

3. 导出多份配置

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

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

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

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

云服务器 GPU云服务器深入浅出webpack webpack cdn配置 webpack配置cdn webpack常用配置项

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93205.html

Loader 入门【Webpack Book 翻译】

摘要：把他设置为以在其他之前或之后进行处理。基于布尔值的字段可用于进一步进行约束不匹配给定条件参见表示接受的值。同时匹配一系列条件。将此添加到你的配置即可检查其中的数据流，而不必在中插入。原文链接：https://survivejs.com/webpack...翻译计划：https://segmentfault.com/a/11...附言：因为发现书中一些内容单独放出来会比较尴尬，所以会跳...

yeyan1996 2019-08-26 12:17 评论0 收藏0
什么是 Webpack？【Webpack Book 翻译】

摘要：资源哈希编码使用可以为每个包的名称注入一个哈希值例如，，以便在版本更新后使客户端上旧版本的包无效重新下载。如此受人喜爱的原因之一是热模块更换。可以为文件名生成哈希值，在内容更改时，可以作废浏览器缓存中上个版本的包。原文链接：https://survivejs.com/webpack...翻译计划：https://segmentfault.com/a/11... 涉及到的未翻译单词 ...

tainzhi 2019-08-23 10:59 评论0 收藏0
webpack4.x深入与实践

摘要：它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。可以将多种静态资源转换成一个静态文件，减少了页面的请求。因此我们不再按文件文件的方式运行指令，而是直接运行这样便能实现打包。一、什么是webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是，分析你的项目结构，找到J...

Lsnsh 2019-08-23 10:39 评论0 收藏0
一名【合格】前端工程师的自检清单

摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：到现在为止，前端工程师已经成为研...

罗志环 2019-08-23 17:08 评论0 收藏0