devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

五分钟学会前端打包工具webpack_webpackjs express

作者：繁依Fanyi0 | 2024-02-20 16:27:45

赞

踩

webpackjs express

可以做的事情

代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布

最终目的

  • webpack的基本配置
  • webpack的高级配置
  • webpack的优化策略
  • ast抽象语法树
  • webpack的Tapable
  • 掌握webpack的流程 手写webpack
  • 手写webpack中常见的loader
  • 手写webpack中常见的plugin

1. 安装webpack

  • webpack:提供了内置的东西 express plugin
  • webpack-cli: npx webpack
  • 服务:webpack-dev-server:启动服务 proxy beforeapp
    • 不会真正的打包文件, 只会在内存中打包 运行命令npx webpack-dev-server

2.配置文件

  1. let path = require("path");
  2. let HtmlWebpackPlugin = require("html-webpack-plugin");
  3. module.exports = {//webpack 是node中的一个模块 CommonJs
  4.   devServer: {//静态服务器的配置
  5.     port: 3000,
  6.     progress: true,//进度提哦啊
  7.     contentBase: "./dist",//静态资源路径
  8.     compress:true//是否压缩Gzip
  9.   },
  10.   mode: "production",//环境
  11.   entry: "./src/index.js",
  12.   output: {
  13.     filename: "bundle[hash:8].js",//设置hash之后会解决浏览器缓存问题
  14.     path: path.resolve(__dirname, "dist")//解析 会把相对路径解析成绝对路径
  15.   },
  16.   plugins: [
  17.     new HtmlWebpackPlugin({//打包的时候 自动把html打包到dist目录
  18.       template: "./src/index.html",
  19.       filename: "index.html",
  20.       minify:{
  21.         removeAttributeQuotes:true,//去除双引号
  22.         collapseWhitespace:true//单行压缩
  23.       },
  24.       hash:true//是否加hash后缀
  25.     })
  26.   ]
  27. };
  28.

​

  • 思考1: 如何压缩html文件
  • 思考2: 如何实现命名的hash串
  1.  plugins:[
  2.     new HtmlWebpackPlugin({
  3.       template: './src/index.html',
  4.       filename: 'index.html',
  5.       minify: {
  6.         collapseWhitespace: true,
  7.         removeAttributeQuotes: true
  8.       },
  9.       hash: true
  10.     })
  11.   ]

2.1 修改样式

2.2.1 loader配置

如果直接插入css文件会报一个这样的错误

​

解决: 下载两个loader

  1.   module: {//模块
  2.     rules: [//规则
  3.       {
  4.         test: /\.css$/,
  5.         use: [{
  6.           loader: 'style-loader',//将css插入到head中
  7.           options: {
  8.             insert: 'top'//head/top foot
  9.           }
  10.         }, 'css-loader']
  11.       },
  12.       {
  13.         test: /\.scss$/,
  14.         use: ['style-loader','css-loader', 'sass-loader']
  15.       }
  16.     ],
  17.   },

2.1.1 分离css

但是 此时 我们打包后发现 css是插入在js里面的

​

为了解决这个问题 接下来我们引入 mini-css-extract-plugin这个插件

  1. let MiniCssExtractPlugin require('mini-css-extract-plugin')
  2.  

  1.  rules: [
  2.       {
  3.         test: /\.css$/,
  4.         use: [{
  5.           loader: MiniCssExtractPlugin.loader,
  6.         }, 'css-loader']//loader顺序的规律
  7.       },
  8.       {
  9.         test: /\.(sc|sa)ss$/,
  10.         use: [{
  11.           loader: MiniCssExtractPlugin.loader,
  12.         }, 'css-loader', 'sass-loader']//loader顺序的规律
  13.       }
  14.     ]

​

当我们加入css3之后 新的问题出现了 没有前缀

2.1.3 引入前缀

此时 我们需要下载一个包autoprefixer以及一个loader文件postcss-loader

  1. {
  2.         test: /\.css$/,
  3.         use: [{
  4.           loader: MiniCssExtractPlugin.loader,
  5.         }, 'css-loader','postcss-loader']//loader顺序的规律
  6.       },

  1. 创建一个配置文件 postcss.config.js
  1. module.exports = {
  2.   plugins: [require('autoprefixer')]
  3. };

再次打包

​

需要注意的是 此设置项只能用早生产环境

mode: 'production',

2.1.4 压缩css文件

如何压缩文件呢

其中有个包 optimize-css-assets-webpack-plugin

​

此包主要是用来压缩css的 但是 引入这个包后出现了js没被压缩的问题

怎么解决呢

按照官网配置需要使用TerserJSPlugin

https://www.npmjs.com/package/mini-css-extract-plugin

  1. optimization: {//webpack4.0之后新出的优化项配置
  2.   minimizer: [new TerserJSPlugin({}), new OptimizeCssAssetsPlugin({})]
  3. },

TerserJSPlugin具体参数查看这个

  1. interface TerserPluginOptions {
  2.         test?: string | RegExp | Array<string | RegExp>;
  3.         include?: string | RegExp | Array<string | RegExp>;
  4.         exclude?: string | RegExp | Array<string | RegExp>;
  5.         chunkFilter?: (chunk: webpack.compilation.Chunk) => boolean;
  6.         cache?: boolean | string;
  7.         cacheKeys?: (defaultCacheKeys: any, file: any) => object;
  8.         parallel?: boolean | number;
  9.         sourceMap?: boolean;
  10.         minify?: (file: any, sourceMap: any) => MinifyResult;
  11.         terserOptions?: MinifyOptions;
  12.         extractComments?: boolean
  13.         | string
  14.         | RegExp
  15.         | ExtractCommentFn
  16.         | ExtractCommentOptions;
  17.         warningsFilter?: (warning: any, source: any) => boolean;
  18.     }

2.2 处理js文件

2.2.1 babel核心模块

当我们尝试对写了es6语法的代码进行打包时候

​

并没有变成es5

接下来执行命令 babel

yarn add babel-loader @babel/core @babel/preset-env

  • babel-loader : babel加载器
  • @babel/core :babel的核心模块
  • @babel/preset-env : 将es6转换成es5
  • @babel/plugin-transform-runtime
  • @babel/runtime
  • @babel/polyfill
  1. {
  2.         test: /\.js$/,
  3.         use: [
  4.           {
  5.             loader: 'babel-loader',
  6.             options: {//预设
  7.                   presets: ['@babel/preset-env']
  8.             }
  9.           }
  10.         ]
  11.  }

接下来 就是见证奇迹的时刻

​

2.2.2 处理箭头函数

@babel/preset-env

2.2.3 处理装饰器

当我们添加装饰器 会有如下提示

​

具体可以查看官网 https://babeljs.io/docs/en/babel-plugin-proposal-decorators

  1.  {
  2.         test: /\.js$/,
  3.         use: [
  4.           {
  5.             loader: 'babel-loader',
  6.             options: {//预设
  7.               presets: ['@babel/preset-env'],
  8.               plugins:[
  9.                 ["@babel/plugin-proposal-decorators", { "legacy": true }],
  10.                 ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  11.               ]
  12.             }
  13.           }
  14.         ]
  15.       },
  16.

index.js

  1. @log
  2. class A {
  3.   a = 1;//es7 的语法(es6的变种语法)  // let a = new A() a.a = 1
  4. }
  5. function log(target) {
  6.   console.log(target,'21');
  7. }
  8.

​

2.2.4 处理es7语法

​

  1. {
  2.         test: /\.js$/,
  3.         use: [
  4.           {
  5.             loader: 'babel-loader',
  6.             options: {//预设
  7.               presets: ['@babel/preset-env'],
  8.               plugins:['@babel/plugin-proposal-class-properties']
  9.             }
  10.           }
  11.         ]
  12.       }

a.js

  1. class B {
  2.  
  3. }
  4.  
  5. function* fnB() {
  6.   yield 1;
  7. }
  8.  
  9. console.log(fnB().next());
  10.  
  11. module.exports = 'a';

接下来打包发现 每个文件都会打包一个_classCallCheck

​

写了generator运行也会报错

​

出现以上问题的原因是

  1. 在webpack运行时不会自动检测哪些方法重用了

    1. 一些es6的高级语法 比如generator和promise不会转换成es5

根据官方文档https://babeljs.io/docs/en/babel-plugin-transform-runtime#docsNav

需要下载两个包

yarn add @babel/plugin-transform-runtime @babel/runtime -D

执行npx webpack但是 报了一些警告

​

  1.  {
  2.         test: /\.js$/,
  3.         use: [
  4.           {
  5.             loader: 'babel-loader',
  6.             options: {//预设
  7.               presets: ['@babel/preset-env'],
  8.               plugins: [
  9.                 ["@babel/plugin-proposal-decorators", {"legacy": true}],
  10.                 ["@babel/plugin-proposal-class-properties", {"loose": true}],
  11.                 "@babel/plugin-transform-runtime"
  12.               ]
  13.             }
  14.           }
  15.         ],
  16.         include: path.resolve(__dirname, 'src'),
  17.         exclude: /node_modules/
  18.  
  19.       },

2.2.5 处理全局变量的问题

方法一 : 外置loader

require('expose-loader?$!jquery');

1

方法二 : 内置loader在每个模块都注入$

  1. // rules:
  2.  
  3. {//内置loader
  4.         test: require.resolve('jquery'),
  5.         use: 'expose-loader?$'
  6.       },
  7.           
  8. // plugins:
  9.  
  10.     //提供者
  11.     new webpack.ProvidePlugin({
  12.       "$": "jquery"
  13.     })

优化:

如果在html引入cdn路径并且在页面也 import $ from jquery 这就坏了, 即使引入cdn也会打包

  1.  //排除之外  加入 在cdn引入了这个包 就不会打包这个包
  2.   externals: {
  3.     'jquery': '$
  4.   }

2.3 处理图片文件

2.3.1 处理js中的图片

  1. index.js
  2.  
  3. import logo from './logo.png';
  4. <img src=logo/>
  5.     
  6.     
  7. webpack.config.js:
  8. {
  9.     test: /\.(png|jpg|gif)$/,
  10.       use: [{
  11.         loader: 'file-loader',
  12.         options: {
  13.         	esModule: false, 
  14.       },
  15.     }
  16. }
  17.

2.3.2 处理css中图片文件

因为css-loader中已经对图片做loader处理了 所以 只需要引入相应路径就行了

2.3.3 处理html中的图片

  1. //1. 下载依赖
  2. yarn add html-withimg-plugin -D
  3.  
  4. //2. 配置
  5. {
  6.     test:/\.html$/,
  7.     use:['html-withimg-plugin']
  8.     
  9. }
  10.

2.4 多入口多出口

​

2.5 webpack小插件

  • clean-webpack-plugin
  1. let {CleanWebpackPlugin} = require('clean-webpack-plugin');
  2.  
  3. //使用:
  4. plugins:[
  5. 	new CleanWebpackPlugin()
  6. ]

  • copy-webpack-plugin
  1. const CopyPlugin = require('copy-webpack-plugin');
  2.  
  3. module.exports = {
  4.   plugins: [
  5.     new CopyPlugin([
  6.       { from: 'source', to: 'dest' },
  7.       { from: 'other', to: 'public' },
  8.     ]),
  9.   ],
  10. };

2.6 resolve、分离

2.6.1 resolve

  1. resolve:{
  2.   modules:[path.resolve(__dirname,'node_modules')],//只从当前这个node_modules查找相应的包
  3.   alise:{//别名
  4.   "bootstrapcss":"bootstrap/dist/css/bootstrap.css"
  5. 	},
  6. 	extensions:['js','jsx','vue','json','css']
  7. }

2.6.2 分离文件 dev、 prod、base

  1. let {smart} = require('webpack-merge')
  2. let base = require('./webpack.config.js')
  3.  
  4. module.exports = smart(base,{
  5.   mode:'production'
  6. })

2.7 分离打包文件

2.8 跨域

  • 方式一:在devServer中配置
  1. devServer: {
  2.   port: 8080,
  3.   host: '0.0.0.0',
  4.   quiet: true,
  5.   proxy: {
  6.     // '/api': 'http://127.0.0.1:3000',
  7.     '/api': {
  8.       target: 'http://127.0.0.1:3000',
  9.       pathRewrite:{
  10.         '^/api': ''
  11.       }
  12.     },
  13.  
  14.   },
  15.   before(app) {
  16.     //app就是express对象
  17.     app.get('/list', function (req, res) {
  18.       res.send({code: 1, msg: 'hello'});
  19.     });
  20.   }
  21. },

  • 方式二 : 在服务端配置(node/express)
//1: npm i webpack-dev-middleware


  1. let middleDevWebpack = require('webpack-dev-middleware')
  2. let config = require('./webpack.config.js')
  3.  
  4. app.use(middleDevWebpack(config))
  5.

2.9 懒加载和热更新实时监听

​

  • 热更新

    1. devServer:{
    2.   hot:true,
    3.   quite:true//安静启动
    4. }

  • 实时监听

    1. watch:true,
    2. wathcOptions:{
    3.   poll:1000,
    4.     aggregateTimeout:500,
    5.     ignore:/note_modules/
    6. }

3. webpack优化

打包优化，可以从几个出发点点

  • 打包体积

  • 加载速度

  • 打包速度

  • webpack自带优化

    • tree-sharking : import 把没用的代码自动删除掉
    • scope-hoisting : 作用域提升

  • 优化网络解析时长和执行时长

    • 添加DNS预解析
    • 延时执行影响页面渲染的代码

  • 优化webpack产出

    • 优化代码重复打包
    • 去掉不必要的import
    • babel-preset-env 和 autoprefix 配置优化
    • webpack runtime文件inline
    • 去除不必要的async语句
    • 优化第三方依赖
    • lodash按需引入

  • webpack 知识点

    • hash、contenthash、chunkhash的区别
    • splitChunks详解

  • 必杀技--动态链接库

  • 多进程打包之HappyPack

  • 提取公共代码

3.1 webpack自带优化

  • tree-sharking
  • scope-hoisting

3.2 多线程打包

需要用到happypack实现多线程打包

注意: 如果体积较小会使打包时间更长

第一步:下载

npm install happypack --save-dev


  1. const HappyPack = require('happypack');
  2.  
  3. module.exports = {
  4.     ...
  5. }

第二步: 将常用的 loader 替换为 happypack/loader

  1. const HappyPack = require('happypack');
  2.  
  3. module.exports = {
  4.     ...
  5.     module: {
  6.         rules: [
  7.             test: /\.js$/,
  8.             // use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader
  9.             // 现在用下面的方式替换成 happypack/loader，并使用 id 指定创建的 HappyPack 插件
  10.             use: ['happypack/loader?id=babel'],
  11.             // 排除 node_modules 目录下的文件
  12.             exclude: /node_modules/
  13.         ]
  14.     }
  15. }

三、创建 HappyPack 插件

  1. module.exports = {
  2.     ...
  3.     module: {
  4.         rules: [
  5.             test: /\.js$/,
  6.             // use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader
  7.             // 现在用下面的方式替换成 happypack/loader，并使用 id 指定创建的 HappyPack 插件
  8.             use: ['happypack/loader?id=babel'],
  9.             // 排除 node_modules 目录下的文件
  10.             exclude: /node_modules/
  11.         ]
  12.     },
  13.     plugins: [
  14.         ...,
  15.         new HappyPack({
  16.             /*
  17.              * 必须配置
  18.              */
  19.             // id 标识符，要和 rules 中指定的 id 对应起来
  20.             id: 'babel',
  21.             // 需要使用的 loader，用法和 rules 中 Loader 配置一样
  22.             // 可以直接是字符串，也可以是对象形式
  23.             loaders: ['babel-loader?cacheDirectory']
  24.         })
  25.     ]
  26. }

3.3 关于语言包的打包

有些包自带语言包，有时候不需要把所有的语言包跟着打包比如 moment，那么我们就需要把这个包特殊对待，

主要是通过webpack自导的IgnorePlugin

src下某.js

  1. import moment from 'moment';
  2. import 'moment/locale/zh-cn';
  3.  
  4. moment.locale('zh-cn');
  5.  
  6. let r = moment().endOf('day').fromNow();
  7. console.log(r);

webpack.config.js

  1. plugins: [
  2.   ...
  3. 	new webpack.IgnorePlugin(/\.\/locale/,/moment/),
  4. ]

3.3 不打包某个文件

有些文件我们不希望打包，比如已经在cdn中引入了的文件，此时要用externals进行配置

  1. modules:{
  2.   noParse:/jquery/,
  3.  	...
  4. }
  5.  
  6. plugins: [
  7.   ...
  8. 	new webpack.ProvidePlugin({
  9.       '$': 'jquery'
  10.   }),
  11. ] 
  12.  
  13. //忽略打包的文件
  14. externals:{
  15.   'jquery': '$'
  16. }
  17.

3.4 关于css前缀的处理

3.5 关于js新语法的处理

3.6 关于文件拆分的处理

3.7 关于别名和扩展名的处理

3.8 webpack必杀技 : 动态链接库

  • 什么是动态链接库: 用dll链接的方式提取固定的js文件，并链接这个js文件

    当我们引入一个js文件的时候，这个js文件比较大，那我们是否可以单独打包，发布到cdn上，直接引用

  • 比如 当我们想要把react打包的时候，希望将react和reactdom放到一个js文件打包的时候 不打包这两个文件，而是直接引用js的cdn路径

新建一个webpack的js配置文件

webpack.react.js

  1. var path = require('path');
  2. let webpack = require("webpack");
  3.  
  4. module.exports = {
  5.   mode: 'development',
  6.   entry: {
  7.     react: ['react', 'react-dom']
  8.   },
  9.   output:{
  10.     filename: '_dll_[name].js',
  11.     path: path.resolve(__dirname, 'dist'),
  12.     library: '_dll_[name]',
  13.     //  "var" | "assign" | "this" | "window" | "self" | "global" | "commonjs" | "commonjs2" | "commonjs-module" | "amd" | "amd-require" | "umd" | "umd2" | "jsonp" | "system"
  14.     // libraryTarget: 'commonjs2'//默认 var
  15.   },
  16.   plugins: [
  17.     new webpack.DllPlugin({
  18.       name: '_dll_[name]',
  19.       path: path.resolve(__dirname, 'dist', 'manifest.json')
  20.     })
  21.  
  22.   ]
  23. };

npx webpack --config webpack.react.js

此时就会生成一个manifest.json文件

​

最后 在webpack.prod.config.js线上配置文件中引入插件

  1.     new webpack.DllReferencePlugin({
  2.       manifest: path.resolve(__dirname, 'dist', 'manifest.json')
  3.     })

3.9 抽离公共代码块

  1. optimization: {//webpack4.0之后出现的优化项
  2.     minimizer: [new TerserPlugin({}), new OptimizeCssAssetsWebpackPlugin({})],//压缩css
  3.     //缺陷 可以压缩css 但是 js压缩又出现了问题
  4.  
  5.     splitChunks:{//分割代码块
  6.       cacheGroups:{//缓存组
  7.         common:{//公共的逻辑
  8.           chunks: 'initial',//从入口文件开始查找
  9.           minSize: 0,//最小分包体积
  10.           minChunks: 2,//
  11.         },
  12.         vendor:{
  13.           priority: 1,
  14.           test:/node_modules/,
  15.           chunks: 'initial',
  16.           minSize: 0,
  17.           minChunks: 2
  18.         }
  19.       }
  20.     }
  21.   },

4. webpack打包原理

webpack 构建流程

Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程 :

  1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数,得出最终的参数。
  2. 开始编译：用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译。
  3. 确定入口：根据配置中的 entry 找出所有的入口文件。
  4. 编译模块：从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。
  5. 完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。
  6. 输出资源：根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。
  7. 输出完成：在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

实践加深理解,撸一个简易 webpack

1. 定义 Compiler 类

  1. class Compiler {
  2.   constructor(options) {
  3.     // webpack 配置
  4.     const { entry, output } = options
  5.     // 入口
  6.     this.entry = entry
  7.     // 出口
  8.     this.output = output
  9.     // 模块
  10.     this.modules = []
  11.   }
  12.   // 构建启动
  13.   run() {}
  14.   // 重写 require函数,输出bundle
  15.   generate() {}
  16. }
  17.

2. 解析入口文件,获取 AST

我们这里使用@babel/parser,这是 babel7 的工具,来帮助我们分析内部的语法,包括 es6,返回一个 AST 抽象语法树。

  1. // webpack.config.js
  2.  
  3. const path = require('path')
  4. module.exports = {
  5.   entry: './src/index.js',
  6.   output: {
  7.     path: path.resolve(__dirname, './dist'),
  8.     filename: 'main.js'
  9.   }
  10. }
  11. //
  12.  
  13. const fs = require('fs')
  14. const parser = require('@babel/parser')
  15. const options = require('./webpack.config')
  16.  
  17. const Parser = {
  18.   getAst: path => {
  19.     // 读取入口文件
  20.     const content = fs.readFileSync(path, 'utf-8')
  21.     // 将文件内容转为AST抽象语法树
  22.     return parser.parse(content, {
  23.       sourceType: 'module'
  24.     })
  25.   }
  26. }
  27.  
  28. class Compiler {
  29.   constructor(options) {
  30.     // webpack 配置
  31.     const { entry, output } = options
  32.     // 入口
  33.     this.entry = entry
  34.     // 出口
  35.     this.output = output
  36.     // 模块
  37.     this.modules = []
  38.   }
  39.   // 构建启动
  40.   run() {
  41.     const ast = Parser.getAst(this.entry)
  42.   }
  43.   // 重写 require函数,输出bundle
  44.   generate() {}
  45. }
  46.  
  47. new Compiler(options).run()
  48.

3. 找出所有依赖模块

Babel 提供了@babel/traverse(遍历)方法维护这 AST 树的整体状态,我们这里使用它来帮我们找出依赖模块。

  1. const fs = require('fs')
  2. const path = require('path')
  3. const options = require('./webpack.config')
  4. const parser = require('@babel/parser')
  5. const traverse = require('@babel/traverse').default
  6.  
  7. const Parser = {
  8.   getAst: path => {
  9.     // 读取入口文件
  10.     const content = fs.readFileSync(path, 'utf-8')
  11.     // 将文件内容转为AST抽象语法树
  12.     return parser.parse(content, {
  13.       sourceType: 'module'
  14.     })
  15.   },
  16.   getDependecies: (ast, filename) => {
  17.     const dependecies = {}
  18.     // 遍历所有的 import 模块,存入dependecies
  19.     traverse(ast, {
  20.       // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)
  21.       ImportDeclaration({ node }) {
  22.         const dirname = path.dirname(filename)
  23.         // 保存依赖模块路径,之后生成依赖关系图需要用到
  24.         const filepath = './' + path.join(dirname, node.source.value)
  25.         dependecies[node.source.value] = filepath
  26.       }
  27.     })
  28.     return dependecies
  29.   }
  30. }
  31.  
  32. class Compiler {
  33.   constructor(options) {
  34.     // webpack 配置
  35.     const { entry, output } = options
  36.     // 入口
  37.     this.entry = entry
  38.     // 出口
  39.     this.output = output
  40.     // 模块
  41.     this.modules = []
  42.   }
  43.   // 构建启动
  44.   run() {
  45.     const { getAst, getDependecies } = Parser
  46.     const ast = getAst(this.entry)
  47.     const dependecies = getDependecies(ast, this.entry)
  48.   }
  49.   // 重写 require函数,输出bundle
  50.   generate() {}
  51. }
  52.  
  53. new Compiler(options).run()
  54.

4. AST 转换为 code

将 AST 语法树转换为浏览器可执行代码,我们这里使用@babel/core 和 @babel/preset-env。

  1. const fs = require('fs')
  2. const path = require('path')
  3. const options = require('./webpack.config')
  4. const parser = require('@babel/parser')
  5. const traverse = require('@babel/traverse').default
  6. const { transformFromAst } = require('@babel/core')
  7.  
  8. const Parser = {
  9.   getAst: path => {
  10.     // 读取入口文件
  11.     const content = fs.readFileSync(path, 'utf-8')
  12.     // 将文件内容转为AST抽象语法树
  13.     return parser.parse(content, {
  14.       sourceType: 'module'
  15.     })
  16.   },
  17.   getDependecies: (ast, filename) => {
  18.     const dependecies = {}
  19.     // 遍历所有的 import 模块,存入dependecies
  20.     traverse(ast, {
  21.       // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)
  22.       ImportDeclaration({ node }) {
  23.         const dirname = path.dirname(filename)
  24.         // 保存依赖模块路径,之后生成依赖关系图需要用到
  25.         const filepath = './' + path.join(dirname, node.source.value)
  26.         dependecies[node.source.value] = filepath
  27.       }
  28.     })
  29.     return dependecies
  30.   },
  31.   getCode: ast => {
  32.     // AST转换为code
  33.     const { code } = transformFromAst(ast, null, {
  34.       presets: ['@babel/preset-env']
  35.     })
  36.     return code
  37.   }
  38. }
  39.  
  40. class Compiler {
  41.   constructor(options) {
  42.     // webpack 配置
  43.     const { entry, output } = options
  44.     // 入口
  45.     this.entry = entry
  46.     // 出口
  47.     this.output = output
  48.     // 模块
  49.     this.modules = []
  50.   }
  51.   // 构建启动
  52.   run() {
  53.     const { getAst, getDependecies, getCode } = Parser
  54.     const ast = getAst(this.entry)
  55.     const dependecies = getDependecies(ast, this.entry)
  56.     const code = getCode(ast)
  57.   }
  58.   // 重写 require函数,输出bundle
  59.   generate() {}
  60. }
  61.  
  62. new Compiler(options).run()
  63.

5. 递归解析所有依赖项,生成依赖关系图

  1. const fs = require('fs')
  2. const path = require('path')
  3. const options = require('./webpack.config')
  4. const parser = require('@babel/parser')
  5. const traverse = require('@babel/traverse').default
  6. const { transformFromAst } = require('@babel/core')
  7.  
  8. const Parser = {
  9.   getAst: path => {
  10.     // 读取入口文件
  11.     const content = fs.readFileSync(path, 'utf-8')
  12.     // 将文件内容转为AST抽象语法树
  13.     return parser.parse(content, {
  14.       sourceType: 'module'
  15.     })
  16.   },
  17.   getDependecies: (ast, filename) => {
  18.     const dependecies = {}
  19.     // 遍历所有的 import 模块,存入dependecies
  20.     traverse(ast, {
  21.       // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)
  22.       ImportDeclaration({ node }) {
  23.         const dirname = path.dirname(filename)
  24.         // 保存依赖模块路径,之后生成依赖关系图需要用到
  25.         const filepath = './' + path.join(dirname, node.source.value)
  26.         dependecies[node.source.value] = filepath
  27.       }
  28.     })
  29.     return dependecies
  30.   },
  31.   getCode: ast => {
  32.     // AST转换为code
  33.     const { code } = transformFromAst(ast, null, {
  34.       presets: ['@babel/preset-env']
  35.     })
  36.     return code
  37.   }
  38. }
  39.  
  40. class Compiler {
  41.   constructor(options) {
  42.     // webpack 配置
  43.     const { entry, output } = options
  44.     // 入口
  45.     this.entry = entry
  46.     // 出口
  47.     this.output = output
  48.     // 模块
  49.     this.modules = []
  50.   }
  51.   // 构建启动
  52.   run() {
  53.     // 解析入口文件
  54.     const info = this.build(this.entry)
  55.     this.modules.push(info)
  56.     this.modules.forEach(({ dependecies }) => {
  57.       // 判断有依赖对象,递归解析所有依赖项
  58.       if (dependecies) {
  59.         for (const dependency in dependecies) {
  60.           this.modules.push(this.build(dependecies[dependency]))
  61.         }
  62.       }
  63.     })
  64.     // 生成依赖关系图
  65.     const dependencyGraph = this.modules.reduce(
  66.       (graph, item) => ({
  67.         ...graph,
  68.         // 使用文件路径作为每个模块的唯一标识符,保存对应模块的依赖对象和文件内容
  69.         [item.filename]: {
  70.           dependecies: item.dependecies,
  71.           code: item.code
  72.         }
  73.       }),
  74.       {}
  75.     )
  76.   }
  77.   build(filename) {
  78.     const { getAst, getDependecies, getCode } = Parser
  79.     const ast = getAst(filename)
  80.     const dependecies = getDependecies(ast, filename)
  81.     const code = getCode(ast)
  82.     return {
  83.       // 文件路径,可以作为每个模块的唯一标识符
  84.       filename,
  85.       // 依赖对象,保存着依赖模块路径
  86.       dependecies,
  87.       // 文件内容
  88.       code
  89.     }
  90.   }
  91.   // 重写 require函数,输出bundle
  92.   generate() {}
  93. }
  94.  
  95. new Compiler(options).run()
  96.

6. 重写 require 函数,输出 bundle

  1. const fs = require('fs')
  2. const path = require('path')
  3. const options = require('./webpack.config')
  4. const parser = require('@babel/parser')
  5. const traverse = require('@babel/traverse').default
  6. const { transformFromAst } = require('@babel/core')
  7.  
  8. const Parser = {
  9.   getAst: path => {
  10.     // 读取入口文件
  11.     const content = fs.readFileSync(path, 'utf-8')
  12.     // 将文件内容转为AST抽象语法树
  13.     return parser.parse(content, {
  14.       sourceType: 'module'
  15.     })
  16.   },
  17.   getDependecies: (ast, filename) => {
  18.     const dependecies = {}
  19.     // 遍历所有的 import 模块,存入dependecies
  20.     traverse(ast, {
  21.       // 类型为 ImportDeclaration 的 AST 节点 (即为import 语句)
  22.       ImportDeclaration({ node }) {
  23.         const dirname = path.dirname(filename)
  24.         // 保存依赖模块路径,之后生成依赖关系图需要用到
  25.         const filepath = './' + path.join(dirname, node.source.value)
  26.         dependecies[node.source.value] = filepath
  27.       }
  28.     })
  29.     return dependecies
  30.   },
  31.   getCode: ast => {
  32.     // AST转换为code
  33.     const { code } = transformFromAst(ast, null, {
  34.       presets: ['@babel/preset-env']
  35.     })
  36.     return code
  37.   }
  38. }
  39.  
  40. class Compiler {
  41.   constructor(options) {
  42.     // webpack 配置
  43.     const { entry, output } = options
  44.     // 入口
  45.     this.entry = entry
  46.     // 出口
  47.     this.output = output
  48.     // 模块
  49.     this.modules = []
  50.   }
  51.   // 构建启动
  52.   run() {
  53.     // 解析入口文件
  54.     const info = this.build(this.entry)
  55.     this.modules.push(info)
  56.     this.modules.forEach(({ dependecies }) => {
  57.       // 判断有依赖对象,递归解析所有依赖项
  58.       if (dependecies) {
  59.         for (const dependency in dependecies) {
  60.           this.modules.push(this.build(dependecies[dependency]))
  61.         }
  62.       }
  63.     })
  64.     // 生成依赖关系图
  65.     const dependencyGraph = this.modules.reduce(
  66.       (graph, item) => ({
  67.         ...graph,
  68.         // 使用文件路径作为每个模块的唯一标识符,保存对应模块的依赖对象和文件内容
  69.         [item.filename]: {
  70.           dependecies: item.dependecies,
  71.           code: item.code
  72.         }
  73.       }),
  74.       {}
  75.     )
  76.     this.generate(dependencyGraph)
  77.   }
  78.   build(filename) {
  79.     const { getAst, getDependecies, getCode } = Parser
  80.     const ast = getAst(filename)
  81.     const dependecies = getDependecies(ast, filename)
  82.     const code = getCode(ast)
  83.     return {
  84.       // 文件路径,可以作为每个模块的唯一标识符
  85.       filename,
  86.       // 依赖对象,保存着依赖模块路径
  87.       dependecies,
  88.       // 文件内容
  89.       code
  90.     }
  91.   }
  92.   // 重写 require函数 (浏览器不能识别commonjs语法),输出bundle
  93.   generate(code) {
  94.     // 输出文件路径
  95.     const filePath = path.join(this.output.path, this.output.filename)
  96.     // 懵逼了吗? 没事,下一节我们捋一捋
  97.     const bundle = `(function(graph){
  98.       function require(module){
  99.         function localRequire(relativePath){
  100.           return require(graph[module].dependecies[relativePath])
  101.         }
  102.         var exports = {};
  103.         (function(require,exports,code){
  104.           eval(code)
  105.         })(localRequire,exports,graph[module].code);
  106.         return exports;
  107.       }
  108.       require('${this.entry}')
  109.     })(${JSON.stringify(code)})`
  110.  
  111.     // 把文件内容写入到文件系统
  112.     fs.writeFileSync(filePath, bundle, 'utf-8')
  113.   }
  114. }
  115.  
  116. new Compiler(options).run()
  117.

7. 看完这节,彻底搞懂 bundle 实现

我们通过下面的例子来进行讲解,先死亡凝视 30 秒

  1. ;(function(graph) {
  2.   function require(moduleId) {
  3.     function localRequire(relativePath) {
  4.       return require(graph[moduleId].dependecies[relativePath])
  5.     }
  6.     var exports = {}
  7.     ;(function(require, exports, code) {
  8.       eval(code)
  9.     })(localRequire, exports, graph[moduleId].code)
  10.     return exports
  11.   }
  12.   require('./src/index.js')
  13. })({
  14.   './src/index.js': {
  15.     dependecies: { './hello.js': './src/hello.js' },
  16.     code: '"use strict";\n\nvar _hello = require("./hello.js");\n\ndocument.write((0, _hello.say)("webpack"));'
  17.   },
  18.   './src/hello.js': {
  19.     dependecies: {},
  20.     code:
  21.       '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nexports.say = say;\n\nfunction say(name) {\n  return "hello ".concat(name);\n}'
  22.   }
  23. })
  24.

step 1 : 从入口文件开始执行

  1. // 定义一个立即执行函数,传入生成的依赖关系图
  2. ;(function(graph) {
  3.   // 重写require函数
  4.   function require(moduleId) {
  5.     console.log(moduleId) // ./src/index.js
  6.   }
  7.   // 从入口文件开始执行
  8.   require('./src/index.js')
  9. })({
  10.   './src/index.js': {
  11.     dependecies: { './hello.js': './src/hello.js' },
  12.     code: '"use strict";\n\nvar _hello = require("./hello.js");\n\ndocument.write((0, _hello.say)("webpack"));'
  13.   },
  14.   './src/hello.js': {
  15.     dependecies: {},
  16.     code:
  17.       '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nexports.say = say;\n\nfunction say(name) {\n  return "hello ".concat(name);\n}'
  18.   }
  19. })
  20.

step 2 : 使用 eval 执行代码

  1. // 定义一个立即执行函数,传入生成的依赖关系图
  2. ;(function(graph) {
  3.   // 重写require函数
  4.   function require(moduleId) {
  5.     ;(function(code) {
  6.       console.log(code) // "use strict";\n\nvar _hello = require("./hello.js");\n\ndocument.write((0, _hello.say)("webpack"));
  7.       eval(code) // Uncaught TypeError: Cannot read property 'code' of undefined
  8.     })(graph[moduleId].code)
  9.   }
  10.   // 从入口文件开始执行
  11.   require('./src/index.js')
  12. })({
  13.   './src/index.js': {
  14.     dependecies: { './hello.js': './src/hello.js' },
  15.     code: '"use strict";\n\nvar _hello = require("./hello.js");\n\ndocument.write((0, _hello.say)("webpack"));'
  16.   },
  17.   './src/hello.js': {
  18.     dependecies: {},
  19.     code:
  20.       '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nexports.say = say;\n\nfunction say(name) {\n  return "hello ".concat(name);\n}'
  21.   }
  22. })
  23.

可以看到,我们在执行"./src/index.js"文件代码的时候报错了,这是因为 index.js 里引用依赖 hello.js,而我们没有对依赖进行处理,接下来我们对依赖引用进行处理。

step 3 : 依赖对象寻址映射,获取 exports 对象

  1. // 定义一个立即执行函数,传入生成的依赖关系图
  2. ;(function(graph) {
  3.   // 重写require函数
  4.   function require(moduleId) {
  5.     // 找到对应moduleId的依赖对象,调用require函数,eval执行,拿到exports对象
  6.     function localRequire(relativePath) {
  7.       return require(graph[moduleId].dependecies[relativePath]) // {__esModule: true, say: ƒ say(name)}
  8.     }
  9.     // 定义exports对象
  10.     var exports = {}
  11.     ;(function(require, exports, code) {
  12.       // commonjs语法使用module.exports暴露实现,我们传入的exports对象会捕获依赖对象(hello.js)暴露的实现(exports.say = say)并写入
  13.       eval(code)
  14.     })(localRequire, exports, graph[moduleId].code)
  15.     // 暴露exports对象,即暴露依赖对象对应的实现
  16.     return exports
  17.   }
  18.   // 从入口文件开始执行
  19.   require('./src/index.js')
  20. })({
  21.   './src/index.js': {
  22.     dependecies: { './hello.js': './src/hello.js' },
  23.     code: '"use strict";\n\nvar _hello = require("./hello.js");\n\ndocument.write((0, _hello.say)("webpack"));'
  24.   },
  25.   './src/hello.js': {
  26.     dependecies: {},
  27.     code:
  28.       '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nexports.say = say;\n\nfunction say(name) {\n  return "hello ".concat(name);\n}'
  29.   }
  30. })
  31.

这下应该明白了吧 ~ 可以直接复制上面代码到控制台输出哦~

https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/120329

推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号