Webpack 捆绑Vue.js、cross env或config.js的更好方法？

我在Vue.js项目中将我的源代码与webpack捆绑在一起

我知道我有两种方法

1.交叉环境 package.json：

"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",

"build": "webpack --progress --hide-modules --config build/webpack.prod.conf.js",

  "scripts": {
    "dev": "webpack-dev-server --mode development --env.ENV=local", // local-pc
    "build:dev": "webpack --mode development --env.ENV=dev", // dev-server
    "build:stg": "webpack --mode production --env.ENV=stg", // stg-server
    "build:prd": "webpack --mode production --env.ENV=prd" // prd-server
  },

2.网页包{prod | dev}.config.js package.json：

"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",

"build": "webpack --progress --hide-modules --config build/webpack.prod.conf.js",

  "scripts": {
    "dev": "webpack-dev-server --mode development --env.ENV=local", // local-pc
    "build:dev": "webpack --mode development --env.ENV=dev", // dev-server
    "build:stg": "webpack --mode production --env.ENV=stg", // stg-server
    "build:prd": "webpack --mode production --env.ENV=prd" // prd-server
  },

由命令生成的webpack.prod.conf.js

vue init webpack

我想是2。现在情况更好。 因为我想使用{prod | dev}.env.js。对于多个环境变量

但是我不知道如何将它们绑定到几个文件中（比如bundle.js），而不是2上的app.[chunkhash].js

一般来说，哪个比较流行？

让人困惑的是，本月发布了Webpack4。 我似乎对它感兴趣。 我认为webpack建议使用“-mode”选项。但是

vue init webpack

---

命令似乎还没有跟上进度。

最后，我将源代码移到了新的基于纱线的项目中。 所以我可以使用webpack4和“--mode”选项

除此之外，我通过“-env”选项和webpack.config.js选择env变量

package.json：

"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",

"build": "webpack --progress --hide-modules --config build/webpack.prod.conf.js",

  "scripts": {
    "dev": "webpack-dev-server --mode development --env.ENV=local", // local-pc
    "build:dev": "webpack --mode development --env.ENV=dev", // dev-server
    "build:stg": "webpack --mode production --env.ENV=stg", // stg-server
    "build:prd": "webpack --mode production --env.ENV=prd" // prd-server
  },

webpack.config.js：

const path = require('path')
const webpack = require('webpack')

module.exports = env => {
  if (env.ENV === 'local') {
    envs = {
      ENV: '"local"',
      HOST: '"http://localhost:8080/"',
    }
  } else if (env.ENV === 'dev') {
    envs = {
      ENV: '"dev"',
      HOST: '"http://localhost/"',
    }
  } else if (env.ENV === 'stg') {
    envs = { ... }
  } else if (env.ENV === 'prd') {
    envs = { ... }
  }

  return {
    ...
    plugins: [].concat([
      new webpack.DefinePlugin({
        'process.env': envs,
      }),
    ]),
  }
}

我可以在我的源代码中使用env变量，如：

console.log('host：%s', process.env.HOST)

开始：

yarn dev

或

---

等等。

mmm…Karma似乎无法识别module.exports，因为它是一个函数。