webpack使用DefinePlugin设定环境变量的问题

最近在看webpack4的官方文档时,被一个东西弄混了,就是使用DefinePlugin设定环境变量的问题,见代码:

import webpack from 'webpack';

// 如果预先定义过环境变量,就将其赋值给`ASSET_PATH`变量,否则赋值为根目录
const ASSET_PATH = process.env.ASSET_PATH || '/';

export default {
  output: {
    publicPath: ASSET_PATH
  },

  plugins: [
    // 该插件帮助我们安心地使用环境变量
    new webpack.DefinePlugin({
      'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH)
    })
  ]
};

这是官网上的代码这是链接

我想问一下,上面是取process.env.ASSET_PATH赋给ASSET_PATH ,下面有使用DefinePlugin设定process.env.ASSET_PATH的值为ASSET_PATH ,这是什么意思啊?
有没有大神,能解释的通俗易懂一点,谢谢!

阅读 19.8k
2 个回答

自己手动敲了一遍,结论是没有任何意义,
先执行const ASSET_PATH = process.env.ASSET_PATH || '/';
此时process.env.ASSET_PATH未知,故ASSET_PATH = '/';
然后执行

new webpack.DefinePlugin({
  'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH)
})

此时ASSET_PATH = '/';故等同于:

new webpack.DefinePlugin({
  'process.env.ASSET_PATH': '/'
})

就这么简单

看上面的答案无语了。
Webpack是属于Node的程序,Node环境下的环境变量,Webpack可以配置可以灵活读取。

但是index.js里面是属于Webpack要构建的产物,如果里面也想读取环境变量。可以通过这个DefinePlugin定一下
index.js里面就可以读到了。

推荐问题
宣传栏