webpack4 配置环境变量

很多童鞋在学习webpack之前可能都知道webpack有俩种配置情况 一种是开发环境下的配置 一种是生产环境
根据生产环境和开发环境 写出不一样的代码 和请求地址
举一个简单的例子 比如请求地址 如果是开发环境的话可能是我们本地的地址

let url="";
if(ENV==='dev'){   // 判断是否是开发环境   但是这个全局变量ENV我们在哪里定义的呢
	url="http://localhost:3000"
}else{
	url="http://www.zyc.com"
}
console.log(url)

webpack中的一种配置引入全局变量 在webpack.config.js文件中

let webpack=require('webpack');
plugins:{
	new webpack.DefinePlugin({  // 定义环境变量   可以写成  ENV:"'dev'" dev得是一个字符串形式
			ENV:JSON.stringify('dev'), // 这里 不能直接写 ENV：'dev'  他会把dev看做成一个变量
		}),
}

这样就引入全局变量
这样我们在运行　npm run dev 就可以在控制台输出 http://localhost:3000
2.如果项目简单 还可以 但是要是项目复杂起来的话
就需要我们 生产环境和开发环境 各个需要的一个配置文件
把 项目下创建俩个文件
webpack.prod.js 生产环境需要的配置文件
webpack.dev.js 开发环境需要的配置文件
然后就是一个基础的配置文件 webpack.config.js文件
webpack 插件提供了一种 webpack-merge 插件
cnpm install webpack-merge -D

//webpack.prod.js 
let {smart} =require('webpack-merge');
let base=require('./webpack.config.js');
let OptimizeCss=require('optimize-css-assets-webpack-plugin'); // 压缩 css代码
let UglifyJsPlugin=require('uglifyjs-webpack-plugin'); //压缩js代码
module.exports=smart(base,{
	mode:'production'，
	optimization:{ // 优化项目
        minimizer:[
            new UglifyJsPlugin({    // 压缩代码
                cache:true,
                parallel:true,
                sourceMap:true
            }), 
            new OptimizeCss()  // 压缩css代码
        ]
    }
})

// webpack.dev.js
let {smart} =require('webpack-merge');
let base=require('./webpack.config.js');

module.exports=smart(base,{
	mode:'devlopment'
})

在package.json文件中 配置启动项目

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js", //  配置 生产环境代码
    "dev": "webpack-dev-server --config webpack.dev.js" //配置开发环境代码
  }

然后启动就可以
npm run build 启动生产环境代码
npm run dev 启动开发环境代码