Webpack入门

依照webpack 起步，做了一遍demo，记录几点体会

1.基本安装

创建目录，本地安装webpack

npm init -y

image.png

npm init 用来初始化生成一个新的 package.json 文件。它会向用户提问一系列问题，如果你觉得不用修改默认配置，一路回车就可以了。
如果使用了 -f（代表force）、-y（代表yes），则跳过提问阶段，直接生成一个新的 package.json 文件。

npm install webpack webpack-cli --save-dev

2.创建目录结构及文件

image.png
image.png

调整package.json文件，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。

image.png

当前<script> 标签之间存在隐式依赖关系。index.js 文件执行之前，还依赖于页面中引入的 lodash。之所以说是隐式的是因为 index.js 并未显式声明需要引入 lodash，只是假定推测已经存在一个全局变量 _。
使用这种方式去管理 JavaScript 项目会有一些问题：
无法立即体现，脚本的执行依赖于外部扩展库(external library)。
如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。
如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。
让我们使用 webpack 来管理这些脚本。

3.使用webpack

创建一个bundle文件

首先，我们稍微调整下目录结构，将“源”代码(/src)从我们的“分发”代码(/dist)中分离出来。“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载：

image.png

要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：

image.png image.png image.png image.png

本地使用的是8.11.3版本的node,，不支持npx命令，在工程根目录下，直接调用脚本

image.png

执行命令后，我们可以看到，dist文件夹中，多了main.js，这也就是所陈述的，“通过声明模块所需的依赖，webpack利用这些信息构建依赖图，使用这个图生成优化过的bundle”

image.png

4.使用配置文件

从上面的操作我们可以看到，webpack通过分析模块之间的依赖就可以生成bundle，但是有时候，更复杂的依赖关系，或者根据不同依赖需要生成多个bundle的时候，就需要一个配置文件来提高效率
增加webpack.config.js并编辑

image.png

通过新配置文件再次执行脚本

image.png

可以看到，dist文件夹中多了一个bundle.js，这就是按照config来生成的bundle

image.png

注意例程中这样一段话

image.png

也就是说，只要存在webpack.config.js，直接执行脚本就会默认使用它，带后面的配置，只是为了可以传递不同名称的配置文件，我们来试一下

先删掉已生成的bundle.js，不带config，直接执行脚本，依然生成了bundle.js

image.png
image.png

再把配置文件改个名字试一下，另存一个test.config.js，指定生成的文件名为pack.js，用以区分，用脚本带着这个执行一下看看，仍旧先删了bundle.js，果然生成了pack.js

image.png

5.使用npm脚本

每次都输一串命令来执行脚本有些麻烦，可以使用npm脚本
在package.json中加入描述

image.png

这样我们就可以输入npm run build来执行脚本了
按照上面描述，如果不带config参数的话，如果存在webpack.config.js，那么默认执行它，我们会用新的命令来试一下，成功了

image.png

使用run也可以传递参数

image.png

我们来试着传递一下test.config.js，看看能否生成pack.js，也可以生成

image.png

这样我们就可以根据需要来生成打包文件了，在index.html中按需引用了