捆绑Vue.js，cross-env或config.js的更好方法是什么？

Question

我在我的Vue.js项目中使用webpack捆绑了我的源代码。

我明白我有2路。

1. cross-env

的package.json：

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

2. webpack.{prod|dev}.config.js

的package.json：

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

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

vue init webpack

我认为2.现在更好。因为我想使用{prod | dev} .env.js。对于几个env变量。

但我不知道如何将它们捆绑到几个文件（如bundle.js）而不是app。[chunkhash] .js on 2。

哪个一般很受欢迎？

令人困惑的是，Webpack 4于今年2月发布。 Commons Chunk似乎放弃了它。我认为webpack建议使用“--mode”选项。但

vue init webpack

命令似乎还没有赶上它。

Answer 1

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

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

的package.json：

  "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

要么

yarn build:dev

等等