很多童鞋在学习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 启动开发环境代码