前言

最近在做webpack打包体积&&构建速度优化，发现自己对于webpack的了解不深入，多半是要优化哪里然后再去网上搜使用别人提供的插件来解决自己的需求，太“虚”了，因此决定系统的学习一下。以《webpack+babel入门与实例详解》为媒介对现有的知识体系进行查漏补缺，读书笔记仅记录自己之前不太熟悉的知识点，不全面哦～～

1.1入门

1.1.1简介

webpack的最主要的功能是模块打包，找出模块之间的依赖关系，按照一定规则将这些模块组织合并为一个js文件。（对于webpack来说，js文件,css文件,jpng和png图片等都是模块），默认会讲这些模块都合并为一个js文件，我们可以通过配置一些规则改变最终打包的文件

1.1.2安装

全局安装和本地安装，这两种安装方式都需要安装两个npm包：webpack（核心npm包）和webpack-cli（运行webpack命令所需要的npm包）

安装完成后会看到在node_modules下多了这两个npm包的依赖以及.bin目录，.bin目录下是可直接执行的脚本，可以通过npx xxx直接运行，也可以在package.json中配置scripts命令，这两种方式会运行node_modules/.bin下的命令。（.bin的由来，是因为发布的npm包的脚本文件第一行是 #!/usr/bin/env node，标明这是一个脚本，用node来执行该文件）

1.1.3 打包模式

webpack有三种打包模式：production(默认)，development和none，这三种模式通过mode参数来指定，production用于生产环境压缩代码体积，

可以通过在终端执行下面命令指定打包参数

npx webpack --entry ./a.js -o dist --mode=development

也可以通过webpack的配置文件

1.1.4 webpack的配置文件

webpack默认的配置文件是根目录下的webpack.config.js，执行npx webpack时会自动寻找该文件，找不到就用默认参数打包

上面的配置信息表示打包后的信息输出在当前根目录下bundle.js文件中

1.1.5 预处理器

loader（预处理器）是对所有引入资源文件的处理，webpack不进行额外配置时，只支持js文件和json文件，如果引入其他文件，例如css，图片等文件时会处理失败。

在引入css文件后需要配置css-loader和style-loader

css-loader：解析css文件，把解析后的css以字符串形式打包到js文件中，但是此时样式并未生效

style-loader：把js里的样式代码动态生成style标签并插入到html的head标签中

loader的配置示例：

use可以是字符串，也可以是一个字符串数组，数组的每一项都是一个预处理器，执行顺序是从后往前