Test sites:
Only for middle-class, probably sort out a few below
- What is webpack
- Key concept
- The difference between gulp, grunt of
- The packaging process
- How to achieve demand loading
- You usually do the project wrote webpack
What is webpack
webpack is a static processor module , when it is processing applications, it recursively construct a dependency graph , wherein each module comprises a desired application, then all these modules packaged into one or more packages.
Key concept
- entry (entry)
Webpack tell which modules you want to use as a starting internal dependency graph
- output (exit)
Tell webpack output bundles of where to build it, and how to name the files
- loader
Non-processing the JS file, converts the file into a module can handle webpack
loader has two attributes:
- test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
- use 属性，表示进行转换时，应该使用哪个 loader。
复制代码- plugin from packaging optimization and compression, all the way to redefine the environment variable. Extremely powerful plugin interface, can be used to handle a variety of tasks.
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //引入plugin
module.exports = {
// JavaScript 执行入口文件
entry: './main.js',
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{
// 用正则去匹配要用该 loader 转换的 CSS 文件
test: /\.css$/,
use: [
{loader: MiniCssExtractPlugin.loader},
'css-loader',
],
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: `[name]_[contenthash:8].css`,
chunkFilename: '[id].css',
})
]
};
复制代码- Module：
Module, where everything is in Webpack module, a module corresponds to a file. Webpack will be configured to start from the Entry recursively find all dependent modules.
- Chunk
Code block, a combination of a plurality of modules made Chunk, code for merging and segmentation.
The difference between gulp, grunt of
Grunt
There are a large number of ready-made plug-it encapsulates common tasks, but also to manage the dependencies between tasks, automate tasks dependent
Gulp
It is a build tool based automation flow. In addition to the management and execution of tasks, monitor also supports file read and write files. Gulp is designed to be very simple, only by the following five methods can construct capable almost all scenarios:
- By gulp.task registering a task;
- Tasks are performed by gulp.run;
- By gulp.watch monitor file changes;
- Read the file by gulp.src;
- By gulp.dest write file.
Gulp most important feature is the introduction of the concept of flow, while providing a list of commonly processing flow to plug flow can pass between the insert. Gulp advantage is easy to use, yet flexible, both finished its construction and can be used with other tools alone.
grunt and gulp is task-based and streaming (Task, Stream) of. Similarly the jQuery, a find (or class) file, a series of chain do its operations, the updated data stream, the whole constitutes a task chaining multiple tasks comprise the entire web build process. The disadvantage is that integration is not high, before they can be used to write a lot of configuration, can not do out of the box.
webpack based inlet. webpack automatically parsed recursively all the resources needed to load the file entry, the file is then processed with various different Loader, with webpack Plugin to extend functionality.
So to sum up:
From the idea to build it gulp and grunt will need to develop the whole process of building split into multiple front-end Task, and the reasonable control of all Taskcalls relationship webpack require the developer to find the entrance, and a clear need for different resources should be used to do what what Loader parsing and processing
webpack What are common loader and plugin, which you used
-
file-loader: the output file to a folder, file output by reference to the relative URL in the code
-
source-map-loader: Source Map loading of additional documents to facilitate breakpoint debugging
-
image-loader: loaded and compressed image file
-
babel-loader: ES6 converted into ES5
-
css-loader: load CSS, support modular, compression, file import and other characteristics
-
eslint-loader: JavaScript code by checking ESLint
-
define-plugin: define environment variables
-
commons-chunk-plugin: extracting common code
-
uglifyjs-webpack-plugin: ES6 compression codes by UglifyES
The packaging process
1. Initialization : Start Construction, reading and combination parameters, loading plugin, instantiation complier
2. Compile : Entry from the issue, calling for each corresponding serial Module Loader to translate the contents of the file, and then locate the Module dependent Module, recursively compilation process.
3, output : Module for the combination compiled into Chunk, Chunk to convert file output to a file system.
Reproduced in: https: //juejin.im/post/5cfa17a46fb9a07ef1617429