webpack配置环境变量

最新推荐文章于 2025-04-27 19:27:53 发布

非鱼_____

最新推荐文章于 2025-04-27 19:27:53 发布

阅读量434

点赞数

文章标签： Webpack2

本文链接：https://blog.youkuaiyun.com/qq_42289032/article/details/107087981

版权

借鉴阮一峰老师的再进一步延深：https://github.com/ruanyf/webpack-demos
1、main.js

document.write('<h1>Hello World</h1>');
if (__DEV__) {
  document.write(new Date());
}
if (url != '127.0.0.3') {
    document.write(url);
}

2、在webpack.config.js进行配置

var webpack = require('webpack');

var devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: process.env.DEBUG,
  url: JSON.stringify(process.env.url) != '127.0.0.3' ? JSON.stringify(process.env.url) : '127.0.0.3'
});

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [devFlagPlugin]
};

3、在package里进行配置

{
  "name": "webpack-demo09",
  "version": "1.0.0",
  "scripts": {
    "dev": "npx cross-env DEBUG=true url='127.0.0.1' webpack-dev-server --open",
    "build": "npx cross-env DEBUG=false url='127.0.0.2' webpack"
  },
  "license": "MIT",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}