从零搭一个极简版webpack+React工程（五）

前言

书接上文，在之前章节作者已经完成完成webpack的一些配置，包括支持react、Typescript、样式引入、打包代码压缩

本章讲述一些其他好用的webpack配置

webpackbar

当前工程在执行npm run build 或者 npm start 时只能默默的等待终端控制台输出，理想的控制台作者希望可以看到webpack执行进度。所以这里作者使用了webpackbar这个插件，可以在执行npm run build 或者 npm start 时让终端控制台显示当前进度

安装

npm i webpackbar -D
复制代码

修改 webpack.common.js

引入webpackbar
plugins 使用 WebpackBar

// other
const WebpackBar = require("webpackbar")
module.exports = {
// other
 plugins: [
   // other
    new WebpackBar(),
  ],
// other
}
复制代码

效果

重新执行 npm run build可以看到下图效果

webpack-bundle-analyzer

这是一个打包文件分析工具，让每个文件大小可视化，这样就可以在优化相关文件时快速找到需要优化的模块

安装

npm i webpack-bundle-analyzer -D
复制代码

修改 webpack.prod.js

因为只有打包生产代码时才需要知道哪些需要优化，所以咱们只需要修改webpack.prod.js即可

// other
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin")
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin
module.exports = merge(common, {
  mode: "production",
  plugins: [
   // other
    new BundleAnalyzerPlugin(),
  ],
})

复制代码

效果

重新执行 npm run build浏览器 http://localhost:8888/ 可以看到下图效果

注意：这里的端口号和开发启动的端口号一致

终端控制台

减小生产包体积

通过 webpack-bundle-analyzer 这个插件可以看到，当前生产包占用体积最大的事react-dom.production.min.js这个文件；这个文件是react-dom文件且已经压缩过了，代码还能如何减小呢？

Externals

严格来说使用 Externals 并不是优化代码，而是将一些代码从输出的 bundle 中排除。因为 bundle 将代码排除，所以bundle体积会变小，但是bundle代码时需要这些依赖的。这些依赖包需要通过 script 标签的形势引入到 html 文件中。否则 bundle 将不能正常运行

修改 webpack.common.js

module.exports = {
// other

 externals: {
    react: "React",
    "react-dom": "ReactDOM",
  },
}
复制代码

修改 tempate.html

新增两个script标签，引入 react和react-dom

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
</html>

复制代码

效果

重新执行 npm run build浏览器 http://localhost:8888/ 可以看到下图效果

终端控制台

打包后的 index.js 从 127k 降低到 1k 一下;当然这是因为作者在react中代码比较简单，实际开发过程中打包后文件肯定不止这些；这里只是演示如何排除一些通过script标签引入的依赖包。

不只是 react 和 react-dom ；还有 react-redux 、bizCharts 等这些包