利用插件机制横向扩webpack构建能力

webpack插件机制是为了增强webpack在项目自动化构建方面的能力（解决除loader资源模块打包外的其他自动化工作）

常见应用场景：

• 实现自动在打包之前清除dist目录，clean-webpack-plugin

  每次打包都会覆盖到dist目录，只能覆盖同名文件，需要配置output.path

• 自动生成应用所需的HTML文件，html-webpack-plugin

  在html中自动注入webpack打包生成的bundle

• 根据不同环境为代码注入类似API地址这种可能变化的部分

• 拷贝不需要参与打包的资源文件到输出目录，copy-webpack-plugin

• 压缩webpack打包完成后输出的文件

• 自动发布打包结果到服务器实现自动部署

开发一个插件

webpack的插件机制是软件开发中最常见的钩子机制（类似web中的事件）

在webpack整个工作过程有很多环节，便于插件的扩展，webpack在每个环节都埋下一颗钩子，这样开发插件的时候，通过往这些节点挂在不同的任务，就可以轻松扩展webpack的能力

需求：清除webpack打包结果的注释

探索webpack运行机制和核心工作原理

了解webpack整个工作过程细节 （查阅代码）
例子

使用Dev Server提高本地开发效率

开发过程：编写源代码 --> webpack打包 --> 运行应用 --> 浏览器查看

提高开发效率（webpack已经提供相应功能）

1. 使用 HTTP 服务运行而不是文件形式预览，一来更接近生产环境状态，二来项目使用AJAX等API

2. 修改代码后webpack自动构建，浏览器即时显示最新结果

3. 提供Source Map支持，快速定位源代码位置

webpack自动编译

使用webpack-cli提供的watch工作模式

1. 启动添加--watch参数，打包完成cli不会退出

2. 初次构建后，项目中源文件会被监视

3. 发生更改，webpack会自动重新运行打包任务

此时开发体验修改代码 → Webpack 自动打包 → 手动刷新浏览器 → 预览运行结果

需要用到serve 直接运行静态资源 serve dist

接着使用BrowserSync实现浏览器自动刷新 browser-sync dist --watch

此时开发体验 修改代码 → Webpack 自动打包 → 自动刷新浏览器 → 预览运行结果

原理：webpack监视源代码变化，自动打包，dist 目录被BrowserSync监听，自动编译并刷新浏览器
例子

Webpack Dev Server

官方推出开发工具，提供开发服务器，集成自动编译和自动刷新浏览器

使用需要通过npm引入

运行webpack-dev-server过程

1. 内部启动一个Http server，为打包结果提供静态文件服务，并自动使用webpack打包我们应用

2. 监听源代码变化，变化后重新打包

   
   image-20201113142533359.png

配置选项

devServer专门用来为webpack-dev-server提供配置

// ./webpack.config.js
const path = require("path");
module.exports = {
  // ...
  devServer: {
    proxy: {
      "/api": {
        target: "https://api.github.com",
        pathRewrite: {
          "^/api": "" // 替换掉代理地址中的 /api
        },
        changeOrigin: true // 确保请求 GitHub 的主机名就是：api.github.com
      }
    },
    contentBase: path.join(__dirname, "dist"), // 静态资源路径 开发阶段最好不要使用copyWebpackPlugin插件
    compress: true,
    port: 9000
    // ...
    // 详细配置文档：https://webpack.js.org/configuration/dev-server/
  }
};

例子

webpack常用功能

• 静态资源访问

  contentBase 指定额外的静态资源路径，类似copy-webpack-plugin

• Proxy 代理

  处理跨域请求