构建webpack知识体系

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

webpack = web package
webpack是一个现代JS应用程序的静态模块打包器（module bundler）
模块（模块化开发，可以提高开发效率，避免重复造轮子）
打包（将各个模块，按照一定的规则组装起来）
官网：webpack.js.org/
特点：功能强大（打包，构建，发布web服务），学习成本高

webpack优点

拥有依赖管理、动态打包、代码分离、按需加载、代码压缩、静态资源压缩、缓存等配置； webpack 扩展性强，插件机制完善，开发者可自定义插件、loader； webpack 社区庞大，更新速度快，轮子丰富；

基础应用

webpack 通过依赖关系图可以获取非代码资源，如 images 或 web 字体等。并会把它们作为依赖提供给应用程序。每个模块都可以明确表述它自身的依赖，在打包时可根据依赖进行打包，避免打包未使用的模块。

Webpack 核心概念

• 入口（Entry）

• 出口（Output）

• 加载器（Loader）

• 插件（Plugins）

• 模式（Mode）

• 模块（Module）

• 依赖图（Dependency Graph）

entry（入口）

入口是指依赖关系图的开始，从入口开始寻找依赖，打包构建，webpack 允许一个或多个入口配置；


module.exports = {
 entry: './src/index.js'
}

多入口配置：
entry:{
index:path.join(srcPath,'index.js'),
other:path.join(srcPath,'other.js')
}

output（出口）

输出用于配置 webpack 构建打包的出口，如打包的位置，打包的文件名；

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
};

loader（转换）

webpack 自带 JavaScript 和 JSON 文件的打包构建能力，无需格外配置，对于其他类型的文件如css等，则需要安装loader处理； loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

plugin（插件）

插件则是用于扩展 webpack 的能力；

module.export = { plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })], }

mode（模式）

webpack5 提供了模式选择，包括开发模式、生产模式、空模式，并对不同模式做了对应的内置优化。可通过配置模式让项目性能更优；

module.exports = {
  mode: 'development',
};

resolve（解析）

resolve 用于设置模块如何解析，常用配置如下：

alias：配置别名，简化模块引入；

extensions：在引入模块时可不带后缀；

symlinks：用于配置 npm link 是否生效，禁用可提升编译速度。

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.d.ts'],
    alias: {
      '@': './',
    },
    symlinks: false,
  }
}

optimization（优化）

optimization 用于自定义 webpack 的内置优化配置，一般用于生产模式提升性能，常用配置项如下： minimize：是否需要压缩 bundle；

minimizer：配置压缩工具，如 TerserPlugin、OptimizeCSSAssetsPlugin；

splitChunks：拆分 bundle；

runtimeChunk：是否需要将所有生成 chunk 之间共享的运行时文件拆分出来。

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
    splitChunks: {
      chunks: 'all',
      // 重复打包问题
      cacheGroups:{
        vendors:{ 
          //node_modules里的代码
          test: /[\\/]node_modules[\\/]/,
          chunks: "all",
          //chunks name
          name: 'vendors', 
          //优先级
          priority: 10, 
          enforce: true 
        }
      }
    },
  },
}

Mode

模式(Mode)指示Webpack使用相应模式的配置。分为development和production两种模式，下面分别进行简述。

development: 开发模式，能让代码本地运行的环境，会将process.env.NODE_ENV的值设为development，同时启用NamedChunksPlugin和NamedModulesPlugin插件；
production: 生产模式，能让代码优化运行的环境，会将process.env.NODE_ENV的值设为production，同时启用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitreplaceStringsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin和UglifyJsPlugin插件。

Webpack 的功能

• 将多个文件合并（打包），减少 HTTP 请求次数，从而提高效率

• 对代码进行编译，确保浏览器兼容性

• 对代码进行压缩，减小文件体积，提高加载速度

• 检测代码格式，确保代码质量

• 提供热更新服务，提高开发效率

• 针对不同环境，提供不同的打包策略

Webpack 的发展历史

• 2012 年 3 月 10 日，Webpack 诞生

• 2014 年 2 月，Webpack 1 ，只支持AMD和CMD的编码规范

• 2016 年 12 月，Webpack 2 ，围绕ES Module展开

• 2017 年 6 月，Webpack 3

• 2018 年 2 月， Webpack 4

• 2020 年 10 月， Webpack 5

构建webpack知识体系 | 青训营