本文章主要针对使用webpack进行本地运行或者打包进行不同配置进行解释,
首先,看看我们之前的package.json的scripts配置
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --inline --hot"
}
这里我们运行webpack的时候是没区分是否打包的,所以我们得加入一个参数给予识别
"scripts": {
"build": "set OWNNER_ENV=production&&webpack",
"dev": "webpack-dev-server --inline --hot"
},
这样,我们在webpack.config.js可以通过node环境变量获取:
process.env.OWNNER_ENV
配合环境变量我们可以对输出目录进行控制:
var myEnv = process.env.OWNNER_ENV;
var outPutJson;
if(myEnv=='production'){
outPutJson={
publicPath:"./projectOutput/",//本地资源访问目录,也可以设成绝对路径
path: __dirname+"/projectOutput/",//生成文件存放地址,热启动资源访问目录,必须绝对路径
filename: "[name].js"
}
}else{
outPutJson={
path: __dirname+"/initProject/",//生成文件存放地址,热启动资源访问目录,必须绝对路径
filename: "[name].js"
}
}
module.exports= {
...
output: outPutJson,
...
module:{
rules:[
...
{
test:/\.(jpg|png|gif)$/,
use:['url-loader?limit=1111&name=images/[name].[ext]'], //limit:限制多少b一下图片进行base64转码,name:输出目录以及文件名
exclude: /node_modules/
},
...
]
}
这里解释下path和pubilcPath的区别,path是开启本地服务(热启动)时本地资源的暂时存放目录,而publicPath是打包时项目资源的存放地址
所以这样我们就可以根据自己的操作进行打包或者启动了。