Webpack 简书入门教程 (二) chunkhash、contenthash、devserver、localhost、HMR、babel-loader、tree shaking、resolve

Webpack 简书入门教程 (二) chunkhash、contenthash、webpack-dev-server、localhost、HMR （Hot Module Replacement，热模块替换）、babel-loader、thread-loader、 tree shaking、resolve

总结：

• 术语介绍

  • chunk name
    • 多入口 chunkname 为其key值，单入口不指定key则默认为main
  • chunkhash
    • 根据 chunk 的内容生成的 hash
    • 同一个 chunk中，只要其中一个文件内容改变，其 chunkhash 就会改变
  • contenthash
    • 单个输出文件内容的 hash，或者说 bundle 的 hash

• webpack-dev-server（localhost）

  • 可以在每次修改后，自动打包并刷新页面

  • webpack-dev-server 是 webpack 官方提供的一个小型 Express 服务器。使用它可以为 webpack 打包生成的资源文件提供web服务。

  • 步骤

    • 首先需要安装 webpack-dev-server，接着在 package.json 中添加一个脚本
    • 在命令行执行 npm start 即可（start 是一个特殊的命令，不同于其他命令，直接 npm start 就行，中间不需要 run）

  • devServer 是可以自动打开浏览器的

    • 简单配置

      // webpack.config.js
      module.exports = {
                
        // ...
        devServer: {
                
          open: true, // 自动打开浏览器，下面三项不是必须的
          host: "0.0.0.0", // 如果希望被局域网访问，设为 0.0.0.0，默认 localhost
          port: "8888",  // 端口，默认 8080
          useLocalIp: true // 使用本地ip，如果 host 设置 0.0.0.0，请将此参数设为 true，否则结果就会像下面这样
        }
      }
      

  • HMR （Hot Module Replacement，热模块替换）技术

    • 每次修改完内容保存自动刷新页面，看起来没有什么问题，但是当我们的项目很庞大的时候，就会显得特别的慢

    • 因此我们需要使用 devServer 提供的 HMR （Hot Module Replacement，热模块替换）技术

    • 在 devServer 中添加一个参数即可开启热更新

      hot: true // webpack 会自动引入 HotModuleReplacementPlugin 插件
      

    • 修改完配置需要重新启动

    • js文件会自动更新，css不会自动更新， MiniCssExtractPlugin.loader 默认是不支持热更新的，修改为之前的 style-loader（默认支持热更新）

  • devServer的其他常用配置

    devServer: {
            
      contentBase: path.resolve(__dirname, "public"), // 告诉服务器从哪里提供内容，默认为当前工作目录
      wacthContentBase: true, // 监视 contentBase 里面的内容，一旦变化就 reload，
      watchOptions: {
            
        ignore: "", // 忽略哪些文件的变化
      },
      historyApiFallback: true, // 请求的资源不存在时返回 index.html，比如 vue-router 的 history 模式
      clientLogLevel: "none", // 不要显示启动日志信息
      overlay: false, // 如果出错了，不要全屏提示 
      progress: true, // 控制台输出运行进度
      compress: true, // 启用 gzip 压缩
      proxy: {
             // 设置代理
        "/api": {
             // 当 url 中含有 /api 时就会使用这里设置的代理
          target: "http://xxxx.com", // 目标服务器地址
          changeOrigin: true, // 跨域
          ws: true, // 代理websocket
          pathRewrite: {
            
            "^/api": "" // url 重写，将 url 里面的 /api 去掉
          }
        }
      }
    }
    

• IE浏览器兼容

  • babel
    • 需要安装
      • babel-loader
      • @babel/core（babel核心库，核心 api 都在这里）
      • @babel/preset-env（babel 预设，babel 是插件化的，转换不同的语法，需要不同的插件，预设的作用就是按需引入插件）只能转换高阶的语法，并不能转换高阶的 API
      • @babel/polyfill 来处理这些高阶的 API
  • thread-loader
    • 当项目里的 js 文件越来越多时，babel 转换耗时会越来越长，可以使用 babel 缓存及多进程打包来提高速度

• tree shaking

  • 移除文件中未被引用使用的代码，它依赖于 ES6 模块语法的静态结构特性，例如 import 和 export
  • 两个条件
    • 使用 es6 模块化语法（使用 babel 时记得设置参数 modules 为 false）
    • 生产模式打包（默认开启 tree shaking）

• resolve

  • 设置模块如何被解析
  • alias：为路径设置别名，让引入变得更简单
  • extensions：引入哪些类型的文件时可以省略后缀名
  • modules：解析模块时应该搜索的目录

• externals

  • 设置某些库不被打包，而是运行时去外部获取

• watch

  • 初始构建之后，继续监听任何已解析文件的更改

• devtool

  • 控制如何生成 source map
  • source map 是一个信息文件，保存源代码与打包后代码的映射关系，帮助我们快速定位报错的代码

六.理解name、hash、chunkhash、contenthash

• name：chunk name，chunk的名称
  多入口 chunkname 为其key值，单入口不指定key则默认为main，异步加载的模块默认为数字

• hash：每次打包生成的hash，见上图
  项目中任意与打包相关的文件内容改变（包括配置文件），此hash就会改变
• chunkhash：根据 chunk 的内容生成的 hash

修改前面例子中的 js 及 css 输出名称为 [chunkhash:10]，然后打包

output: {
   
  filename: "js/[chunkhash:10].js",  // :10 表示取前面10 位
  path: path.resolve(__dirname, "./dist"