• webpack插件机制，增强webpack在自动化方面的能力
    • loader实现资源引用
    • plugin实现其他自动化工作
      • 比如清除dist目录
      • 拷贝静态文件到输出目录
      • 压缩代码

    • 常用插件

      • 清理dist目录
        • clean-webpack-plugin
      • 自动生成使用打包结果的html
        • html-webpack-plugin
        • 通过webpack输出html
        • 不需要手动硬编码，确保路径引用正确
      • 修改生成的文件的标题
        • 添加参数
      • 也可以创建模板
        • 参数 template引入
      • 同时输出多个页面
      • 拷贝静态文件
        • copy-webpack-plugin
          1. plugins: [
          2. new CleanWebpackPlugin(),
          3. new HtmlWebpackPlugin({
          4.     title: "webpack plugin sample", //标题
          5.     meta: {
          6.         viewport: "width=device-width",
          7.     },
          8.     template: "./src/index.html",
          9. }),
          10. //第二个html
          11. new HtmlWebpackPlugin({
          12.     filename: "about.html",
          13. }),
          14. //传入输出，拷贝文件路径
          15. new CopyWebpackPlugin({
          16.     patterns:[
          17.         {from:"public"}
          18.     ]
          19. })
          20. ],

    • 开发一个插件

      • plugin通过钩子机制实现

      • 是一个函数或者一个包含apply方法的对象

        1. class MyPlugin {
        2. apply(compiler) {
        3.    console.log("MyPlugin启动")
        4.    compiler.hooks.emit.tap("MyPlugin", (compilation) => {
        5.        //compilation此次打包的上下文
        6.        for (const name in compilation.assets) {
        7.            // console.log(compilation.assets[name].source())
        8.            if (name.endsWith(".js")) {
        9.                const contents = compilation.assets[name].source()
        11.                const withoutComments = contents.replace(/\/\*\*+\*\//g,'')
        12.                compilation.assets[name] = {
        13.                    source: () => withoutComments,
        14.                    size: () => withoutComments.length,
        15.                }
        16.            }
        17.        }
        18.    })
        19. }
        20. }

    • webpack dev server

      • 集成自动编译和自动刷新浏览器
      • webpack dev server 访问静态资源

    • webpack dev server代理api

      1. devServer: {
      2.       contentBase: "./public",
      3.       //代理
      4.       proxy: {
      5.           "/api": {
      6.               target: "https://api.github.com",
      7.               // 将'/api'去除
      8.               pathRewrite: {
      9.                   "^/api": "",
      10.               },
      11.               //不使用localost:8080作为github主机名
      12.               changeOrigin: true,
      13.           },
      14.       },
      15.   },

    • Source Map

      • 映射转换后的代码和源代码的关系
      • 解决编写的代码和运行的代码不对应产生的调试问题

    • webpack配置source map

      • eval 是否使用eval执行模块代码
      • cheap sourcemap是否包含行信息
      • module 是否得到loader处理之前的源代码
      • 合适的source map
        • 开发环境
          • cheap-module-eval-source-map
            • 行不长
            • 使用框架之后Loader之后差异大，选择module
            • 首次打包速度慢但是重写打包相对较快
          • 上线前 是None 或者 nosources-source-map
            • 不暴露源代码
      • webpack自动刷新的问题
        • 不会保留操作状态
      • 页面不刷新时候及时更新
        • HMR 模块热更新
          • 开启HMR 运行webpack-dev-server —hot

      • webpack使用hdm api来处理模块的热更新

        • module.hot.accept
        • 处理js模块的热更新
        • 处理图片的热更新
          • 重新设置图片的src ```javascript module.hot.accept(“./editor.js”, () => { const value = lastEditor.innerHTML

        document.body.removeChild(editor) const newEditor = createEditor() newEditor.innerHTML = value document.body.appendChild(newEditor) lastEditor = newEditor }) module.hot.accept(‘./better.png’,()=>{ img.src = background

    }) ```

    • HMR注意事项
      • 使用hotOnly 可以捕获配置hmr的错误
    • webpack生成环境优化
      • mode的用法
        • 生产模式
        • 为不同工作环境创建不同配置
      • 根据环境不同导出不同配置
      • 一个环境对应一个配合文件
        • 三个不同的webpack配置文件
          • 两个不同环境的配置
          • 一个共用的配置
    • webpack DefinePlugin
      • 为代码注入全局成员
        • process.env.NODE_ENV
          • 通过这个成员判断当前的运行环境