Me and my ad front-end Code (VI): Webpack Project Merger, maybe I don't need gulp

With the beginning of the year began to use the Webpack reconstruction of the company's advertising code, has been nearly a decade of time, the demand has gradually stabilized. I think it's time to tidy up some of these projects and take care of some historical issues.

Because the line of business is not integrated, the demand is not fixed, considering the future with different lines of business development direction, I have different lines of business advertising code to create a different Git project, developed separately. But I still use the same project configuration and basic logic for them to prepare for the day when consolidation is needed. This led me to have a lot of the same basic modules in the ad code for different lines of business, and once you've modified those modules, it's time-consuming and laborious to manually sync them separately. So the first priority of this optimization is the merger project. In addition, the use of webpack development, I later joined the ES6 module need to Source-map to facilitate debugging. Finally came in using Vue-cli's sentiment, my original project too relies on gulp, after reading the VUE-CLI generated Webpack project, I intend to try to replace the project gulp into NPM script.

So my task of optimizing this time has the following several:

1, the Project merger: Webpack multi-entrance;

2, Soucemap: Join the SOURCEMAP option, and differentiate the development of the environment and on-line environment;

3, NPM script replacement gulp;

4, bug modification;

First, the project merger, multi-entry

The first time the PC and WAP AD code configured two git repositories, because the business model is similar, so the same architecture, the difference is that both ends of the ad type is different, the browser adaptation scheme is different, which resulted in two code has a large number of the same module, Each time you modify these same modules to have colleagues modify another, when it is the practice is to hunt these modules in a JSON file, once modified to run a Gulp script synchronization. But this is not the way to do it. This is a very unreasonable solution in itself, so why should I divide it into two? The reason is that the background of the PC for a long time and the background of the WAP is written by two different back-end groups, and the backend architecture is implemented by PHP and Java, and the maintenance work of different lines of business may be split to other departments to maintain, which is a historical reason. It is for this reason that I did not combine the two Lotus root, so that one day I need to take two pieces of code apart to different teams to maintain.

But I still consider that one day will merge together, so I have been forced to standardize the two projects in the logical structure and the same function module to keep in sync, which I can one day in the future will be able to successfully merge the two projects and when the new line of business, can quickly compile a new ad code, My code must be able to support different scenarios and not be generated for a particular line of business. In fact, with the integration and stability of advertising business resources, I now intend to make this attempt.

I initially chose Webpack also out of the multi-entry, theoretically I just need to copy the different portal modules and business-specific types of WAP to the PC, and then modify the Webpack configuration file, you can implement the merger.

So let me just say a little bit about Webpack's multi-entry configuration (I'll give the official documentation first):

Our main concern is webpack.config.js, of course, the Webpack configuration file in your project may not be called by this name. Take my example:

1 varPath = require (' path ');2 varWebpack = require (' Webpack '));3 //var htmlwebpackplugin = require (' Html-webpack-plugin ');4 //defines the path to some folders5 varRoot_path =path.resolve (__dirname);6 varApp_path = Path.resolve (Root_path, './src/app ');7 varBuild_path = Path.resolve (Root_path, './src/build ');8 //var node_path = path.resolve (__dirname, ' node_modules ');9 TenModule.exports = { One   //the folder name of the project can be found directly by default Index.js can also determine which file name A entry: { -"YOURCODEPCV1": App_path + '/index.js ', -"Yourcodewapv1": App_path + '/index-wap.js ' the   }, -   //The file name of the output after the merge JS will be named Adsfehomev1.js - output: { - Path:build_path, +FileName: ' [name].js '//, -     //sourcemapfilename: ' [File].map ', +     //devtoollinetoline:true A   }, atDevtool: ' #source-map ', - externals:{ -jquery: "jquery" -   } -};

Actually, it's very simple. Let's take a look, mainly see module.exports in the entry and Output,entry receive we pass in an object such as, each set of key value pair is a portal, I wrote here two entry file.

But Webpack does not allow us to pass in several sets of output key-value pairs. In fact, each key-value pair in the portal is treated as a "chunk" in the Webpack, and our [name] in Ouput is replaced by the key name in the portal, replacing more than just the key name, we can also include [id], [hash], [chunkhash], etc.

After you actually run Webpack, you will see the following information in the terminal:

There was a column of chunks, and we saw that we had two chunk:0 and 1. 0 is my PC code, 1 is WAP. The corresponding source-map will not create a new chunk. The output is also used by our [name].

In actual development, of course, not only the entrance is different, webpack through the Require keyword to find files, if different portals drink the same module, but this module is dependent on the PC and WAP modules, we can define the good one map cache at the entrance to a common data module, The data for this module is not hardcoded, but is passed in from the entrance. Can also be written in each, just put the reusable module to drink. But this is simple, but when I want to join a portal, it is necessary to write a slip of the file, and not as easy as the portal to define the map, add a file on the line. Of course there are many ways, all roads through Rome, JS Grammar is very powerful.

Second, Sourcemap

This is actually relatively simple, webpack is supported, look at my configuration file above, you can see:

See my first article of friends will see, I started with Requirejs written, the advantage is that the development of the file has a browser asynchronous loading, debugging the time to find the file is better debugging. But it's different now. I use Webpack in the NODEJS Environment pre-compilation to make a file. Imagine the file is very large, and I write is not exactly the same, find something is not very convenient, not to mention the part I wrote with ES6 is converted. I need souce-map to tell me the line that should correspond to the source file.

Third, NPM script instead of gulp

When I started writing, I used gulp, and I had to admit that Gulp was very powerful and convenient. But what I want to do is not so complicated, I need the main is: multitasking, do not remember different commands, Webpack packaging, mocha testing, jslint inspection, development environment variability, on-line environment packaging, deployment and so on. Actually do not need too deep nodejs skill, even if not practical gulp can also take care of.

In fact, I think this idea comes from the time I wrote Vue, when I used the official Vue vue-cli, is the scaffold inside although the use of webpack, but did not use gulp, grunt and other tools. Instead, the NPM script is used. Used to understand the reunion, is the Package.json in the "scripts" shortcut command. In fact, from another aspect, Gulp and jquery are people love and hate tools, good is really convenient, bad is that these tools let us on the principle of native technology, mechanism has a wrong understanding. and NPM package is much more than gulp bag, in general, the function is in NPM has a good, want to use in gulp will be encapsulated into GULP-XXX package. The corresponding update maintenance speed, who relatively fast is more obvious.

Here's a simple example of how to use the NPM script to configure the project with my project:

Just one of my dev (development Environment, watch compilation) and build (package, compress) as an example: NPM run DEV;NPM Run build can be called.

　　

For me, the development environment as long as the terminal input Webpack can be. And I was how to do: In order to allow Gulp to control the entire process, I am in Gulp require ("Webpack") but use Gulp Watch, the disadvantage is to use gulp inadvertently let webpack use more cumbersome, And Gulp Watch is equivalent to gulp listen file changes, in Take call Webpack, if write bad every time equivalent to new run webpack,es5 good, if used a lot of loader, such as ES6 bable, will be very slow (10s above, cannot be counted as instant compilation). And the webpack comes with the-w different, the first slow, then the memory is slow, even if the ES6, will be very fast.

The question is, why didn't I build it like Dev did? Because build not only uses the Webpack, but also uses the different Webpack configuration. I encapsulated the things I wanted to do in minitodist.js, and because the build task was much like the CDN task, I passed a parameter ' dist ' in the statement that called NPM Run build. So what's the difference:

1, adjust the different webpack configuration;

2, modify the version variable;

3, according to the parameters output to different folders;

In fact, the Webpack configuration is only part of the difference, so I used the webpack-merge to generate the configuration for build:

　　

1 varPath = require (' path ')2 varWebpack = require (' Webpack '));3 varMerge = require (' Webpack-merge ');4 varBasewebpackconfig = require ('./webpack.config '));5 varRoot_path =path.resolve (__dirname);6 varApp_path = Path.resolve (Root_path, './src/app ');7 varBuild_path = Path.resolve (Root_path, './dist ');8 9 varModifiedDate = + (NewDate ());Ten  One varWebpackconfig =Merge (Basewebpackconfig, { ADevtool:false, - output: { - Path:build_path, theFileName: ' [name].min.js ', -   }, - plugins: [ -     NewWebpack.optimize.UglifyJsPlugin ({ + Compress: { -Warningsfalse +       } A     }), at     NewWebpack. Bannerplugin (' This file was modified at: ' +modifiedDate) -   ] - }); -  -Module.exports = Webpackconfig

Write the var basewebpackconfig = require ('./webpack.config ') first, to get the webpack.config.js. Then call the Webpack-merge module to create a new configuration through the exports output.

For example, I want to use the compressed code on the online environment. I added Webpack.optimize.UglifyJsPlugin to the "plugins" in the new configuration and changed the file name to XXX.min.js (or no min) on output. I can also add comments about the version in the file header (Webpack. Bannerplugin).

A question about the parameters of the node environment call file. When you use the following statement:

Node Xx.js ' abc '

In the xx.js can get: (the specific principle does not explain)

var arguments = Process.argv.splice (2); Console.log (arguments[0]);

such as the Package.json file I have been writing a succession of other tasks. There is no need to use Gulp, compare my back and forth dependencies list:

Before: After:

is not feeling a lot less.

Summary: Regardless of the department's adjustment, I will also maintain the code, I still want to give others a easy to read a simple maintenance of the project, I hope I write not only the program, but engineering, beginning and finish.

Me and my ad front-end Code (VI): Webpack Project Merger, maybe I don't need gulp