下面看下webpack中第三方包解析与区分环境变量等配置。

1、resolve：解析第三方包

规定如何解析地第三方包

webpack配置与含义：

module.exports = {
  resolve:{//解析地第三方包 common
    modules:path.resolve("node_modules"),//指定从node_modules文件夹下面找包
    alias:{//别名,如： vue = vue.runtime.js
      bootstrap:"bootstrap/dist/css/bootstrap.css"
    },
    mainFields:["style","main"],//先找package.json里配置的style，再找main
    mainFiles:[],//指定入口文件的名字，如果为空，默认入口文件为index.js
    extensions:[".js",".css",".json",".vue"],//以拓展名顺序查找，先找.js，如果没找到，再找.css，再找.json，再找.vue
  },
}

2、DefinePlugin：定义全局环境变量

设置全局环境变量

• 试用场景：分离开发环境与产线环境

webpack配置与含义：

module.exports = {
  plugins: [//存放所有插件
    new webpack.DefinePlugin({
      // DEV: "dev",//这样写会被解析为dev变量，如console.log(dev)
      // DEV: "'dev'",//这样写会被解析为dev字符串，如console.log("dev")
      DEV: JSON.stringify("dev"),//这样写会被解析为dev字符串，如console.log("dev")
      FLAG: "true",//表示赋值true boolean类型
      EXPORESSION: "1+1",//表示赋值1+1的结果（2）
    }),
  ],
}

测试代码：

let url;
if(DEV === "dev"){
    url = "http://localhost:3000"
}else{
    url = "http://baidu.com"
}
console.log(url)
console.log(typeof FLAG)
console.log(EXPORESSION)

输出结果：

http://localhost:3000
boolean
2

3、webpack-merge：区分不同环境

• 试用场景：区分开发环境与产线环境，采用不同配置文件

1、基础配置

写一个基础的webpack配置，包含所有配置。

如：webpack.config.js

2、development配置

基于基础webpack配置，进行dev环境的特殊化配置处理。

webpack.dev.js文件配置：

let { merge } = require("webpack-merge");
let base = require("./webpack.config.js");
module.exports = merge(base, {
  mode: "development"
})

3、production配置

基于基础webpack配置，进行prd环境的特殊化配置处理。

webpack.prd.js文件配置：

let { merge } = require("webpack-merge");
let base = require("./webpack.config.js");
module.exports = merge(base, {
  mode: "production"
})

4、运行

npx webpack --config webpack.dev.js

npx webpack --config webpack.prd.js

运行上面两个配置文件，查看生成的包，发现webpack.dev.js打出来的包没有换行优化，而webpack.prd.js打出来的包默认没有换行符，代码变成了一行，说明配置已生效。