前端工程化
构建工具webpack五大核心概念:
入口：entry：‘./src/index.js’
出口：output:{path:path,filename:name}
引入方式：配置文件、import、cli
Loader:module:{
rules:[
{test:/\.txt$/,use:'raw-loader}
]
}
插件：plugins:[
new HtmlWbpackPlugin(template:'./src/index.html'))
]
模式/兼容性：mode:development procution
<!--===============================================-->
webpack安装和使用
初始化项目
npm init -y 快速创建node项目
安装方式
npm install -g/-D webpack webpack-cli
npx webpack --version 查看版本
webpack.config.js
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
//模式/兼容性
mode: 'production',
//入口
entry: './src/index.js',
//出口
output: {
filename: 'bundle.js',
path: path.join(__dirname, './dist')
},
//laoders
module: {
rules: [
{
//node-sass 的安装
test: /\.(scss|sass)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|otf)$/,
use: ['file-loader']
}
]
},
devServer: {
hot: true,
contentBase: './dist',
port: 8900
},
//plugins new webpack.HotModuleReplacementPlugin 热模块更新
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: './index.html'
}),
new webpack.HotModuleReplacementPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: path.join(__dirname, './src/assets'),
to: 'assets'
}
]
})
]
}
Compiler.js 中的基本流程
我们再来看下运行编译器实例的内部逻辑，具体源代码在 Compiler.js 中。
compiler.run(callback) 中的执行逻辑较为复杂，我们把它按流程抽象一下。抽象后的执行流程如下：
readRecords：读取构建记录，用于分包缓存优化，在未设置 recordsPath 时直接返回。
compile 的主要构建过程，涉及以下几个环节：
newCompilationParams：创建 NormalModule 和 ContextModule 的工厂实例，用于创建后续模块实例。
newCompilation：创建编译过程 Compilation 实例，传入上一步的两个工厂实例作为参数。
compiler.hooks.make.callAsync：触发 make 的 Hook，执行所有监听 make 的插件（例如 SingleEntryPlugin.js 中，会在相应的监听中触发 compilation 的 addEntry 方法）。其中，Hook 的作用，以及其他 Hook 会在下面的小节中再谈到。
compilation.finish：编译过程实例的 finish 方法，触发相应的 Hook 并报告构建模块的错误和警告。
compilation.seal：编译过程的 seal 方法，下一节中我会进一步分析。
emitAssets：调用 compilation.getAssets()，将产物内容写入输出文件中。
emitRecords：对应第一步的 readRecords，用于写入构建记录，在未设置 recordsPath 时直接返回。
Compilation.js 中的基本流程
这部分的源码位于 Compilation.js 中。其中，在编译执行过程中，我们主要从外部调用的是两个方法：
addEntry：从 entry 开始递归添加和构建模块。
seal：冻结模块，进行一系列优化，以及触发各优化阶段的 Hooks
Webpack 构建时的基本流程，总结：
创建编译器 Compiler 实例。
根据 Webpack 参数加载参数中的插件，以及程序内置插件。
执行编译流程：创建编译过程 Compilation 实例，从入口递归添加与构建模块，模块构建完成后冻结模块，并进行优化。
构建与优化过程结束后提交产物，将产物内容写到输出文件中
Webpack 引擎基于插件系统搭建而成，不同的插件各司其职，在 Webpack 工作流程的某一个或多个时间点上，对构建流程的某个方面进行处理。Webpack 就是通过这样的工作方式，在各生命周期中，经一系列插件将源代码逐步变成最后的产物代码。
一个 Webpack 插件是一个包含 apply 方法的 JavaScript 对象。这个 apply 方法的执行逻辑，通常是注册 Webpack 工作流程中某一生命周期 Hook，并添加对应 Hook 中该插件的实际处理函数。例如下面的代码：
复制代码
class HelloWorldPlugin {
apply(compiler) {
compiler.hooks.run.tap("HelloWorldPlugin", compilation => {
console.log('hello world');
})
}
}
module.exports = HelloWorldPlugin;
Hook 的使用分为四步：
在构造函数中定义 Hook 类型和参数，生成 Hook 对象。
在插件中注册 Hook，添加对应 Hook 触发时的执行函数。
生成插件实例，运行 apply 方法。
在运行到对应生命周期节点时调用 Hook，执行注册过的插件的回调函数。如下面的代码所示：
复制代码
lib/Compiler.js
this.hooks = {
...
make: new SyncHook(['compilation', 'params']), //1. 定义Hook
...
}
...
this.hooks.compilation.call(compilation, params); //4. 调用Hook
...
lib/dependencies/CommonJsPlugin.js
//2. 在插件中注册Hook
compiler.hooks.compilation.tap("CommonJSPlugin", (compilation, { contextModuleFactory, normalModuleFactory }) => {
...
})
lib/WebpackOptionsApply.js
//3. 生成插件实例，运行apply方法
new CommonJsPlugin(options.module).apply(compiler);
Compiler Hooks
构建器实例的生命周期可以分为 3 个阶段：初始化阶段、构建过程阶段、产物生成阶段。下面我们就来大致介绍下这些不同阶段的 Hooks ：
初始化阶段
environment、afterEnvironment：在创建完 compiler 实例且执行了配置内定义的插件的 apply 方法后触发。
entryOption、afterPlugins、afterResolvers：在 WebpackOptionsApply.js 中，这 3 个 Hooks 分别在执行 EntryOptions 插件和其他 Webpack 内置插件，以及解析了 resolver 配置后触发。
构建过程阶段
normalModuleFactory、contextModuleFactory：在两类模块工厂创建后触发。
beforeRun、run、watchRun、beforeCompile、compile、thisCompilation、compilation、make、afterCompile：在运行构建过程中触发。
产物生成阶段
shouldEmit、emit、assetEmitted、afterEmit：在构建完成后，处理产物的过程中触发。
failed、done：在达到最终结果状态时触发。
Compilation Hooks
构建过程实例的生命周期我们分为两个阶段：
构建阶段
addEntry、failedEntry、succeedEntry：在添加入口和添加入口结束时触发（Webpack 5 中移除）。
buildModule、rebuildModule、finishRebuildingModule、failedModule、succeedModule：在构建单个模块时触发。
finishModules：在所有模块构建完成后触发。
优化阶段
优化阶段在 seal 函数中共有 12 个主要的处理过程，如下图所示：
每个过程都暴露了相应的 Hooks，分别如下:
seal、needAdditionalSeal、unseal、afterSeal：分别在 seal 函数的起始和结束的位置触发。
optimizeDependencies、afterOptimizeDependencies：触发优化依赖的插件执行，例如FlagDependencyUsagePlugin。
beforeChunks、afterChunks：分别在生成 Chunks 的过程的前后触发。
optimize：在生成 chunks 之后，开始执行优化处理的阶段触发。
optimizeModule、afterOptimizeModule：在优化模块过程的前后触发。
optimizeChunks、afterOptimizeChunks：在优化 Chunk 过程的前后触发，用于 Tree Shaking。
optimizeTree、afterOptimizeTree：在优化模块和 Chunk 树过程的前后触发。
optimizeChunkModules、afterOptimizeChunkModules：在优化 ChunkModules 的过程前后触发，例如 ModuleConcatenationPlugin，利用这一 Hook 来做Scope Hoisting的优化。
shouldRecord、recordModules、recordChunks、recordHash：在 shouldRecord 返回为 true 的情况下，依次触发 recordModules、recordChunks、recordHash。
reviveModules、beforeModuleIds、moduleIds、optimizeModuleIds、afterOptimizeModuleIds：在生成模块 Id 过程的前后触发。
reviveChunks、beforeChunkIds、optimizeChunkIds、afterOptimizeChunkIds：在生成 Chunk id 过程的前后触发。
beforeHash、afterHash：在生成模块与 Chunk 的 hash 过程的前后触发。
beforeModuleAssets、moduleAsset：在生成模块产物数据过程的前后触发。
shouldGenerateChunkAssets、beforeChunkAssets、chunkAsset：在创建 Chunk 产物数据过程的前后触发。
additionalAssets、optimizeChunkAssets、afterOptimizeChunkAssets、optimizeAssets、afterOptimizeAssets：在优化产物过程的前后触发，例如在 TerserPlugin 的压缩代码插件的执行过程中，就用到了 optimizeChunkAssets。
gulp构建工具：
gulpfile.js
const { src, dest, series, watch } = require('gulp') const browserSync = require('browser-sync').create() const reload = browserSync.reload const plugins = require('gulp-load-plugins')() const del = require('del') function js (cb) { src('js/*.js') .pipe(plugins.uglify()) .pipe(dest('./dist/js')) .pipe(reload({ stream: true })) cb() } function css (cb) { src('./scss/*.scss') .pipe(plugins.sass({ outputStyle: 'compressed' })) .pipe(plugins.autoprefixer({ cascade: false, remove: false })) .pipe(dest('./dist/css')) .pipe(reload({ stream: true })) console.log('this is css') cb() } function watcher () { watch('js/*.js', js) watch('scss/*.scss', css) } function clean (cb) { del('./dist') cb() } //server function serve (cb) { browserSync.init({ server: { baseDir: './' } }) cb() } exports.scripts = js exports.styles = css exports.clean = clean //npx gulp --tasks exports.default = series([ clean, js, css, serve, watcher ])
浙公网安备 33010602011771号