What is webpack
webpack是一个static module bundler(静态模块打包器)。当webpack处理你app的时候，webpack会在内部创建一个dependency graph， 这个graph中会列出app中所有的module，以及module之间的依赖关系。使用这个graph创建出来一个或者多个bundles
What is module
通常我们可以将一个文件理解成是一个module。但是module通俗的解释就是：
module指的是独立的可重用的最小代码单元，module中的代码可以被export出去，module也可以引用其他的module。
简而言之，module中包含三个概念：
- 独立的代码单元module
- module可以被暴露
- module也可以引用其他module
ES6 module
在ES6之前，虽然JS也有module，但是module的实现（import、export）都是使用第三方库实现的，JS并没有内置的module feature。
因此当不使用第三方库的时候（requirejs），我们根本没有办法在一个module（JS文件）中引用另外一个module（js文件），因此只能使用多个<script> tag, 这样会发送很多请求不利于页面的perfermance。
因此ES6终于引入了module，俗称ES6 module，支持module的import/export，相当于以后可以直接使用import export不需要借助其他任何工具，但是并不是所有的浏览器都实现了ES6 module，所以。。。
通常的兼容做法就是借助transpiler(babel), 将你的ES6 import编译成ES5。
- 例子
// ES6
import Lodash from 'Lodash';
// Babel compile
"use strict";
var _Lodash = _interopRequireDefault(require("Lodash"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
Why we need bunlder
现代的Web肯定需要很多和用户交互的地方，因此纯HTML已经不能够满足我们的需求了，需要在HTML中加JS，那么通常通过script tag, 将你的JS文件加入到HTML中。
如果你的JS文件只有50行，还好，但是随着APP的功能越来越多，JS的代码量肯定越来越大，如果最后这个JS文件需要包含几十万行代码，就太可怕了。。
那么你肯定会说，不如果我们将这些代码分散在多个JS文件里，在HTML中多引入几个script就OK不是？如果这么做
- 首先页面需要加载这么多的文件，perfermance肯定会受影响
- 除此之外，你还得合理安排你的script标签的顺序，如果B import scriptA，那么script A必须在scriptB之前
更好的方法是，如果每个文件都能以某种方式告诉我们它还需要什么其他文件，然后我们就可以利用这个来安排文件引入的先后顺序
webpack就会使用这种方式构建dependency graph(描述所有的文件和他们的依赖)，然后将这些文件全部bundle起来。
How does webpack work
当你定义一个webpack的入口文件，webpack就会从这里开始开始处理.我们俗称为compile过程
- 递归地遍历每个文件的依赖关系，并解析每个依赖关系，直到遍历完成为止。
webpack的resolver会首先check所有依赖的文件是否存在，如果都存在，然后将每一个文件都转换成一个module，然后为这些module创建dependency graph
-
将所有的module都bundle在一个文件中，这个文件就是output
-
同时webpack会创建并保留所有module的注册表，其中可能包含module所在的位置，因此可以在需要时正确调用/执行它们。
Loader
webpack的目的是将你所有的dependency全部bundle在一起，那么你的dependency可能是JS文件，也可能是一些assets（picture）。
本身bundler只是用来bundle JS文件的，那么对于其他类型的文件和assets， webpack需要在他们被bundler处理之前做一些预处理工作，将这些文件翻译成bundler能够处理的类型。
这个预处理工作就由loader完成，因为有loader，所以webpack可以支持bundle多种多样的文件。
Loader可以将各种其他类型的文件翻译成JS或者data URLs
Plugins
plugins可以截取webpack的runtime events, 因为webpack给所有的runtime events都提供了hook，我们可以利用hook去实现plugin的功能。
Plugin实现
每一个plugin必须有一个apply方法，这个apply方法会被webpack compiler调用，就可以帮助plugin获取entire compilation lifecycle
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, compilation => {
console.log('The webpack build process is starting!!!');
});
}
}
module.exports = ConsoleLogOnBuildWebpackPlugin;
Plugin使用
我们可以在webpack的config文件中配置插件，webpack的config对象中有一个参数plugins，他的类型是数组，每一个元素必须是plugin的new instance
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
网友评论