webpack区分环境和其它配置

一、区分环境

有些时候，我们需要针对生产环境和开发环境分别书写webpack配置
为了更好的适应这种要求，webpack允许配置不仅可以是一个对象，还可以是一个函数

module.exports = env => {
    return {
        //配置内容
    }
}

在开始构建时，webpack如果发现配置是一个函数，会调用该函数，将函数返回的对象作为配置内容，因此，开发者可以根据不同的环境返回不同的对象

在调用webpack函数时，webpack会向函数传入一个参数env，该参数的值来自于webpack命令中给env指定的值，例如

npx webpack --env abc # env: "abc"

npx webpack --env.abc # env: {abc:true}
npx webpack --env.abc=1  # env： {abc:1}
npx webpack --env.abc=1 --env.bcd=2 # env: {abc:1, bcd:2}

这样一来，我们就可以在命令中指定环境，在代码中进行判断，根据环境返回不同的配置结果。

// webpack.pro.js
module.exports = {
    mode: "production",//生产环境
    devtool: "none"
}

// webpack.dev.js
module.exports = {
    mode: "development",//开发环境
    devtool: "source-map"
}

// webpack.base.js
module.exports = {//提供公用配置
    entry: "./src/index.js",
    output: {
        filename: "scripts/[name]-[hash:5].js"
    }
}

// webpack.config.js
var baseConfig = require("./webpack.base");
var devConfig = require("./webpack.dev");
var proConfig = require("./webpack.pro");
module.exports = function (env) {
    if (env && env.prod) {
        return {
            ...baseConfig,
            ...proConfig
        }
    }
    else {
        return {
            ...baseConfig,
            ...devConfig
        }
    }
};

二、其他配置

1.context

context: path.resolve(__dirname, "app")

该配置会影响入口和loaders的解析，入口和loaders的相对路径会以context的配置作为基准路径，这样，你的配置会独立于CWD（current working directory 当前执行路径）；

var path = require("path");
module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: {
        index: "./index.js", // 利用context相当于是"./src/index.js"
        a: "./a.js"
    },
    context: path.resolve(_dirname,"src")
}

2.output

1.library

library: "abc"

这样一来，打包后的结果中，会将自执行函数的执行结果暴露给abc ,类似jq一样供外部调用的接口

// src/index.js
module.exports = function print(){
	console.log("print");
}

// dist/main.js
var abc = (function (module){})({"./src/index.js": ...})

2.libraryTarget

libraryTarget: "var"

该配置可以更加精细的控制如何暴露入口包的导出结果

其他可用的值有：

• var：默认值，暴露给一个普通变量
• window：暴露给window对象的一个属性
• this：暴露给this的一个属性
• global：暴露给global的一个属性
• commonjs：暴露给exports的一个属性
• 其他：https://www.webpackjs.com/configuration/output/#output-librarytarget

3.target

target:"web" //默认值

module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: {
        index: "./index.js", // 利用context相当于是"./src/index.js"
    },
    context: path.resolve(_dirname,"src"),
    target:"node" //打包后的代码运行在node环境中
}

设置打包结果最终要运行的环境，常用值有

• web: 打包后的代码运行在web环境中
• node：打包后的代码运行在node环境中
• 其他：https://www.webpackjs.com/configuration/target/

4.module.noParse

noParse: /jquery/   不再分析依赖、抽象语法树
noParse: /a\.js/

不解析正则表达式匹配的模块，通常用它来忽略那些大型的单模块库，以提高构建性能

5.resolve

resolve的相关配置主要用于控制模块解析过程

1.modules

modules: ["node_modules"]  //默认值，可以多个值

当解析模块时，如果遇到导入语句，require("test")（没有指定具体路径），webpack会从下面的位置寻找依赖的模块

1. 当前目录下的node_modules目录
2. 上级目录下的node_modules目录
3. …

对于require（...）是在webpack环境中去寻找该包，且不管在什么代码中，出现require就会寻找并解析成语法树

2.extensions

extensions: [".js", ".json"]  //默认值

当解析模块时，遇到无具体后缀的导入语句，例如require("test")，会依次测试它的后缀名

• test.js
• test.json
  webpack会自动补全后缀名

3.alias

alias: {
  "@": path.resolve(__dirname, 'src'),
  "_": __dirname
}

// src/index.js
require('./src/a/b/c/d.js');
//require('@/d.js');

有了alias（别名）后，导入语句中可以加入配置的键名，例如require("@/abc.js")，webpack会将其看作是require(src的绝对路径+"/abc.js")。

在大型系统中，源码结构往往比较深和复杂，别名配置可以让我们更加方便的导入依赖

6.externals

externals: {
    jquery: "$",
    lodash: "_"
}

从最终的bundle中排除掉配置的配置的源码，例如，入口模块是

//index.js
require("jquery")
require("lodash")

生成的bundle是：

(function(){
    ...
})({
    "./src/index.js": function(module, exports, __webpack_require__){
        __webpack_require__("jquery")
        __webpack_require__("lodash")
    },
    "jquery": function(module, exports){
        //jquery的大量源码
    },
    "lodash": function(module, exports){
        //lodash的大量源码
    },
})

但有了上面的配置后，则变成了

(function(){
    ...
})({
    "./src/index.js": function(module, exports, __webpack_require__){
        __webpack_require__("jquery")
        __webpack_require__("lodash")
    },
    "jquery": function(module, exports){
        module.exports = $;
    },
    "lodash": function(module, exports){
        module.exports = _;
    },
})

这比较适用于一些第三方库来自于外部CDN的情况，这样一来，即可以在页面中使用CDN，又让bundle的体积变得更小，还不影响源码的编写

7.stats

stats控制的是构建过程中控制台的输出内容