likes
comments
collection
share

webpack4核心概念（学习笔记）

作者站长头像
站长
· 阅读数 48

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

webpack4核心概念（学习笔记）

  • 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
    }
})