webpack处理环境变量

1、问题：

布置一个koa上传文件服务时，在线上报错，但是本地运行没问题

2、思路：

经检查是路径问题，项目上传服务器的时候经过webpack打包后，文件的上传的路径出现变化，这时需要本地和线上配置不同的路径，也就是说需要布置环境development和production

3、解决：

设置环境变量，需要用到cross-env插件，因为不同端配置的环境变量不同，cross-env可以提供兼容性

npm install --save-dev cross-env

然后配置package.json的scripts参数

{
...
  "scripts": {
    "server": "node index.js",
    "dev": "cross-env NODE_ENV=development node index.js ",
    "build": "cross-env NODE_ENV=production npx webpack --config webpack.config.js"
  },
...
}

有了环境变量还需要一个DefinePlugin插件，这个是干嘛用的呢，就是打包的时候根据环境变量的不同，只打包需要的代码，比如说说if(){}esle{}，只打包if的或者else的内容

在webpack.config.js设置

{
...
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        }),
    ],
...
}

配置业务路径，并使用

let publicUrl
if (process.env.NODE_ENV == 'production') {
    publicUrl = './public/uploads'
} else {
    publicUrl = path.resolve(__dirname, '../../public/uploads')
}