利用插件机制横向扩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 代理

    处理跨域请求

你可能感兴趣的:(利用插件机制横向扩webpack构建能力)