webpack4核心概念(学习笔记)

1.babel

AST抽象语法树 是源代码的抽象语法结构的树状表现形式,其产生分为两个过程

  • 分词(tokenize),又称为词法分析,其作用就是将一行行的源码拆解成一个个token。所谓token,指的是语法上不可能再分的、最小的单个字符或字符串。
  • 解析(parse),又称为语法分析,起作用是将上一步生成的token数据,根据语法规则转换为AST。

AST的应用 bebal、eslint等工具库的核心都是通过其来实现对代码的检查、分析等操作。

  • 语法检查、代码风格检查、格式化代码、语法高亮、错误提示、自动补全等
  • 代码混淆压缩
  • 优化变更代码,改变代码结构等

babel的流程 babel的出现是为了将es6的语法转换成es5的语法,转换过程是,先将代码转换成AST,然后,再将AST树通过深度遍历的方式借助其他插件进行节点修改,生成只包含es5语法的AST树。

babel的使用 需要用到两个工具包 @babel/core、@babel/preset-env。
当我们配置 babel 的时候,不管是在 .babelrc 或者 babel.config.js 文件里面配置的都有 presets 和 plugins 两个主要配置项

{
  "presets": ["@babel/preset-env"],
  "plugins": []
}

babel 核心包并不会去转换代码,核心包只提供一些核心 API,真正的代码转换工作由插件或者预设来完成

  • 单一功能的实现,比如要转换箭头函数,会用到@babel/plugin-transform-arrow-function这个plugin,添加在plugins数组即可。

  • 当需要转换的要求增加时,这时配置的预设presets中的@babel/preset-env就发挥作用, @babel/core 就会去找 preset-env预设的插件包,presets是一套plugins的集合,一个presets内部包含了很多plugin。

2.tree-shaking

概念: 打包过程中消除无用的代码,这些无用的代码特点是:
无用代码消除可以称之为DCE(dead code elimination),这些代码指的是:

  • 代码不会被执行,不可到达
  • 代码执行的结果不会被用到
  • 代码只会影响死变量(只写不读)

原理: 首先对代码利用ES6的特点进行静态分析,标记注释,然后,利用uglify进行无用代码的擦除。ES6模块特点是:

  • 只能作为模块顶层的语句出现
  • import的模块名只能是字符串常量
  • import binding是immutable的

3.webpack-dev-server

image.png

  • Webpack Compile:将JS编辑成Bundle
  • HMR Server:将热更新的文件输出给HMR Runtime
  • Bundle server:提供文件在浏览器的访问
  • HMR Runtime: 会被注入到浏览器,更新文件变化
  • bundle.js: 构建输出的文件
    文件代码会将js的源代码通过webpack compiler打包成bundle.js,其中,Bundle Server会提供服务,让浏览器通过localhost:8080的方式去访问bundle.js资源。同时,在打包阶段HMR runtime也会被注入到浏览器中,当HMR Server有文件更新的时候,以websocket的方式通知浏览器中bundle.js文件的HMR runtime进行更新,浏览器进行无刷新的页面更新。
    示例:
    webpack.config.js文件
plugins: [
    new webpack.HotModuleReplacementPlugin()
],
devServer: {
    contentBase: './dist',
    hot: true
},

package.json文件中的 scrpits 增加

"dev": "webpack-dev-server --open"

4.文件指纹

  • Hash: 和整个项目的构建都有关系,只要项目文件有修改,整个项目的hash都会发生变化,一般主要用于图片、字体等资源
  • Chunkhash: 和webpack打爆的chunk有关,不同的entry会生成不同的chunkhash值,主要用于js文件资源
  • Contenthhash:根据文件内容来定义hash,文件内容不变,则contenthash不变,主要用于样式文件资源

5.文件注入

  • mini-css-extract-plugin将css文件单独打包
new MiniCssExtractPlugin({
    filename: '[name]_[contenthash:8].css'
}),
  • optimize-css-assets-webpack-plugin进行css资源的压缩和打包
new OptimizeCSSAssetsPlugin({
    assetNameRegExp: /\.css$/g,
    cssProcessor: require('cssnano')
}),
  • html-webpack-plugin压缩html文件,并js文件自动注入
new HtmlWebpackPlugin({
    template: path.join(__dirname, 'src/index.html'),
    filename: 'index.html',
    chunks: ['index'],
    inject: true,
    minify: {
        html5: true,
        collapseWhitespace: true,
        preserveLineBreaks: false,
        minifyCSS: true,
        minifyJS: true,
        removeComments: false
    }
})
© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容