webpack知识总结通过官网的学习，进行的简单的总结，目的是自我知识回顾，持续学习持续更新中，如果读者您打算深入了解w

通过官网的学习，进行的简单的总结，目的是自我知识回顾，持续学习持续更新中，如果读者您打算深入了解webpack，请忽略此文吧。

1：webpack是什么：

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

2：四个核心概念：

入口(entry)
输出(output)
loader
插件(plugins)

2.1：入口起点(entry point)

指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。每个依赖项随即被处理，最后输出到称之为 bundles 的文件中

2.2：出口：(output)

属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist 注意，即使可以存在多个入口起点，但只指定一个输出配置。

2.3：loader

让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。 loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。 webpack 的配置中 loader 有两个目标：

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。 use 属性，表示进行转换时，应该使用哪个 loader。

module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }

意思是遇到以txt结尾的文件，请先使用raw-loader转换一下，在进行打包

注意：在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules

常见的有哪些loader： css-loader, ts-loader。 styel-loader babel-loader(\.(js|jsx)$/) file-loader less-loader html-loader json-loader

2.4：插件

插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务插件是 webpack 的支柱功能。插件目的在于解决 loader 无法实现的其他事。

常见插件： CommonsChunkPlugin（提取 chunks 之间共享的通用模块）HotModuleReplacementPlugin（模块热替换插件）

3：编译打包随着代码体积量的增加，愈发耗时久

代码体积优化：

1:删除不必要的依赖
2:合理使用工具
3:环境区分

、

4：待学习

使用过webpack里面哪些plugin和loader
webpack里面的插件是怎么实现的
dev-server是怎么跑起来
webpack整个生命周期，loader和plugin有什么区别
webpack 配置是标准的 Node.js CommonJS 模块

webpack知识总结