Author: Wu Haolin
github.com/gwuhaolin/blog/issues/4
If a good article submission, please click here to learn more →
webpack js is a packaging tool, not a complete front-end build tool. Its popularity thanks to popular modular and single-page applications. webpack provide extension mechanism, under the huge community support various basic scenarios it can find a solution. The purpose of this article is to teach you to solve common problems in actual combat with webpack.
webpack principle
Before diving into combat must first know the operating principle webpack
webpack core concepts
a module entry executable file or library entry.
A code block chunk of the plurality of files, such as executable module to a module and all combinations and it depends on a chunk which reflects webpack packaging mechanism.
loader file converter, for example, to convert es6 es5, scss converted to css.
plugin plugin for extensions webpack, building on the added node life cycle extension hook is webpack added functionality webpack.
webpack build process
From start to build webpack output experienced a series of procedures, which are:
Webpack resolve configuration parameters, consolidated configuration parameters from the shell and webpack.config.js incoming file, producing the final configuration.
Registration of all plug-in configuration, so that the plug-build event node listening webpack life cycle, in order to make the corresponding reaction.
From entry entry file configuration file to build AST start parsing the syntax tree, identify each file is dependent files, recursion.
In the recursive process parsing the file based on the file type and to find a suitable loader loader configuration file is used to convert.
Recursive After the final result of each file, the configuration according to the generated code block chunk entry.
All chunk output to the file system.
Note that, a series of plug-in at the right time doing the right thing in building life cycle, such as UglifyJsPlugin recursively after the re-use of previous results UglifyJs compression coverage of the result of the conversion in the loader.
Scenes and programs
Through various scenarios and corresponding solutions allow you a deep understanding webpack
Single Page Application
Swirl demo ( https://github.com/gwuhaolin/redemo)
A one-page application needs to be configured to perform a specified entry entrance, webpack will generate a chunk for the entry This entry contains all dependent files, but to get it up and running in the browser also need an HTML file to load the chunk generate js file, If you need to let extracted out of the css HTML file to extract the introduction of css. web-webpack-plugin in the WebPlugin can automatically complete these tasks.
webpack profile
const { WebPlugin } = require(‘web-webpack-plugin’);
module.exports = {
entry: {
app: './src/doc/index.js',
},
plugins: [
// 一个WebPlugin对应生成一个html文件
new WebPlugin({
//输出的html文件名称
filename: 'index.html',
//这个html依赖的`entry`
requires: ['app'],
}),
],
};
requires: [ 'doc'] which specify the HTML dependent entry, entry and css js generated automatically injected into the HTML.
You can also configure these resources injection method, supports the following attributes:
_dist only in a production environment before the introduction of the resource
_dev only in the development environment before the introduction of the resource
_inline the contents of the resource to sneak in html
_ie only IE only need to introduce resources
To set these attributes can be configured in the js
new WebPlugin({
filename: 'index.html',
requires: {
app:{
_dist:true,
_inline:false,
}
},
}),
Or in the template set up, the benefits of using templates are flexible resource control injection point.
new WebPlugin({
filename: 'index.html',
template: './template.html',
}),
<link rel="stylesheet" href="app?_inline">
<script src="ie-polyfill?_ie"></script>
WebPlugin plug draws fis3 thought, complements HTML-entry function webpack missing. For more features WebPlugin, see the document.
Manage multiple projects in a single-page applications
Project in general will contain more than a single page application, although multiple single-page application can also be combined into one, but doing so will lead to some users did not visit also loaded. If the project has a lot of single-page application, configure an entry for each single page and WebPlugin application? If the project has added a one-page application, went webpack new configuration? This is too much trouble, web-webpack-plugin in the AutoWebPlugin can easily solve these problems.
module.exports = {
plugins: [
// 所有页面的入口目录
new AutoWebPlugin('./src/'),
]
};
AutoWebPlugin each folder will ./src/ all single page as a page directory entry, automatically for all the pages inlet disposed WebPlugin output a corresponding html. To add a new page to the next ./src/ in a folder that contains the one-page application dependent code, AutoWebPlugin automatically generates html file named folder name. AutoWebPlugin more features, see the document.
Code optimization division
A good code to split-screen effect to enhance the browser preferences great. For example, for most common system you can react
1. the first out basis library react react-dom redux react-redux to a separate file and other files, rather than put together a package file, the benefits of doing so as long as you do not upgrade their version of the file will never be refresh. If you take these basic libraries and business code packaged in a file where each change will lead to business code file hash value change causing the browser cache invalidation repeat download the code contains the base library. The above configuration is:
// vender.js file pulled out of the library foundation to a separate file to prevent follow the business code Refresh
// all pages rely on third-party libraries
// react foundation
import ‘react’;
import ‘react-dom’;
import ‘react-redux’;
// redux basis
import ‘redux’;
import ‘redux-thunk’;
// webpack Configuration
{
entry: {
vendor: './path/to/vendor.js',
},
}
2. CommonsChunkPlugin then can be extracted by a plurality of code blocks are dependent code to form a single chunk. Extraction at the scene with a plurality of pages of application all common code pages reduce code a single page, is loaded before switching over between different code pages common for all pages without having to reload.
Construction of npm package
demo remd（https://github.com/gwuhaolin/remd）
In addition to building web applications that can run, webpack also be used to build js library to publish npm up call to others.
const nodeExternals = require(‘webpack-node-externals’);
module.exports = {
entry: {
index: './src/index.js',
},
externals: [nodeExternals()],
target: ‘node’,
output: {
path: path.resolve(__dirname, '.npm'),
filename: '[name].js',
libraryTarget: 'commonjs2',
},
};
There are several different places different from the web application:
externals: [nodeExternals ()] under the code for excluding node_modules directory is packed into it, because the code placed in the directory should node_modules by npm installation.
libraryTarget: 'commonjs2' pointed out that entry is a library for others to call rather than an executable, js file output in accordance with commonjs specification.
Build your backend rendering
Server-side rendering code to be run in different nodejs environment, and the browser, server-side rendering code need commonjs specification should not simultaneously contain files other than such as js css. webpack configuration is as follows:
module.exports = {
target: ‘node’,
entry: {
'server_render': './src/server_render',
},
output: {
filename: './dist/server/[name].js',
libraryTarget: 'commonjs2',
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.(scss|css|pdf)$/,
loader: 'ignore-loader',
},
]
},
};
Several of the key is this:
target: 'node' specified code is constructed in the node operating environment to
libraryTarget: 'commonjs2' if the code indicates that the output specification commonjs
{Test: /.(scss|css|pdf)$/,loader: 'ignore-loader'} is not performed to prevent the rendering server have no access to files in the node are packed into the inside.
Migrating from fis3 to webpack
fis3 and webpack have similarities but also differences. They are similar to that employed commonjs specification, the difference is the way introducing non-js css resources. fis3 by // @require './index.scss' by the webpack require ( './ index.scss'). If you want a smooth migration from fis3 to webpack you can use the comment-require-loader. For example, you want to build is the use of use of fis3 way of imui module configured as follows webpack:
loaders:[{
test: /\.js$/,
loaders: ['comment-require-loader'],
include: [path.resolve(__dirname, 'node_modules/imui'),]
}]
Custom webpack extension
If you can not find the solution to your application scenarios in the community, it would need to write yourself a loader or a plugin.
You write custom extensions before webpack want to understand you need to do in the end is a loader or plugin it? It could judge:
If you want to extend a separate document conversion then write loader and the rest are plugin.
Which converts the file can be like:
babel-loader to es6 converted es5
replace file-loader into the corresponding URL file
injecting raw-loader to go to the code contents of the text file
Write webpack loader
demo comment-require-loader
Write loader is very simple to comment-require-loader as an example:
module.exports = function (content) {
return replace(content);
};
Entrance loader needs to export a function that you want to do things is to convert the contents of a file.
Content parameter is a function of the received content file string before conversion, the need to return a string of new content as a result of the conversion, all files are modular poured through the loader. As can be seen from this loader you can only handle a file separate code blocks can not be processed. Want to write more complex loader can refer to the official documentation
Write webpack plugin
demo end-webpack-plugin（https://github.com/gwuhaolin/end-webpack-plugin）
plugin widely scenario, the slightly more complex. At end-webpack-plugin as an example:
class EndWebpackPlugin {
constructor(doneCallback, failCallback) {
this.doneCallback = doneCallback;
this.failCallback = failCallback;
}
apply(compiler) {
// 监听webpack生命周期里的事件，做相应的处理
compiler.plugin('done', (stats) => {
this.doneCallback(stats);
});
compiler.plugin('failed', (err) => {
this.failCallback(err);
});
}
}
module.exports = EndWebpackPlugin;
Entrance loader needs to export a class, the new EndWebpackPlugin () when passing parameters required by this plugin constructor, when webpack startup will first instantiate the plugin and then apply the method to call the plugin, plug-in function needs to listen apply webpack life cycle events, handled accordingly.
webpack plugin, there are two core concepts:
Compiler: there is only a start to launch Compiler, Compiler kept the webpack configuration from webpack
Compilation: Because webpack monitor file changes automatically compile the mechanism, on behalf of Compilation once compiled.
Compiler Compilation and will broadcast a series of events.
webpack life cycle, there are a lot of events can be found at the event-hooks and Compilation years. These are just a simple demo, the more complex you can view how to write a plugin or refer to web-webpack-plugin.
to sum up
webpack actually very simple, you can use a word to cover its essence:
webpack is a modular package js tool that can convert files by loader, via plugin extensions.
If webpack makes you feel complex, it must be the cause of various loader and plugin.
I hope this makes you understand the principles and essence of webpack allow you the flexibility to use webpack in actual combat. ,
Dalian Bohai male hospital mobile.bhnkyy.net
Dalian Bohai male hospital mobile.0411nk.cn