Question

官网： https://webpack.js.org/

github 仓库： https://github.com/webpack/webpack

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph) ，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

webpack 命令

$ webpack --help
Usage: webpack [entries...] [options]
Alternative usage to run commands: webpack [command] [options]

The build tool for modern web applications.

Options:
  -c, --config <value...>                Provide path to a webpack configuration file e.g. ./webpack.config.js.
  --config-name <value...>               Name of the configuration to use.
  -m, --merge                            Merge two or more configurations using 'webpack-merge'.
  --env <value...>                       Environment passed to the configuration when it is a function.
  --node-env <value>                     Sets process.env.NODE_ENV to the specified value.
  --progress [value]                     Print compilation progress during build.
  -j, --json [value]                     Prints result as JSON or store it in a file.
  -d, --devtool <value>                  Determine source maps to use.
  --no-devtool                           Do not generate source maps.
  --entry <value...>                     The entry point(s) of your application e.g. ./src/main.js.
  --mode <value>                         Defines the mode to pass to webpack.
  --name <value>                         Name of the configuration. Used when loading multiple configurations.
  -o, --output-path <value>              Output location of the file generated by webpack e.g. ./dist/.
  --stats [value]                        It instructs webpack on how to treat the stats e.g. verbose.
  --no-stats                             Disable stats output.
  -t, --target <value...>                Sets the build target e.g. node.
  --no-target                            Negative 'target' option.
  -w, --watch                            Watch for files changes.
  --no-watch                             Do not watch for file changes.
  --watch-options-stdin                  Stop watching when stdin stream has ended.
  --no-watch-options-stdin               Do not stop watching when stdin stream has ended.

Global options:
  --color                                Enable colors on console.
  --no-color                             Disable colors on console.
  -v, --version                          Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.
  -h, --help [verbose]                   Display help for commands and options.

Commands:
  build|bundle|b [entries...] [options]  Run webpack (default command, can be omitted).
  configtest|t [config-path]             Validate a webpack configuration.
  help|h [command] [option]              Display help for commands and options.
  info|i [options]                       Outputs information about your system.
  serve|server|s [entries...] [options]  Run the webpack dev server.
  version|v [commands...]                Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.
  watch|w [entries...] [options]         Run webpack and watch for files changes.

To see list of all supported commands and options run 'webpack --help=verbose'.

Webpack documentation: https://webpack.js.org/.
CLI documentation: https://webpack.js.org/api/cli/.
Made with ? by the webpack team.

webpack 用户篇

核心概念 ：

• 入口(entry) ： 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。
• 输出(output) 告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js ，其他生成文件默认放置在 ./dist 文件夹中。
• loader : 定义规则处理 js/json 之外的文件要用到的 loader
• 插件(plugin) ：插件目的在于解决 loader 无法实现的 其他事 。webpack 插件 是一个具有 apply 属性的 JavaScript 对象。 apply 属性会被 webpack compiler 调用，并且 compiler 对象可在 整个 编译生命周期访问。
• 模式(mode) ： 环境参数，选择 development , production 或 none 之中的一个，默认 production
• 浏览器兼容性(browser compatibility)
• 环境(environment) webpack 5 运行于 Node.js v10.13.0+ 的版本。
• 模块：离散功能块(discrete chunks of functionality)。每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。

webpack.config.js 示例

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',   //入口，可以指向字符串（SAP）或一个字典（多页面）
  output: {    //输出
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },

  module: {
    //loader: txt 文件用 raw-loader, jsx 文件用 babel 解析
    rules: [{ test: /\.txt$/, use: 'raw-loader' }，
            { test: /\.jsx$/, exclude:/node_modules/, loaders:['babel'] },
           ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],  //插件
  mode: 'production',
};

安装 webpack loader

Webpack 有一个不可不说的优点，它把所有的文件都可以当做模块处理，包括你的 JavaScript 代码，也包括 CSS 和 fonts 以及图片等等等，只有通过合适的 loaders，它们都可以被当做模块被处理。
Webpack 默认只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

安装 eslint-loader 整合 eslint：

npm install eslint-loader --save-dev

安装 babel-loader 整合 babel：

npm install babel-loader --save-dev

安装 style-loader css-loader 等，转换对应类型文件：

npm install style-loader css-loader less-loader sass-loader file-loader url-loader --save-dev

css-loader 用于打包 css 文件
style-loader 用于将编译完成的 css 插入 html 中
less-loader 是将 less 文件编译成 css
sass-loader 是将 sass 文件编译成 css
file-loader 用于打包文件
url-loadder 用于打包图片

webpack 提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader 使你能够使用类似 @import 和 url(...) 的方法实现 require() 的功能,style-loader 将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入 webpack 打包后的 JS 文 件中。
url-loader 是对 file-loader 的上层封装。一般限制小图片直接转成 base64 可以用 url-loader，其他情况都用 file-loader。

安装 webpack plugin

与 loader 专注于处理资源内容不同，plugin 功能更广更强大。plugin 可以实现那些 loader 实现不了或者不适合在 loader 实现的功能，比如自动生成项目的 HTML 页面、向构建过程中注入环境变量等。

常用插件：html-webpack-plugin uglifyjs-webpack-plugin（用于 JS 代码压缩）

hash、chunkhash 和 contenthash

• hash: 跟整个项目的构建相关，同一次构建过程中生成的 hash 都是一样的。只要项目里有文件更改，整个项目构建的 hash 值都会更改；没有文件更改，重新构建，生成 HASH 值也不一样。主要用于开发模式，客户端缓存都会失效。
• chunkhash ：即模块 hash。根据不同的入口文件(Entry) 进行依赖文件解析、构建对应的 chunk，生成对应的 hash 值。只要文件内容没有更改就不会重复构建。如果公共库是单独模块，不修改公共库文件；非公共库文件修改后，重新构建非公共库模块，原公共库模块缓存仍能使用。
• contenthash： 表示由文件内容产生的 hash 值，内容不同产生的 contenthash 值也不一样。在项目中，通常做法是把项目中 css 都抽离出对应的 css 文件来加以引用。

webpack 版本差异

版本迁移指南 https://webpack.docschina.org/migrate/

前提条件

在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

版本	发布时间	npm 版本要求	说明
1.0	2012-03		略
2.0			webpack 2.0 之后，不能省略后缀-loader。 1.新增对 ES6 语法的支持.2.支持 tree-shaking ( 减少打包后的体积 )3.更新 resolve 的 写法: resolve.modulesDirectories => resolve.modules4.修改 module 配置：外层 loaders 改为 rules; 内层 loader 改为 use; 所有插件必须加上 -loader，不再允许缩写; 不再支持使用!连接插件，改为数组形式; json-loader 模块移除，webpack 会自动处理.5.移除部分 plugins: 移除了 OccurenceOrderPlugin、NoErrorsPlugin 插件，改为内置插件
3.0	2017-06-20		1.Scope Hoisting : 作用域，将 function closures 的包裹方式变成了可配置的形式。2.Magic Comments 魔法注释（内联注释）。3.新增内置插件 webpack-dev-server
4.0	2018-02-26	6.11.5+	webpack 4+ 版本，还需要安装 CLI(webpack-cli)，可以不用引入一个配置文件。1.mode 配置选项。 2.Loader 使用规则：废弃 loaders 写法，只支持 rules。 3.babek 使用新的命名规则 @babel。 4.CommonsChunkPlugin：公共库拆分插件。 5.新增 ini-css-extract-plugin: css 代码抽离插件。把 css 从 js 文件中抽离，防止 js 太大，加载时间太长。 6.UglifyJsPlugin：js 代码压缩插件。production mode 下面自动为 true，optimization.minimizer 可以进行个性化配置。 7.happypack：多进程 loader 打包.当开启时，子进程执行，结果发给父进程。
5.0	2020-10-10	10.13.0+	1.针对 production 模式进行了优化 2. ...
Roadmap

更改比较多的配置示例

# webpack 1.X：

# webpack 2.X：

# webpack 3.X：

# webpack 4.X：
const { mode } = require("webpack-nano/argv");
const {
  MiniHtmlWebpackPlugin,
} = require("mini-html-webpack-plugin");
const { WebpackPluginServe } = require("webpack-plugin-serve");

module.exports = {
  watch: mode === "development",
  entry: ["./src", "webpack-plugin-serve/client"],
  mode,
  plugins: [
    new MiniHtmlWebpackPlugin({ context: { title: "Demo" } }),
    new WebpackPluginServe({
      port: process.env.PORT || 8080,
      static: "./dist",
      liveReload: true,
      waitForBuild: true,
    }),
  ],
};

webpack@4 以后的版本，弃用了许多 @3 的插件，其中包括：
分离打包 js 文件的插件 webpack.optimize.CommonChunkPlugin()；
压缩 js 文件的插件 webpack.optimize.UglifyJsPlugin();
定义产品上线环境 webpack.optimize.DedupePlugun()；
分离 css 文件插件 extract-text-webpack-plugin();
css 文件压缩插件 CssMinimizerPlugin()；