依照webpack 起步,做了一遍demo,记录几点体会
1.基本安装
创建目录,本地安装webpack
npm init -y
npm init 用来初始化生成一个新的 package.json 文件。它会向用户提问一系列问题,如果你觉得不用修改默认配置,一路回车就可以了。
如果使用了 -f(代表force)、-y(代表yes),则跳过提问阶段,直接生成一个新的 package.json 文件。
npm install webpack webpack-cli --save-dev
2.创建目录结构及文件
调整package.json文件,以便确保我们安装包是私有的(private),并且移除 main 入口。这可以防止意外发布你的代码。
当前<script> 标签之间存在隐式依赖关系。index.js 文件执行之前,还依赖于页面中引入的 lodash。之所以说是隐式的是因为 index.js 并未显式声明需要引入 lodash,只是假定推测已经存在一个全局变量 _。
使用这种方式去管理 JavaScript 项目会有一些问题:
无法立即体现,脚本的执行依赖于外部扩展库(external library)。
如果依赖不存在,或者引入顺序错误,应用程序将无法正常运行。
如果依赖被引入但是并没有使用,浏览器将被迫下载无用代码。
让我们使用 webpack 来管理这些脚本。
3.使用webpack
创建一个bundle文件
首先,我们稍微调整下目录结构,将“源”代码(/src)从我们的“分发”代码(/dist)中分离出来。“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录,最终将在浏览器中加载:
要在 index.js 中打包 lodash 依赖,我们需要在本地安装 library:
本地使用的是8.11.3版本的node,,不支持npx命令,在工程根目录下,直接调用脚本
执行命令后,我们可以看到,dist文件夹中,多了main.js,这也就是所陈述的,“通过声明模块所需的依赖,webpack利用这些信息构建依赖图,使用这个图生成优化过的bundle”
4.使用配置文件
从上面的操作我们可以看到,webpack通过分析模块之间的依赖就可以生成bundle,但是有时候,更复杂的依赖关系,或者根据不同依赖需要生成多个bundle的时候,就需要一个配置文件来提高效率
增加webpack.config.js并编辑
通过新配置文件再次执行脚本
可以看到,dist文件夹中多了一个bundle.js,这就是按照config来生成的bundle
注意例程中这样一段话
也就是说,只要存在webpack.config.js,直接执行脚本就会默认使用它,带后面的配置,只是为了可以传递不同名称的配置文件,我们来试一下
先删掉已生成的bundle.js,不带config,直接执行脚本,依然生成了bundle.js
再把配置文件改个名字试一下,另存一个test.config.js,指定生成的文件名为pack.js,用以区分,用脚本带着这个执行一下看看,仍旧先删了bundle.js,果然生成了pack.js
5.使用npm脚本
每次都输一串命令来执行脚本有些麻烦,可以使用npm脚本
在package.json中加入描述
这样我们就可以输入npm run build来执行脚本了
按照上面描述,如果不带config参数的话,如果存在webpack.config.js,那么默认执行它,我们会用新的命令来试一下,成功了
使用run也可以传递参数
我们来试着传递一下test.config.js,看看能否生成pack.js,也可以生成
这样我们就可以根据需要来生成打包文件了,在index.html中按需引用了