How to implement debugging and independent packaging configuration files through webpack projects (detailed tutorial)-JS Tutorial-php.cn

How to implement debugging and independent packaging configuration files through webpack projects (detailed tutorial)

亚连

Release： 2018-06-02 15:16:44

Original

2555 people have browsed it

Below I will share with you a method for debugging webpack projects and packaging configuration files independently. It has a good reference value and I hope it will be helpful to everyone.

Webpack project debugging

-sourcemap

The webpack configuration provides the devtool option. If Set to '#source-map', you can generate a .map file and display the source code when debugging in the chrome browser.

devtool: &#39;#source-map&#39;

webpack独立生成可修改的配置文件
用generate-asset-webpack-plugin这个插件，在webpack.prod.config.js中去生成configServer.json文件，
让其build的时候生成json文件，然后时候get方法异步获取json，替换url即可
具体做法：
先安装generate-asset-webpack-plugin插件
npm install --save-dev generate-asset-webpack-plugin
在webpack.prod.conf.js里面配置

Copy after login

//让打包的时候输出可配置的文件
var GenerateAssetPlugin = require(&#39;generate-asset-webpack-plugin&#39;); 
var createServerConfig = function(compilation){
 let cfgJson={ApiUrl:"http://139.129.31.108:8001"};
 return JSON.stringify(cfgJson);
}

Copy after login

//让打包的时候输入可配置的文件
  new GenerateAssetPlugin({
    filename: &#39;serverconfig.json&#39;,
    fn: (compilation, cb) => {
      cb(null, createServerConfig(compilation));
    },
    extraFiles: []
  })

Copy after login

After packaging, at the root The serverconfig.json file will be generated in the directory

Use (vue-resourse):

Vue.http.get("serverconfig.json").then((result)=>{
    localStorage.setItem(&#39;ApiUrl&#39;,result.data.ApiUrl);
    console.log(localStorage.getItem(&#39;ApiUrl&#39;));
 }).catch((error)=>{console.log(error)});

Copy after login

can be obtained For the value of key ApiUrl in serverconfig.json, it should be noted that since it is an asynchronous operation, for communication, you can use localstorage to store things, that is, localstorage.setItem; when using it, you can use localstorage.getItem

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed explanation based on the use of on-change attributes in IView

Use Axios Element to implement global requests Loading method

Select selector multi-selection verification method in iview

The above is the detailed content of How to implement debugging and independent packaging configuration files through webpack projects (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!