Webpack project debugging and independent packaging of configuration files

webpack project debugging

-sourcemap

The webpack configuration provides the option of devtool. If set to '#source-map', a .map file can be generated, and the source code can be displayed when debugging in the chrome browser.

devtool: '#source-map'

webpackGenerate modifiable configuration files independently
usegenerate-asset-webpack-pluginThis plugin，Generate files in，
Let itbuildGenerate whenjsondocument，Then whengetAsynchronous method acquisitionjson，replaceurlJust
Specific practices：
Install firstgenerate-asset-webpack-pluginPlugin
npm install --save-dev generate-asset-webpack-plugin
Configure it inside

//Let the configurable files be output when packagingvar GenerateAssetPlugin = require('generate-asset-webpack-plugin'); 
var createServerConfig = function(compilation){
 let cfgJson={ApiUrl:"http://139.129.31.108:8001"};
 return (cfgJson);
}

//Let's enter configurable files when packaging  new GenerateAssetPlugin({
    filename: '',
    fn: (compilation, cb) =&gt; {
      cb(null, createServerConfig(compilation));
    },
    extraFiles: []
  })

After packaging, a file will be generated in the root directory.

Use (vue-resource):

("").then((result)=>{
    ('ApiUrl',);
    (('ApiUrl'));
 }).catch((error)=>{(error)});

You can get the value of the key ApiUrl inside. It should be noted that since it is an asynchronous operation, for communication, you can use localstorage to store things, that is, when using it, you can use it.

The above method of debugging webpack project and independently package configuration files is all the content I share with you. I hope you can give you a reference and I hope you can support me more.