webpack 5 笔记（上）

最新推荐文章于 2024-07-05 17:02:50 发布
最新推荐文章于 2024-07-05 17:02:50 发布
阅读量226 收藏
点赞数
分类专栏： webpack 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanzi_0216/article/details/121539843
版权

webpack 5 笔记（上）

webpack 的作用

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。

它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

webpack 会从一个入口文件开始，根据它依赖到的模块开始逐级进行文件的处理和打包。

webpack 五个核心概念

Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader

Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)

Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。

Mode

模式Value特点
development会将 DefinePlugin 中 process.env.NODE_ENV 的值设置 为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。能让代码本地调试 运行的环境
production会将 DefinePlugin 中 process.env.NODE_ENV 的值设置 为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin/TerserPlugin（webpack 4.26 以下使用 UglifyJsPlugin 压缩 JS 代码，以上的版本使用 TerserPlugin 压缩 JS 代码）。能让代码优化上线 运行的环境

webpack 初始化

webpack5.11和webpack-cli4.3.1的同学直接用老师的命令打包会报错。应该使用webpack --entry ./src/index.js -o ./build --mode=development 或者直接使用npx webpack默认打包src下的index到dist文件夹下的main.js

初始配置

  1. 初始化 package.json ：npm init

  2. 下载并安装 webpack

    全局安装：npm install webpack webpack-cli -g

    局部安装（项目安装）：npm install webpack webpack-cli -D

打包编译

  1. 创建 webpack.config.js 文件

  2. 运行指令

    开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development

    功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。

    生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production

    功能：在开发配置功能上多一个功能，压缩代码。

  3. 结论

    1. webpack 能够编译打包 js 和 json 文件。
    2. 能将 es6 的模块化语法转换成浏览器能识别的语法。
    3. 能压缩代码。

  4. 问题

    1. 不能编译打包 css、img 等文件。
    2. 不能将 js 的 es6 基本语法转化为 es5 以下语法。

开发环境配置

打包样式资源 + html 文件

创建文件 webpack.config.js

/*
  webpack.config.js  webpack 的配置文件
    作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）

    所有构建工具都是基于 nodejs 平台运行的~模块化默认采用 commonjs。
    
    所以  webpack.config.js 中使用的模块化是 commonjs，而一般前端项目中使用的模块化是 es6 模块化
*/

/*
  loader: 1. 下载   2. 使用（配置loader）
  plugins: 1. 下载  2. 引入  3. 使用
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
// 用于生成或使用已有的 html 文件模板，并将编译打包生成的文件自动引入到该模板文件中
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量，代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader处理
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序：从右到左，从下到上 依次执行
          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          // 需要下载 less-loader和less
          'less-loader'
        ]
      }
    ]
  },
  // plugins的配置
  plugins: [
    // 详细plugins的配置
    // html-webpack-plugin
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html'
    })
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

打包图片资源

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        // 要使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 问题：默认处理不了html中img图片
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // 使用一个loader
        // 下载 url-loader file-loader
        loader: 'url-loader',
        options: {
          // 图片大小小于8kb，就会被base64处理
          // 优点: 减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024, // 图片大小小于8kb，就会被base64处理
          // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
          // 解析时会出问题：[object Module]
          // 解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          // 给图片进行重命名
          // [hash:10]取图片的hash的前10位
          // [ext]取文件原来扩展名
          name: '[hash:10].[ext]'
        }
      },
      {
        test: /\.html$/,
        // 处理 html 文件中的 img 图片（负责引入 img，从而能被 url-loader 进行处理）
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

P.S. 版本原因可能出现的配置差异

    // 处理html中的img图片问题，在webpack5中html-loader中也需要配置，esModule为false,否则还是不生效，像下面这样
    {
      test: /\.html$/,
      /**
       * html-loader可以处理html中的img图片，可负责将其中的图片引入，然后交由url-loader进行解析
       */
      loader: html-loader,
      options: {
        esModule: false
      }
    }
    // 如果还是不行，就把 html-loade r换成弹幕里一个人说的 html-withimg-loader 就可以了

打包其他资源


  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 打包其他资源(除了html/js/css资源以外的资源)
      {
        // 排除css/js/html资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },

devServer

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 打包其他资源(除了html/js/css资源以外的资源)
      {
        // 排除css/js/html资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',

  // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
  // 特点：只会在内存中编译打包，不会有任何输出保存在本地；一旦重新编译或关闭项目，就会删除内存中的打包文件。
  // 启动devServer指令为：npx webpack-dev-server （全局安装的 webpack 可以直接使用 webpack 命令进行启动；而 devServer 是局部安装，所以要带上 npx 命令进行启动，类似于 creact-react-app ??）
  devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
  }
};

开发环境配置总结

/*
  开发环境配置：能让代码运行
    运行项目指令：
      webpack 会将打包结果输出出去
      npx webpack-dev-server 只会在内存中编译打包，没有输出
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          // 相对于 output 中设置的路径的相对路径，用于指定图片资源编译打包后的输出路径
          outputPath: 'imgs'
        }
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          // 输出位置
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
};

生产环境配置

css 文件处理

提取 css 成单独文件

  1. 下载插件： npm install --save-dev mini-css-extract-plugin

  2. 修改配置文件

    const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 创建style标签，将样式放入
          // 'style-loader', 
          // 这个loader取代style-loader。作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          // 将css文件整合到js文件中
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名，路径相对于 output 中的路径配置
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
};
css 兼容性处理

  1. 下载 loader：npm install --save-dev postcss-loader postcss-preset-env

    postcss-preset-env 的作用：帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式

  2. 配置文件

    const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          /*
            css兼容性处理：postcss --> postcss-loader postcss-preset-env
           postcss-preset-env 的作用：帮 postcss 找到 package.json 中 browserslist 里面的配置，通过配置加载指定的css兼容性样式
					如果没有设置 nodejs 环境变量，就会默认按照 browserslist 中的生产环境的配置进行加载 css 兼容性样式；设置 nodejs 环境变量为 process.env.NODE_ENV = 'development'则会按照开发环境配置进行加载 css 兼容性样式
           
          */
          // 使用loader的默认配置
          // 'postcss-loader',
          // 修改loader的配置
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
};

  3. package.json（更多的 browserslist 配置可以在 github 上查看）

    {
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }
  "browserslist": {
    // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
    "development": [
      "last 1 chrome version", // 最近的一个版本
      "last 1 firefox version",
      "last 1 safari version"
    ],
    // 生产环境：默认是看生产环境
    "production": [
      ">0.2%", // 市场份额大于 0.2% 的浏览器
      "not dead",
      "not op_mini all"
    ]
  }
}

P.S. 版本原因可能出现的配置差异

{
  test: /\.css$/,
  use: [
    // style-loader,   // 创建style标签，将样式放入
    MiniCssExtractPlugin.loader, // 取代style-loader，提取JS中的css，成单独文件
    css-loader, // 将css文件整合到js文件中

    /**
     * css兼容性处理
     */
    {
      loader: postcss-loader,
      options: {
        postcssOptions: {
          // webpack 4配置
          // ident: postcss,
          // plugins: () = [
          //   require(postcss-preset-env)()
          // ]
          // webpack 5配置
          plugins: [require(postcss-preset-env)()]
        }
      }
    }
  ]
}
css 压缩

  1. 下载插件： npm install --save-dev optimize-css-assets-webpack-plugin

  2. 调用插件

    const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩 css 文件的插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      ...
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin()
  ],
  mode: 'development'
};

js 文件处理

eslint 语法检查

  1. 安装 loader：npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

    eslint-config-airbnb-base：包含 es6+

    eslint-config-airbnb：相比于 eslint-config-airbnb-base 还包括 react 风格建议

    （根据实际情况进行选择下载）

  2. 修改配置文件

    const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      /*
        语法检查： eslint-loader  eslint
          注意：只检查自己写的源代码，第三方的库是不用检查的
          设置检查规则：
            package.json 中 eslintConfig 中设置，或者单独使用 .eslintrc.json 进行配置
              "eslintConfig": {
                "extends": "airbnb-base"
              }
            airbnb --> eslint-config-airbnb-base  eslint-plugin-import eslint
      */
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

  3. 配置 package.json

    "eslintConfig": {
   "extends": "airbnb-base", 
    "env": {
       "browser": true 
    } 
}
js 文件的浏览器兼容性处理

IE 浏览器无法编译 es6+ 语法

  1. 下载安装包：npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js
  2. 修改配置文件
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      /*
        js兼容性处理：babel-loader @babel/core 
          1. 基本js兼容性处理 --> @babel/preset-env
            问题：只能转换基本语法，如promise高级语法不能转换
          2. 全部js兼容性处理 --> @babel/polyfill (体积太大了，不考虑)
            使用： 直接在入口文件中进行 import 导入，无需配置
            问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
          3. 需要做兼容性处理的就做：按需加载  --> core-js
      */  
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设：指示babel做怎么样的兼容性处理
          presets: [
            [
              '@babel/preset-env',
              {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: {
                  version: 3
                },
                // 指定兼容性做到哪个版本浏览器
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
            ]
          ]
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};
js 文件和 html 文件压缩

  1. 只需要将 mode 改为 production 就会自动进行 js 文件压缩，因为生产环境默认会调用 UglifyJsPlugin/TerserPlugin（webpack 4.26 以下使用 UglifyJsPlugin 压缩 JS 代码，以上的版本使用 TerserPlugin 压缩 JS 代码）插件进行 js 文件压缩。

  2. 在 HtmlWebpackPlugin 中添加配置

    const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
      }
    })
  ],
  // 生产环境下会自动压缩js代码
  mode: 'production'
};

生产环境基本配置

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    // 还需要在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [require('postcss-preset-env')()]
    }
  }
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader]
      },
      {
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader']
      },
      /*
        正常来讲，一个文件只能被一个loader处理。
        当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
          先执行eslint 在执行babel
      */
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: {version: 3},
                targets: {
                  chrome: '60',
                  firefox: '50'
                }
              }
            ]
          ]
        }
      },
      {
        test: /\.(jpg|png|gif)/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs',
          esModule: false
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        exclude: /\.(js|css|less|html|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production'
};

性能优化

  1. webpack性能优化：开发环境性能优化 生产环境性能优化
  2. 开发环境性能优化
    1. 优化打包构建速度：HMR
    2. 优化代码调试：source-map
  3. 生产环境性能优化
    1. 优化打包构建速度：
      1. oneOf
      2. babel 缓存
      3. 多进程打包
      4. externals
      5. dll
    2. 优化代码运行的性能
      1. 缓存(hash-chunkhash-contenthash)
      2. tree shaking
      3. 懒加载/预加载
      4. pwa

开发环境性能优化

优化打包构建速度：HMR （是基于 devSever 的）

作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 。能够极大提升构建速度。

webpack.config.js

/*
  HMR: hot module replacement 热模块替换 / 模块热替换
    作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 
      极大提升构建速度
      
      样式文件：可以使用HMR功能：因为style-loader内部实现了~
      js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码
        注意：HMR功能对js的处理，只能处理非入口 js 文件的其他 js 文件。
      html文件: 默认不能使用HMR功能.同时会导致问题：html文件不能热更新了~ （不用做 HMR 功能，因为一共就只有一个 html 文件）
        解决（不能热更的问题）：修改entry入口，将html文件引入
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: ['./src/js/index.js', './src/index.html'],
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    // 开启HMR功能
    // 当修改了webpack配置，新配置要想生效，必须重启webpack服务
    hot: true
  }
};

入口 js 文件 index.js

// 引入
import print from './print';
import '../css/iconfont.css';
import '../css/index.less';

console.log('index.js文件被加载了~');

print();

function add(x, y) {
  return x + y;
}

console.log(add(1, 3));

if (module.hot) {
  // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
  module.hot.accept('./print.js', function() {
    // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
    // 会执行后面的回调函数
    print();
  });
}
优化代码调试：source-map

source-map: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误，包括错误信息以及错误代码位置）

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: ['./src/js/index.js', './src/index.html'],
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    hot: true
  },
  // 使用 source-map 功能
  devtool: 'eval-source-map'
};

/*
  source-map: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）

    [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

    source-map：外部
      错误代码准确信息 和 源代码的错误位置
    inline-source-map：内联
      只生成一个内联source-map
      错误代码准确信息 和 源代码的错误位置
    hidden-source-map：外部
      错误代码错误原因，但是没有错误位置
      不能追踪源代码错误，只能提示到构建后代码的错误位置
    eval-source-map：内联
      每一个文件都生成对应的source-map，都在eval中
      错误代码准确信息 和 源代码的错误位置
    nosources-source-map：外部
      错误代码准确信息, 但是没有任何源代码信息
    cheap-source-map：外部
      错误代码准确信息 和 源代码的错误位置 
      只能精确的行
    cheap-module-source-map：外部
      错误代码准确信息 和 源代码的错误位置 
      module会将loader的source map加入

    内联 和 外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快

    开发环境：速度快，调试更友好
      速度快(eval>inline>cheap>...)
        eval-cheap-souce-map（最快）
        eval-source-map（其次）
      调试更友好  
        souce-map（最好）
        cheap-module-souce-map
        cheap-souce-map

      结论  --> eval-source-map（脚手架的默认配置）  / eval-cheap-module-souce-map

    生产环境：源代码要不要隐藏? 调试要不要更友好
      内联会让代码体积变大，所以在生产环境不用内联
      nosources-source-map 全部隐藏
      hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

      结论  --> source-map / cheap-module-souce-map
*/

生产环境性能优化

优化打包构建速度
oneOf

使一个类型的文件只经过一种 loader 解析，一旦解析之后就不再继续向下匹配 rules （所以 oneOf 只适用于只需要一种 loader 解析的文件匹配）

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    // 还需要在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [require('postcss-preset-env')()]
    }
  }
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        // 以下loader只会匹配一个
        // 注意：不能有两个配置处理同一种类型文件
        oneOf: [
          {
            test: /\.css$/,
            use: [...commonCssLoader]
          },
          {
            test: /\.less$/,
            use: [...commonCssLoader, 'less-loader']
          },
          /*
            正常来讲，一个文件只能被一个loader处理。
            当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
              先执行eslint 在执行babel
          */
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: {version: 3},
                    targets: {
                      chrome: '60',
                      firefox: '50'
                    }
                  }
                ]
              ]
            }
          },
          {
            test: /\.(jpg|png|gif)/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              outputPath: 'imgs',
              esModule: false
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader'
          },
          {
            exclude: /\.(js|css|less|html|jpg|png|gif)/,
            loader: 'file-loader',
            options: {
              outputPath: 'media'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production'
};
缓存
  1. babel 缓存 --> 让第二次打包构建速度更快

（类似于 HMR 功能，因为生产环境是无法使用 HMR 的）

babel 在编译时，如果发现只有部分 js 文件发生了变化，就行该只重新编译发生了变化的这部分文件，而其他未发生变化的文件则直接使用上一次的编译结果。这样就能提升编译速度，而实现这样的效果就需要 babel 缓存，即将上一次编译的结果缓存起来。

cacheDirectory: true     // --> 让第二次打包构建速度更快

  1. 文件资源缓存 --> 让代码上线运行缓存更好使用

    当资源命中强缓存，并且还在强缓存生效期间时，如果代码发生了 bug ，那么即便更改了代码，客户端也无法命中更新之后的文件。这时应该怎么处理呢？

    一种想法是，每次构建都给文件名加上一个版本号作为辨识，一旦版本号发生改变就代表重新构建了新的文件，会重新加载而不使用缓存。

    hash: 每次 wepack 构建时会生成一个唯一的 hash 值。

    ​ 问题: 因为 js 和 css 同时使用一个hash值。

    ​ 如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）

    chunkhash：根据 chunk 生成的 hash 值。如果打包来源于同一个chunk，那么 hash 值就一样（所有根据入口文件引入的文件，被打包后都会生成同一个 chunk ）

    ​ 问题: js 和 css 的 hash 值还是一样的

    ​ 因为 css 是在 js 中被引入的，所以同属于一个 chunk

    contenthash: 根据文件的内容生成 hash 值。不同文件 hash 值一定不一样

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

/*
  缓存：
    babel缓存
      cacheDirectory: true
      --> 让第二次打包构建速度更快
    文件资源缓存
      hash: 每次wepack构建时会生成一个唯一的hash值。
        问题: 因为js和css同时使用一个hash值。
          如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）
      chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样
        问题: js和css的hash值还是一样的
          因为css是在js中被引入的，所以同属于一个chunk
      contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样    
      --> 让代码上线运行缓存更好使用
*/

// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
  。。。
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage',
                  corejs: { version: 3 },
                  targets: {
                    chrome: '60',
                    firefox: '50'
                  }
                }
              ]
            ],
            // 开启babel缓存
            // 第二次构建时，会读取之前的缓存
            cacheDirectory: true
          }
        },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.[contenthash:10].css'
    }),
   。。。。
  ],
};
tree shaking

(树摇，可以理解为将树上枯黄的树叶摇掉，只留下绿色可使用的树叶)

作用：去除无用代码。去除在应用程序中没有使用到的代码，这样能够使代码的体积更小

tree shaking 前提：1. 必须使用ES6模块化 2. 开启production环境 然后就算是已经开启了 tree shaking

（由于 webpack 版本的原因，可能需要在 package.json 中添加 sideEffects 配置项以防某些文件丢失）

package.json 中的 sideEffects 配置项：

​ “sideEffects”: false 所有代码都没有副作用（都可以进行tree shaking）

​ 问题：可能会把css / @babel/polyfill （副作用）文件干掉

​ “sideEffects”: [".css", ".less"] 数组中填上不需要进行 tree shaking 的文件（副作用文件）

code split

将打包输出的一个 chunk 分割成多个 chunk，将一个打包文件分割成多个打包文件。有助于对打包后的文件进行并行加载或者按需加载。

  1. 多入口
module.exports = {
  // 单入口
  // entry: './src/js/index.js',
  entry: {
    // 多入口：有一个入口，最终输出就有一个bundle
    index: './src/js/index.js',
    test: './src/js/test.js'
  },
  output: {
    // [name]：取文件名，对应于 entry 中的属性名
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
};
  1. 单独打包 node_modules 中的依赖文件
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 单入口
  // entry: './src/js/index.js',
  entry: {
    index: './src/js/index.js',
    test: './src/js/test.js'
  },
  output: {
    // [name]：取文件名
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  /*
    1. 可以将 node_modules 中代码单独打包一个 chunk 最终输出
    2. 自动分析多入口 chunk 中，有没有公共的文件。如果有会打包成单独一个 chunk
  */
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  mode: 'production'
};

  1. 单入口情况下，文件的单独打包

    无需在 webpack.config.js 中添加配置，直接在入口文件中对 依赖到的需要单独打包的文件 使用 import 的动态加载。

    功能：通过js代码，让某个文件被单独打包成一个chunk； import 动态导入语法：能将某个文件单独打包。

    index.js

/*
  通过js代码，让某个文件被单独打包成一个chunk
  import 动态导入语法：能将某个文件单独打包
*/
// /* webpackChunkName: 'test' */ --> 这个注释用于将这个加载的文件命名为 test，这个文件被单独打包之后会使用 test 命名。
import(/* webpackChunkName: 'test' */'./test')
  .then((result) => { // 其中 result 是一个 module 对象，可以使用解构赋值来获取其中被 export 的对象（变量或方法等）
    // 文件加载成功~
    // eslint-disable-next-line
    console.log(result.mul(2, 5));
  })
  .catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败~');
  });

// eslint-disable-next-line
console.log(sum(1, 2, 3, 4));
懒加载和预加载

懒加载：当文件需要使用时才加载。将 import 的动态加载放在一个异步的回调函数中，触发这个异步函数时才会加载这个模块。（会将这个模块单独打包）

预加载：会在使用之前提前加载 js 文件。

预加载和正常加载的区别：正常加载可以认为是并行加载（同一时间加载多个文件）；预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源 。

webpackChunkName：用于指定单独打包的文件的名称

webpackPrefetch：true/false，用于指示是否开启预加载

预加载的浏览器兼容性较差，使用时需要慎重。一般只兼容 PC 端的高版本浏览器，在 IE 浏览器挥着移动端通常不兼容。

懒加载一般不会有太大的兼容性问题。

// index.js 文件

console.log('index.js文件被加载了~');

// import { mul } from './test';

document.getElementById('btn').onclick = function() {
  // 懒加载~：当文件需要使用时才加载~
  // 预加载 prefetch：会在使用之前，提前加载js文件 
  // 正常加载可以认为是并行加载（同一时间加载多个文件）  
  // 预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
  import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => {
    console.log(mul(4, 5));
  });
};
PWA（渐进式网络开发应用程序）离线可访问技术

workbox --> workbox-webpack-plugin

ServiceWork 中缓存上一次的加载的部分结果

  1. 安装插件：npm i workbox-webpack-plugin
  2. 修改 webpack.config.js 文件
。。。
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

/*
  PWA: 渐进式网络开发应用程序(离线可访问)
    workbox --> workbox-webpack-plugin
*/

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [。。。]
  },
  plugins: [
    。。。
    new WorkboxWebpackPlugin.GenerateSW({
      /*
        1. 帮助serviceworker快速启动
        2. 删除旧的 serviceworker

        生成一个 serviceworker 配置文件~
      */
      clientsClaim: true,
      skipWaiting: true
    })
  ],
  mode: 'production',
  。。。
};
  1. 修改入口文件 index.js
import { mul } from './test';
import '../css/index.css';

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

// eslint-disable-next-line
console.log(mul(2, 3));
// eslint-disable-next-line
console.log(sum(1, 2, 3, 4));

/*
注册 serviceWorker 遇到的问题
  1. eslint不认识 window、navigator全局变量
    解决：需要修改package.json中eslintConfig配置
      "env": {
        "browser": true // 支持浏览器端全局变量，如果需要支持 node 的全局变量可以配置 "node": true
      }
   2. sw代码必须运行在服务器上
      --> nodejs
      -->
        npm i serve -g
        serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去
*/
// 注册serviceWorker
// 处理兼容性问题
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('/service-worker.js') // workbox-webpack-plugin 会生成一个这个文件，此处将它注册在 serviceWorker 中
      .then(() => {
        console.log('sw注册成功了~');
      })
      .catch(() => {
        console.log('sw注册失败了~');
      });
  });
}
多进程打包（准确来说应该是多线程）

开启多线程打包： 对于较大的项目可以节省打包的时间。
线程启动大概为600ms，线程通信也有开销。
只有工作消耗时间比较长，才需要多线程打包

  1. 下载 loader： npm i thread-loader -D

  2. 修改配置文件

    const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');

/*
  PWA: 渐进式网络开发应用程序(离线可访问)
    workbox --> workbox-webpack-plugin
*/

// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    // 还需要在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [require('postcss-preset-env')()]
    }
  }
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            /* 
              开启多进程打包。 
              进程启动大概为600ms，进程通信也有开销。
              只有工作消耗时间比较长，才需要多进程打包
            */
            {
              loader: 'thread-loader',
              options: {
                workers: 2 // 进程2个
              }
            },
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  [
                    '@babel/preset-env',
                    {
                      useBuiltIns: 'usage',
                      corejs: { version: 3 },
                      targets: {
                        chrome: '60',
                        firefox: '50'
                      }
                    }
                  ]
                ],
                // 开启babel缓存
                // 第二次构建时，会读取之前的缓存
                cacheDirectory: true
              }
            }
          ]
        },
    ]
  },
  plugins: [],
  mode: 'production',
  devtool: 'source-map'
};
externals

作用：防止将某一些包打包到我们最终输出的 bundle 中。（比如说某一些包直接使用 cdn 进行引入）

库被忽略掉了之后要记得手动进行引入

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'production',
  externals: {
    // 拒绝jQuery被打包进来
    // 书写格式："要被忽略的库名": "npm 安装时的包名"
    jquery: 'jQuery'
  }
};
dll（动态链接库）

可以将多个库打包在一个 chunk 中。正常情况下，node_modules 中的包会被打包成一个 chunk。

修改 webpack.config.js 文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 使用 webpack 中的 DllReferencePlugin 插件
const webpack = require('webpack');
// 将某个文件打包输出去，并在html中自动引入该资源
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    // 告诉webpack哪些库不参与打包，同时使用时的名称也得变~
    new webpack.DllReferencePlugin({
      manifest: resolve(__dirname, 'dll/manifest.json')
    }),
    // 将某个文件打包输出去，并在html中自动引入该资源（只打包一次，将来不会重复打包，而是复用上一次的打包）
    new AddAssetHtmlWebpackPlugin({
      filepath: resolve(__dirname, 'dll/jquery.js')
    })
  ],
  mode: 'production'
};

新建 webpack.dill.js 文件

/*
  使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包
    当你运行 webpack 时，默认查找 webpack.config.js 配置文件
    需求：需要运行 webpack.dll.js 文件
      --> webpack --config webpack.dll.js
*/

const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    // 最终打包生成的[name] --> jquery
    // ['jquery'] --> 要打包的库是jquery
    jquery: ['jquery'],
  },
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'dll'),
    library: '[name]_[hash]' // 打包的库里面向外暴露出去的内容叫什么名字
  },
  plugins: [
    // 打包生成一个 manifest.json --> 提供单独打包后的文件和jquery（被打包的库）的映射关系
    new webpack.DllPlugin({
      name: '[name]_[hash]', // 映射库的暴露的内容名称
      path: resolve(__dirname, 'dll/manifest.json') // 输出文件路径
    })
  ],
  mode: 'production'
};

生成的 manifest.json 文件

{"name":"jquery_e5da1b9e478919e6093f","content":{"../../node_modules/jquery/dist/jquery.js":{"id":1,"buildMeta":{"providedExports":true}}}}

性能优化总结

  1. webpack性能优化：开发环境性能优化 生产环境性能优化
  2. 开发环境性能优化
    1. 优化打包构建速度：HMR
    2. 优化代码调试：source-map
  3. 生产环境性能优化
    1. 优化打包构建速度：
      1. oneOf
      2. babel 缓存
      3. 多进程打包
      4. externals
      5. dll
    2. 优化代码运行的性能
      1. 缓存(hash-chunkhash-contenthash)
      2. tree shaking
      3. 懒加载/预加载
      4. pwa

webpack 配置详解

entry（入口起点）

  1. string --> ‘./src/index.js’

​ 单入口

​ 打包形成一个 chunk。 输出一个 bundle 文件。此时 chunk 的名称默认是 main

  1. array --> [’./src/index.js’, ‘./src/add.js’]

​ 多入口

​ 所有入口文件最终只会形成一个 chunk, 输出出去只有一个 bundle 文件。

​ 用途 --> 一般来说只有 配置成 [’./src/index.js’, ‘./src/index.html’]时，在 HMR 功能中让 html 文件热更新生效~

  1. object

​ 多入口

​ 有几个入口文件就形成几个 chunk，输出几个 bundle 文件

​ 此时 chunk 的名称是 key

​ 特殊用法

{
  // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
  index: ['./src/index.js', './src/count.js'], 
  // 形成一个chunk，输出一个bundle文件。
  add: './src/add.js'
}

output

publicPath 指示的路径并不是指示文件打包后输出到哪里，而是指示 打包后的资源被自动引入文件中时，需要拼接上的引入路径的前缀。一般用于生产环境拼接出文件的绝对路径。

chunkFilename 非入口 chunk 的名称。

library 向全局暴露出一个代表这个库的变量，浏览器通过 window.变量名 进行访问，node 环境通过 global.变量名 进行访问。

libraryTarget 用于指示向外暴露的变量名添加到哪个全局变量上。或者是通过什么样的模块化方式进行引入。当前的全局变量是 window 还是 global。

library 一般配合 dll 针对打包某些库进行使用。

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    // 文件名称（指定名称+目录）
    filename: 'js/[name].js',
    // 输出文件目录（将来所有资源输出的公共目录）
    path: resolve(__dirname, 'build'),
    // 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
    publicPath: '/',
    chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称
    // library: '[name]', // 整个库向外暴露的变量名
    // libraryTarget: 'window' // 变量名添加到哪个上 browser
    // libraryTarget: 'global' // 变量名添加到哪个上 node
    // libraryTarget: 'commonjs' // 通过模块化的方式进行引入 require
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};

module

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/,
        // 多个loader用use
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        // 排除node_modules下的js文件
        exclude: /node_modules/,
        // 只检查 src 下的js文件
        include: resolve(__dirname, 'src'),
        // 优先执行
        enforce: 'pre',
        // 延后执行
        // enforce: 'post',
        // 单个loader用loader
        loader: 'eslint-loader',
        // 指定 loader 的配置
        options: {}
      },
      {
        // 以下配置只会生效一个
        oneOf: []
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};

resolve

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: []
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development',
  // 解析模块的规则
  resolve: {
    // 配置解析模块路径别名: 优点简写路径 缺点路径没有提示
    alias: {
      $css: resolve(__dirname, 'src/css')
    },
    // 配置省略文件路径的后缀名
    extensions: ['.js', '.json', '.jsx', '.css'],
    // 告诉 webpack 解析模块是去找哪个目录。按数组的顺序进行查找，例如下面这一行，会先去指定的绝对路径处进行查找，找不到的话再按照第二种方案进行逐级查找 node_modules 目录 
    // modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
    modules: ['node_modules'] // 逐级一层一层查找 node_modules 目录
  }
};

devServer

开发环境才会使用到

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: []
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development',
  devServer: {
    // 运行代码的目录
    contentBase: resolve(__dirname, 'build'),
    // 监视 contentBase 目录下的所有文件，一旦文件变化就会 reload
    watchContentBase: true,
    watchOptions: {
      // 忽略文件
      ignored: /node_modules/
    },
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 5000,
    // 域名
    host: 'localhost',
    // 自动打开浏览器
    open: true,
    // 开启HMR功能
    hot: true,
    // 不要显示启动服务器日志信息
    clientLogLevel: 'none',
    // 除了一些基本启动信息以外，其他内容都不要显示
    quiet: true,
    // 如果出错了，不要全屏提示~
    overlay: false,
    
    // 服务器代理 --> 解决开发环境跨域问题
    // 浏览器和服务器之间会存在跨域问题，但是服务器和服务器之间不会有跨域问题。浏览器和代理服务器之间不会有跨域问题，代理服务器会将请求转发给目标服务器，代理服务器接收到响应之后也会把响应转发给浏览器，这样就解决了跨域问题。
    proxy: {
      // 一旦devServer(5000)服务器接受到 /api/xxx 的请求，就会把请求转发到另外一个服务器(3000)
      '/api': {
        target: 'http://localhost:3000',
        // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api）
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

optimization

生产环境使用

问题描述：index.js 文件中引用了 a.js 文件，这两个文件的打包命名都使用了 hash 值，打包之后的 index.js 文件（mian.hash.js）为了引用打包之后的 a.js 文件（a.hash.js），于是就在 mian.hash.js 中记录了 a.hash.js 文件的 hash 值。此后，当仅有 a.js 文件发生变化的时候，由于 a.js 文件被重新打包而改动了它打包之后的 hash 值，则 mian.hash.js 中记录的 a.hash.js 文件的 hash 值发生了改变，会导致缓存失效。这就导致实际并没有发生改变的 index.js 文件也需要重新进行打包。（牵一发而动全身）

解决思路：将 main.js 文件中记录的其他文件的 hash 值单独提取出来单独打包，这样就不会导致未发生变化的 index.js 文件被重新打包。相当解耦。

解决方法： runtimeChunk

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build'),
    chunkFilename: 'js/[name].[contenthash:10]_chunk.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'production',
  resolve: {
    alias: {
      $css: resolve(__dirname, 'src/css'),
    },
    extensions: ['.js', '.json', '.jsx', '.css'],
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules'],
  },
  optimization: {
    // 代码分割的配置
    splitChunks: {
      chunks: 'all',
      // 以下的配置是默认值，可以不写~
      /* minSize: 30 * 1024, // 分割的chunk最小为30kb，小于 30kb 就不分割了
      maxSize: 0, // 最大没有限制
      minChunks: 1, // 要提取的chunk最少被引用1次，如果将要被提取的模块一次都没有被引用，就不做提取了
      maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
      maxInitialRequests: 3, // 入口js文件最大并行请求数量
      automaticNameDelimiter: '~', // 名称命名时的连接符（命名规则）
      name: true, // 可以使用命名规则
      cacheGroups: { // 分割chunk的组
        // node_modules文件会被打包到 vendors 组的chunk中。命名规则 --> vendors~xxx.js
        // 满足上面的公共规则，如：大小超过30kb，至少被引用一次。
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          // 优先级
          priority: -10
        },
        default: {
          // 要提取的chunk最少被引用2次
          minChunks: 2,
          // 优先级
          priority: -20,
          // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
          reuseExistingChunk: true
        }
      } */
    },
    
    // 将当前模块的记录其他模块的hash单独打包为一个文件： runtime 文件
    // 解决：修改a文件导致b文件的contenthash变化
    runtimeChunk: {
      name: (entrypoint) => `runtime-${entrypoint.name}`,
    },
    
    // 修改压缩代码的详细配置
    minimizer: [
      // 配置生产环境的压缩方案：js和css
      new TerserWebpackPlugin({
        // 开启缓存
        cache: true,
        // 开启多进程打包
        parallel: true,
        // 启动 source-map，否则会被压缩掉
        sourceMap: true,
      }),
    ],
  },
};

webpack 5 使用

webpack 4 和 webpack 5 的对比：当存在多个文件嵌套使用时，webpack 4 的 tree shaking 可能无法排除掉嵌套的底层文件中的未使用到的代码。但是 webpack 5 的 tree shaking 能够较好地处理这种情况

重点关注内容

  • 通过持久缓存提高构建性能.
  • 使用更好的算法和默认值来改善长期缓存.
  • 通过更好的树摇和代码生成来改善捆绑包大小.
  • 清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改.
  • 通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5.

下载

直接下载就行，现在已经就是 webpack 5 的版本了

自动删除 Node.js Polyfills

早期，webpack 的目标是允许在浏览器中运行大多数 node.js 模块，但是模块格局发生了变化，许多模块用途现在主要是为前端目的而编写的。webpack <= 4 附带了许多 node.js 核心模块的 polyfill，一旦模块使用任何核心模块（即 crypto 模块），这些模块就会自动应用。

尽管这使使用为 node.js 编写的模块变得容易，但它会将这些巨大的 polyfill 添加到包中。在许多情况下，这些 polyfill 是不必要的。

webpack 5 会自动停止填充这些核心模块，并专注于与前端兼容的模块。

迁移：

  • 尽可能尝试使用与前端兼容的模块。
  • 可以为 node.js 核心模块手动添加一个 polyfill。错误消息将提示如何实现该目标。

Chunk 和模块 ID

添加了用于长期缓存的新算法。在生产模式下默认情况下启用这些功能。

chunkIds: "deterministic", moduleIds: "deterministic"

Chunk ID

你可以不用使用 import(/* webpackChunkName: "name" */ "module") 在开发环境来为 chunk 命名，生产环境还是有必要的

webpack 内部有 chunk 命名规则，不再是以 id(0, 1, 2)命名了

Tree Shaking

  1. webpack 现在能够处理对嵌套模块的 tree shaking

    // inner.js
export const a = 1
export const b = 2

// module.js
import * as inner from './inner'
export { inner }
 
// user.js
import * as module from './module'
console.log(module.inner.a)

    在生产环境中, inner 模块暴露的 b 会被删除

  2. webpack 现在能够多个模块之前的关系

    import { something } from './something'
 
function usingSomething() {
  return something
}
 
export function test() {
  return usingSomething()
}

    当设置了"sideEffects": false时，一旦发现test方法没有使用，不但删除test，还会删除"./something"

  3. webpack 现在能处理对 Commonjs 的 tree shaking （但是有一些具体的要求）

Output

webpack 4 默认只能输出 ES5 代码

webpack 5 开始新增一个属性 output.ecmaVersion, 可以生成 ES5 和 ES6 / ES2015 代码.

如：output.ecmaVersion: 2015

SplitChunk

更加精确的划分

// webpack4
minSize: 30000


// webpack5
minSize: {
  javascript: 30000,
  style: 50000,
}

Caching

// 配置缓存
cache: {
 // 磁盘存储
 type: "filesystem", // type: "memory", // 内存存储
 buildDependencies: {
   // 当配置修改时，缓存失效
   config: [__filename]
 }
}

缓存将存储到 node_modules/.cache/webpack

监视输出文件

之前 webpack 总是在第一次构建时输出全部文件，但是监视重新构建时会只更新修改的文件。

此次更新在第一次构建时会找到输出文件看是否有变化，从而决定要不要输出全部文件。

默认值

  • entry: "./src/index.js
  • output.path: path.resolve(__dirname, "dist")
  • output.filename: "[name].js"

更多内容

https://github.com/webpack/changelog-v5

其他同学的笔记

https://juejin.cn/post/6909731086977368078/
https://gitee.com/hongjilin/hongs-study-notes/tree/master/%E7%BC%96%E7%A8%8B_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/Webpack%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0#%E5%87%BA%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98%E4%B8%8E%E8%A7%A3%E5%86%B3

yanzi_0216
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpackapimocker是一个webpackdevserver中间件可以为RESTAPI创建模拟
08-13
webpack-api-mocker 是一个webpack-dev-server中间件，可以为REST API创建模拟。当您尝试在没有实际 REST API 服务器的情况下测试应用程序时，它会很有用。与Webpack 配合使用，只有一个 server 。webpack-api-mocker 也可以脱离webpack，与 Express 配合使用。
Webpack笔记.md
04-13
webpack的搭建和项目的整体的构架
webpack动态加载打包chunk命名
少健终望成，波中取千金----张少波
11-27 677
webpack chunk
详细介绍Webpack5中的Plugin
zag666的博客
07-31 1060
webpack在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。站在代码逻辑的角度就是：webpack在编译代码过程中，会触发一系列 Tapable钩子事件，插件所做的就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样当webpack构建的时候，插件注册的事件就会随着钩子的触发而执行了。开发插件，离不开这些钩子。插件Plugin可以扩展webpack，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力。
前端使用webpack-api-mocker插件mock数据
qq_43456687的博客
02-07 897
mock数据是前端必备技能 首先需要在webpack生产环境配置文件中引入插件 const apiMocker = require('webpack-api-mocker'); devServer: { before(app) { //mock/index.js为mock文件夹入口 if (process.env.MOCK) { apiMocker(app, path.resolve('mock/index.js'));
webpack5笔记
qq_60178319的博客
08-01 91
webpack5笔记
【前端】尚硅谷Webpack5教程笔记
qq_26127905的博客
03-06 530
文章目录 参考视频:尚硅谷Webpack5入门到原理 【前端目录贴】
webpack学习笔记
09-26
webpack学习笔记，总结了实际开发过程中的实际问题，并进行了梳理，便于直接查找使用；同时也对于目前市面上的资源进行了借鉴，梳理成为可以简单查找，就可以找到对应的思路，便于使用，方面了自己，也节省了时间。
webpack详细笔记和配置
12-04
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。...
笔记-webpack5学习指南-V1.0
08-29
笔记-webpack5学习指南-V1.0
使用Webpack5打包各类资源
eyes++的博客
10-14 1373
一：webpack五个核心概念 Entry： 入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。 Output： 输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。 Loader： Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript) Plugins： 插件(Plugins)可以用于执行范围更广的任务。插件的范围包
显微镜下的webpack4的新特性：mode详解
weixin_34121304的博客
10-18 252
webpack4支持的一个新特性就是zero配置，不需要config，也可以打包，这对于懒癌患者很有诱惑力，但是这也意味着我们不清楚零配置发生了写什么，也不知道打包出来的文件是否符合我们的心意，全部都是佛系打包。不过作为项目的亲爹亲妈，还是要对自己的孩子负责，每个打包过程都是要可控的。本文就是详解不同mode下，webpack打包都发生了些什么事。 我们来看一下MODE这个参数，他有三个参数pro...
Webpack 5基础入门知识总结
weixin_43327181的博客
08-23 620
常用的loader以及plugins css-loader：将CSS转化为JS（将CSS输出到打包后的JS文件中） style-loader：把包含CSS内容的JS代码，挂载到页面的一、打包CSS文件 loader执行顺序：先右后左(先下后上) npm i -D css-loader style-loader wabpack.config.js中需要配置 1. 打包CSS举例 module : { rules : [ { test : /\.css$/i,
【webpack5修行之道】第20篇: 环境配置mode
j178202798的博客
06-18 475
选项 描述 特点 development 会将porcess.env.NODE_ENV的值设为development。 启用NamedChunksPlugin 和 NamedModulesPlugin 能让代码本地调试运行的环境 production 会将process.env.NODE_ENV的值设为production。 启用FlagDependencyUsagePlugin， FlagIncludedChunksPl
前端面试题6（怎样打包封装自己的插件）
God's asylum的博客
07-04 307
在前端开发中，如果你想要将一些功能封装成一个插件，并对外提供方法供其他项目或开发者使用，可以采用UMD(Universal Module Definition)格式来打包你的插件，使其兼容多种模块加载器环境（如AMD、CommonJS和全局变量）。这里以JavaScript为例，使用Webpack作为打包工具来实现这一过程。
Vue图片路径问题分析
刘一帆的博客
07-02 450
使用requirerequire()是 Webpack 提供的引入模块的方式，适用于处理本地静态资源（图片等）。路径别名是 Vue CLI 项目的默认路径别名，指向src文件夹，确保路径简洁明了，减少使用相对路径引入资源的麻烦。使用相对路径也可以使用相对路径，但要确保路径正确，容易在项目文件结构复杂时出现混乱。
quill编辑器使用总结
幸运小男神的博客
07-04 399
若使用版本1.0，这两个组件使用哪个都是一样的，无非代码有点偏差；若需要使用表格功能，必须使用 quill2.0 版本，因为 vue-quill-editor 不支持table功能。
解决video.js在demo中可以播放，在已有项目中无限waiting的问题
最新发布
Ranye的博客
07-05 451
可恶的webpack
webpack 笔记
10-11
好的，关于 webpack 的笔记，我可以提供以下内容： Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它是一个模块打包工具，可以将多个模块打包成一个文件，以便在浏览器中使用。 Webpack 的核心概念是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值