Webpack (五) -- JSX 和静态资源打包

Webpack (五) -- JSX 和静态资源打包

Babel 中主要两个概念 presets 和 plugins

presets 可以看作一系列 plugins 的集合，

@babel/preset-env 解析 es6 语法
@babel/preset-react 解析 jsx

JSX 解析

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [["@babel/plugin-transform-runtime"]] // 解析 async await
}

在 webpack.config 中配置 babel-loader

热更新原理

• Webpack Compile:

  将 JS 编译成 bundle

• HMR Server

  将热更新文件传递给 HMR runtime

• Bundle Server

  提供文件在浏览器的访问

• HMR Runtime

  注入到浏览器，更新文件变化

静态资源内联

• 防止首屏没有加载完成 css 发生的界面抖动
• 减少 http 请求

• HTML JS 内联 -- row-loader
• CSS 内联 -- html-inline-css-plugin

静态资源集中输出 copy-webpack-plugins

    new CopyWebpackPlugin({
      patterns: [{ from: path.resolve(__dirname, 'public'), to: path.resolve(__dirname, 'dist') }],
    }),