webpack--环境变量设置、输出目录

本文章主要针对使用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是打包时项目资源的存放地址

所以这样我们就可以根据自己的操作进行打包或者启动了。