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

【问题标题】：The better way of bundle Vue.js, cross-env or config.js?捆绑 Vue.js、cross-env 或 config.js 的更好方法？
【发布时间】：2018-03-01 09:44:47
【问题描述】：

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

我知道我有两种方式。

1。跨环境

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。对于几个环境变量。

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

一般来说哪个比较流行？

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

vue init webpack

command 似乎还没有赶上它。

【问题讨论】：

标签： webpack vue.js

【解决方案1】：

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

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

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,
      }),
    ]),
  }
}

我可以在源代码中使用环境变量，例如：

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

开始：

yarn dev

或

yarn build:dev

等等

【讨论】：

mmm...Karma 似乎无法识别 module.exports 函数。