"Front end" Vue2 family bucket case "See Comics" VII, Webpack plug-in development--Automatically replace the server path

Reprint Please specify source: http://www.cnblogs.com/shamoyuu/p/vue_vux_app_7.html

Project GitHub Address:Https://github.com/shamoyuu/vue-vux-iconan

Want to think this project also did a month, during the deployment of several times, also often in the local connection background interface, so the server address often exchange.

Once deployed, LocalHost was deployed and had to be deployed a second time.

This chapter will solve this problem, according to the command line parameters, Packaging automatically replace the different server addresses, no longer modify the api.js.

First we modify the tools/api.js to set a placeholder for our server address

" <<<service>>> "  "<<<pic-service>>>"; Console.info ("  Apiurl", Apiurl); Console.info ("picserver", Picserver );

Because the compression of JS does not compress strings, we can do what we mentioned above by replacing placeholders.

Then we create a new Server.json file to save our various platforms, the server address of each environment

{    "WebApp": {        "Environments": {            "Dev": {                "Service":"Http://localhost:18080/iconan",                "Pic-service":"http://iconan.bj.bcebos.com"            },            "Test": {                "Service":"Http://meleong.duapp.com/iconan",                "Pic-service":"http://iconan.bj.bcebos.com"            },            "Production": {                "Service":"/iconan",                "Pic-service":"http://iconan.bj.bcebos.com"            }        }    },    "Mobile": {        "Environments": {            "Dev": {                "Service":"Http://localhost:18080/iconan",                "Pic-service":"http://iconan.bj.bcebos.com"            },            "Test": {                "Service":"Http://meleong.duapp.com/iconan",                "Pic-service":"http://iconan.bj.bcebos.com"            },            "Production": {                "Service":"Http://meleong.duapp.com/iconan",                "Pic-service":"http://iconan.bj.bcebos.com"            }        }    }}

This can be at a glance, it is particularly convenient to modify.

Then we modify Gulpfile.js, first to get the server address we want by the parameters of the instruction

Const " /server.json " ); Global. SERVERS = serverconfig[args.t]["environments"][ARGS.E];

And then we'll replace, if it's a pipe with gulp, you can write that, modify the Webpack.build file

"Webpack.build": (Done) ={Let spinner= Ora ("packing, please later ...");    Spinner.start (); Webpack (Webpackconfig, (err, stats)={spinner.stop (); if(ERR)Throwerr; Process.stdout.write (stats.tostring ({colors:true, Modules:false, Children:false,//If You is using Ts-loader, setting this to true would make TypeScript errors show up during build.Chunksfalse, Chunkmodules:false        }) +"\ n"); if(Stats.haserrors ()) {Console.log (chalk.red ("build error. \ n")); Process.exit (1); }        //Let stream = Gulp.src (["dist/**/*"]); //Let servers = serverconfig[args.t]["Environments"][ARGS.E]; //For (let key in servers) {//stream = stream.pipe (replace ("<<<" + key + ">>>", Servers[key]))// }        //Stream.pipe (Gulp.dest ("dist"))//. On (' End ', function () {//Console.log (Chalk.cyan ("build complete.        \ n ")); //Done (); //     });Done (); });},

The one that was commented out in the picture. However, this is not available in the development environment because we are a development environment configured with Webpack, and if you are using gulp, you can do so.

So we write a plugin for Webpack to implement this function.

First we modify the dev task

ConstWebpackdevconfig = require (PROCESS.CWD () +"/build/webpack.dev.conf");"Dev": () ={Let Devcompiler=Webpack (webpackdevconfig); NewWebpackdevserver (Devcompiler). Listen (WebpackDevConfig.devServer.port, WebpackDevConfig.devServer.host, func tion (err) {if(ERR)Throw NewGutil. Pluginerror ("Webpack-dev-server", err); Console.log (Chalk.cyan ("service started \ n")); });}

Then modify webpack.dev.conf Last exports = Devwebpackconfig, do not return to that promise.

Then we write a plugin that creates a new Build/plugin/servers-replace-webpack-plugin.js file

function Serversreplacewebpackplugin (options) { This. options =options;} ServersReplaceWebpackPlugin.prototype.apply=function (compiler) {let)= This; Compiler.plugin ('Emit', function (compilation, callback) {//check all compiled resource files and replace all required replacements.         for(varFileNameinchcompilation.assets) {if(Filename.endswith (". js") {console.info ("filename =", filename); Let NewFile=Compilation.assets[filename].source (). toString (); Let Servers=that.options;  for(Let keyinchservers) {NewFile= Newfile.replace ("<<<"+ key +">>>", Servers[key]); } Compilation.assets[filename]={source:function () {returnNewFile; }, Size:function () {returnnewfile.length;            }                };    }} callback (); });}; Module.exports= Serversreplacewebpackplugin;

Then add this plugin for webpack.dev.conf and webpack.prod.conf, respectively.

Its parameters are the global declared in Gulpfile.js . SERVERS

This is the end of the series.

The end, the scattered flowers ~

"Front end" Vue2 family bucket case "See Comics" VII, Webpack plug-in development--Automatically replace the server path