深入浅出webpack进修(11)--多种范例设置

除了经由过程导出一个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。

    原文作者:fsrookie
    原文地址: https://segmentfault.com/a/1190000013556268
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞