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中按需引用了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容