Webpack 学习

webpack 的配置组成

fig1. webpack 的配置文件

webpack 的构建机制核心离不开依赖图，将一切资源（js、css等代码资源和字体、图片等非代码资源）视为一个个 module(模块)，从入口文件（entry）开始递进查找依赖文件，这个过程可看做是构建依赖图，根据依赖图去打包生成相应的资源。

fig2. webpack 的依赖图

webpack 默认配置文件为 webpack.config.js，当然实际使用中根据使用环境还可以创建使用 webpack.dev.config.js(开发环境), webpack.product.config.js（生产环境）。（可以通过 webpack --config 指定配置文件）

核心概念

Entry：

指定 webpack 打包的入口文件。

image.png

用来指定 webpack 的打包入口文件（分为单入口与多入口，典型例子分别为 SPA 和 MPA），

Output：

指示webpack将编译后的文件输入到磁盘（指定文件路径与名称）
Output与Entry密切相关，一般多个入口对应多个出口，Output通过 []占位符来确保文件名称的唯一，配置文件中的代码与打包生成的结果如下

entry:{
       index:'./src/index.js',
       search:'./src/search.js'
    },
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].js'
    },

多入口打包结果

Loaders：

webpack 原生只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其他文件类型并将其转化为有效的模块，并添加到依赖图中。
Loader 本身是函数，接收源文件作为参数，返回转换的结果。
常见的 Loader

常用的Loader

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

test 指定匹配规则（一般用正则表达式）， use 指定使用的 loader 名称。

Plugins

插件用于 bundle 文件的优化、资源管理、环境变量注入等，作用于整个构建过程。可视为对 webpack 的增强，或者说 Loader 做不了的就交给 plugin 去实现。

常见的 plugin

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

Mode

指定当前的构建环境：production development none，设置 mode 可以使用 webpack 内置的函数，默认为 production.

mode 内置函数功能

文件监听

在发现源码发生变化时，自动重新构建出新的输出文件。
webpack 有两种开启文件监听的方式：
（1）启动 webpack 命令时加上 --watch 参数；
（2）配置 webpack.config.js 时设置 watch:true（或者在配置文件中的 scripts 中设置 "watch":"webpack --watch"）。
这样在编辑器里改动并保存源码后，webpack 就会自动重新构建，不过开发者还是需要手动刷新浏览器才能看到改动后的效果。
以下是原理分析图，注意 poll 的单位是 ms，所以图中说明有误，应该是每秒一次。
watchOptions.aggregateTimeout：当一个文件更改后，并不会立即开始重新构建，而是会有一段时间延迟，允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里，以毫秒为单位。

文件监听原理分析.png