构建打包工具webpack

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

Webpack的工作方式：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

在webpack看来一切都是模块！这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS 和 fonts 以及 image 等等等，只要通过合适的loaders，它们都可以被当做模块被处理。其实webpack的官网图片清晰明了说明webpack是个什么鬼了。

有了 webpack 就能够在 dev 的时候，将源代码的每一个代码量巨大的大文件，尽量拆分成精悍的小文件，然后各个文件以 import … from … 或者 require( ‘ ‘ ) 之类的方式互相引入，在上线前再用 webpack 打包成一个大文件，（因为 http 请求是很珍贵的，成本高昂，如果直接以多个小文件互相依赖的方式放到线上，会增加线上代码的请求个数，同时各个依赖之间的加载顺序一旦发生错乱，js的执行则会报错。为了减少请求个数，同时不让js的加载阻塞页面渲染，上线前用 webpack 打包、压缩，是十分有必要的）

入门

Webpack 入门教程

config (新版已可无仅介绍)

从单纯使用作为开发工具的角度，为了降低操作的复杂度webpack提供了webpack.config.js配置文件。当然还有更简单的webpackv4.0.0开始，可以不用引入配置文件，就可以实现打包。官方在持续的降低复杂度，但是从多掌握点知识的角度即如何做到由术入道，还是需要多关注的如何在大项目（复杂度高）的项目中怎么灵活使用配置文件。

现在已经有了webpack v5，不用引入配置了。

初始webpack.config.js

entry:源码的入口文件，webpack打包的第一步
output:输入目录，即源码经过webpack处理之后，最终生成的文件
loader:处理非javascript文件（webpack自身只理解javascipt）
plugin:在webpack的构建过程中处理其他任务，优化输出结果

module.exports = {
  //入口文件
  entry: './src/index.js',
  //导出目录
  output: {
    filename: 'bundle.js', // 打包后文件的名字
    path: path.join(__dirname, 'dist') // 打包文件的目录
  },
  //loader 模块和规则定义
  module: {
    rules: [
      {
        test: /.css$/, //规则 要求css结尾
        use: ['style-loader', 'css-loader'],
      }
    ]
  },
  //plugin
  plugins: [
    new CleanWebpackPlugin(),
  ]
}

loader vs plugin

loader:loader让webpack去处理那些非JavaScript文件(webpack自身只理解javascript)。loader可以将所有类型的文件转换成webpack能处理的有效模块。然后利用webpack的打包能力，对它们进行处理。
plugin:插件可以用于执行其他范围更广的任务，插件的范围包括，打包优化，代码压缩，甚至可以重新定义环境中的变量。插件的目的是用于解决loader无法实现的其他事。

Fulongのblog

构建打包工具webpack