Webpack4. 0 each break (10) integration articles

I Integration

The following is taken fromwebpackChinese website:

First, we need to eliminate a common misunderstanding,webpackIt is a module bundler. It is not a task execution tool. The task executor is used to automate common tasks in development, such as lint, build, test, etc. Compared with the packer, the logic problem faced by the task executor is higher. You can use the upper tools to manage the whole continuous integration (CI) and hand over the packaged part to thewebpack。

webpackThe role positioning in the tool chain is very clear, so in order to cooperate with other processes, you need to use the task management tool to startwebpack, this paper introduces two common methods.

1. Use node API

webpakSome methods are exposed so that developers can start in scripts by calling themwebpack, the method used is relatively simple:

//webpack-node.js
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.html.js');
const cowsay = require('cowsay');

const compiler = webpack(webpackConfig);

compiler.run((err, stats)=>{
   if (!err) {
        console.log(stats.toJson().assets);
        console.log(cowsay.say({text:'Congratulations!'}));
   }

});

Operation results:

Here we explain the basic logic of the above code and introducewebpackModule andwebpack.config.html.jsConfiguration file (it’s easy to understand why from herewebpackThe configuration file can be exported as a function or multiple configurations, and it actually participates in the whole running process as a module) through callingwebpack([Object config])Method to get acompilerInstance, callingcompiler.runThe method startswebpackIf there is a running error in the callback function of the run method, you can use theerrTo get the information related to the construction processstatsObject (for examplestats。toJson().assets)。 This enables non command line startupwebpack。

2. Use gulp

gulpIs a flow based task management tool, in factwebpackUse of subdivision functiongulpIt can also be done, and many functional plug-ins will providegrunt,gulpandwebpackAnd other different tools.gulpIndeed, it is more suitable for task flow management in the macro sense. As an old saying goes, tools provide convenience rather than constraints. The official document also provides the following code examples:

//gulpfile.js
var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default',function(){
    return gulp.src('src/entry.js')
        .pipe(webpack({
        //...configs
    })).pipe(gulp.dest('dist/'));
})

II after webpack

So far,webpackIt has been integrated into the automation tool chain. Developers can customize the tasks to be performed after construction according to their own needs, butwebpackThe mission of is not over yet. It still needs a lot of work to be done before users can access the site and use functions. There are many problems that do not appear in the construction, but need to be dealt with during the construction. At this time, developers need to go back to workwebpackAdd configuration.

For example, many developers initially don’t understand why they use it in the build processhash,chunkhashWait for placeholders to make the file name ugly. Only when there is a problem that new resources cannot be accessed without forced page refresh when different versions of products go online will we start to pay attention to the problem of version update and cache strategy, and then understand that it is enabled to mark the versionhash, used to avoid duplicate buildschunkhash, used to reduce volumetree-shakingwait.

III Acknowledge

The webpack series is over. Thank you for your reading and support. If you think my sharing is helpful to you, you can continue to pay attention. I will continue to share articles on computer science. If you are interested in or have questions, please leave a message, and I will select some typical specific explanations and shares. Thank you!

Author: Da Shi doesn’t speak
Link:Webpack4. 0 each break (10) integration articles
Source: blog Garden
The copyright belongs to the author. For commercial reprint, please contact the author for authorization, and for non-commercial reprint, please indicate the source.