webpack

最新推荐文章于 2022-10-09 23:38:37 发布

u010678473

最新推荐文章于 2022-10-09 23:38:37 发布

阅读量113

点赞数

webpack原理与实战

webpack是一个js打包工具，不一个完整的前端构建工具。它的流行得益于模块化和单页应用的流行。webpack提供扩展机制，在庞大的社区支持下各种场景基本它都可找到解决方案。本文的目的是教会你用webpack解决实战中常见的问题。

webpack原理

在深入实战前先要知道webpack的运行原理

webpack核心概念

entry 一个可执行模块或库的入口文件。
chunk 多个文件组成的一个代码块，例如把一个可执行模块和它所有依赖的模块组合和一个 chunk 这体现了webpack的打包机制。
loader 文件转换器，例如把es6转换为es5，scss转换为css。
plugin 插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。
webpack构建流程

从启动webpack构建到输出结果经历了一系列过程，它们是：

解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。
注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。
从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。
在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。
输出所有chunk到文件系统。
需要注意的是，在构建生命周期中有一系列插件在合适的时机做了合适的事情，比如UglifyJsPlugin会在loader转换递归完后对结果再使用UglifyJs压缩覆盖之前的结果。

场景和方案

通过各种场景和对应的解决方案让你深入掌握webpack

单页应用

demo redemo
一个单页应用需要配置一个entry指明执行入口，webpack会为entry生成一个包含这个入口所有依赖文件的chunk，但要让它在浏览器里跑起来还需要一个HTML文件来加载chunk生成的js文件，如果提取出了css还需要让HTML文件引入提取出的css。web-webpack-plugin里的WebPlugin可以自动的完成这些工作。

webpack配置文件

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']指明这个HTML依赖哪些entry，entry生成的js和css会自动注入到HTML里。
你还可以配置这些资源的注入方式，支持如下属性：

_dist 只有在生产环境下才引入该资源
_dev 只有在开发环境下才引入该资源
_inline 把该资源的内容潜入到html里
_ie 只有IE浏览器才需要引入的资源
要设置这些属性可以通过在js里配置

new WebPlugin({
filename: 'index.html',
requires: {
app:{
_dist:true,
_inline:false,
}
},
}),
或者在模版里设置，使用模版的好处是灵活的控制资源注入点。

new WebPlugin({
filename: 'index.html',
template: './template.html',
}),
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<link rel="stylesheet" href="app?_inline">
<script src="ie-polyfill?_ie"></script>
</head>
<body>
<div id="react-body"></div>
<script src="app"></script>
</body>
</html>