前端项目练习(练习-003-webpack-01)

文章来源地址https://www.uudwc.com/A/Ev0N4/

学习webpack前,首先,创建一个web-003项目,内容和web-002一样。(注意将package.json中的name改为web-003)

想想,我们开发Java 的时候,Maven帮我们做的主要是编译,打包等等内容。开发前端其实也需要类似的工具。

当然打包用的构建工具肯定不止一个,我们先从webpack开始入手。

概念

本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

webpack中文文档地址是:概念 | webpack 中文文档 | webpack中文文档 | webpack中文网

由于npm是nodejs的包管理工具,所以,安装webpack需要用npm命令:

npm install webpack --save-dev

注意,后面加上 --save-dev 表示你将依赖包安装到devDependencies,该依赖只会在开发阶段用到,而在生产阶段不会用到。

除了webpack,还需要安装webpack-cli:

npm install webpack-cli --save-dev

为什么使用webpack要安装这两个包呢?

在webpack4之前,webpack本身和它的CLI以前都是在同一个包中,但从第4版开始,他们已经将两者分开来更好地管理它们。

也就是说,webpack 从 4.0 版本开始,在安装时,就必须要安装这两个东西。webpack 是打包代码时依赖的核心内容,而 webpack-cli 是一个用来在命令行中运行 webpack 的工具。

上面的两个包的安装还可以放到一条命令中:

npm install webpack webpack-cli --save-dev

安装结果如下:

安装完成后,项目根目录下面多了一个文件夹 node_modules 和一个文件 package-lock.json,

同时原来的package.json内容也有变化:

多了一个 devDependencies 字段,里面内容就是新安装的webpack和webpack-cli包和包的版本。

我们使用npm安装的包也都会列在这里。

node_modules文件夹里面是项目所有的依赖包,从第一个依赖包被 npm install 安装后,这个文件夹就会被创建,简单而言, node_modules 是为 Node 设计存放依赖的文件夹。

npm 5.0版本之后,npm install后都会创建一个package-lock.json文件,它的作用是:

1、锁定安装时的包的版本号,有git库时,需要上传到git,保证大家的依赖包一致。

2、package-lock.json 是在 `npm install`时候生成一份文件,用来记录当前状态下实际安装的各个npm package的具体来源和版本号。

3、它有什么用呢?因为npm是一个用于管理package之间依赖关系的管理器,它允许开发者在pacakge.json中间标出自己项目对npm各库包的依赖。你可以选择以如下方式来标明自己所需要库包的版本;例如:

"dependencies": {
 "@types/node": "^8.0.33",
},

这里面的 向上标号^是定义了向后(新)兼容依赖,指如果 types/node的版本是超过8.0.33,并在大版本号(8)上相同,就允许下载最新版本的 types/node库包,例如实际上可能运行npm install时候下载的具体版本是8.0.35。

大多数情况这种向新兼容依赖下载最新库包的时候都没有问题,可是因为npm是开源世界,各库包的版本语义可能并不相同,有的库包开发者并不遵守严格这一原则:相同大版本号的同一个库包,其接口符合兼容要求。这时候用户就很头疼了:在完全相同的一个nodejs的代码库,在不同时间或者不同npm下载源之下,下到的各依赖库包版本可能有所不同,因此其依赖库包行为特征也不同有时候甚至完全不兼容。

因此npm最新的版本就开始提供自动生成package-lock.json功能,为的是让开发者知道只要你保存了源文件,到一个新的机器上、或者新的下载源,只要按照这个package-lock.json所标示的具体版本下载依赖库包,就能确保所有库包与你上次安装的完全一样。

4、package.json缺点

  原来package.json文件只能锁定大版本,也就是版本号的第一位,并不能锁定后面的小版本,你每次npm install都是拉取的该大版本下的最新的版本,为了稳定性考虑我们几乎是不敢随意升级依赖包的,这将导致多出来很多工作量,测试/适配等,所以package-lock.json文件出来了,当你每次安装一个依赖的时候就锁定在你安装的这个版本。

5、安装依赖出问题的解决方式不同:

那如果我们安装时的包有bug,后面需要更新怎么办?

以前:在以前可能就是直接改package.json里面的版本,然后再npm install了。

现在:但是5版本后就不支持这样做了,因为版本已经锁定在package-lock.json里了,所以我们只能npm install xxx@x.x.x  这样去更新我们的依赖,然后package-lock.json也能随之更新。

接下来继续配置webpack,我们从控制台安装好webpack和webpack-cli后,需要在项目根目录下面创建webpack的配置文件,名字是 webpack.config.js。

注意,webpack配置文件的默认名字是 webpack.config.js  ,当然可以起其它的名字,但是这样会增加额外的配置,建议使用约定好的即可。

关于配置文件里面写什么内容,我们来看官方文档中给的一个例子:

webpack配置例子链接 

现在把例子中webpack.config.js中的内容复制到我们自己的webpack.config.js中:

其中只有基本的entry和output两个配置,我们来修改成自己的。

入口(entry)

入口起点(entry point) 指的是 webpack 应该使用哪个模块,来作为构建的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

entry默认值是 ./src/index.js,但你可以通过在webpack.config.js中配置 entry 属性,来指定一个(或多个)不同的入口起点。例如:

或者

上面的配置指定的,都是我们自己的项目的src/view/index.js文件。

关于entry(入口)的文档说明如下:

entry(入口)配置说明链接

输出(output)

output 属性告诉 webpack 在哪里输出它所打包好的文件 ,以及如何命名这些文件。官方文档给的例子中,filename表示主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。

关于output的配置文档说明如下:

输出(output)配置文档说明链接

关于我们自己的项目,可以把指定好的主要输出文件的名字去掉,直接让文件保持原来的命名,然后放到./dist文件夹中即可。

webpack.config.js配置完成后,内容如下:

除了entry和output,还需要配置 模式(mode) ,来看一下文档中的说明:

webpack模式(mode)说明文档链接

关于模式,非常类似于Java中的profiles,设置mode可以自动触发webpack内置的函数,达到优化的效果。开发阶段的开启会有利于热更新的处理,识别哪个模块变化。生产阶段的开启会有帮助模块压缩,处理副作用等一些功能。

这里是开发阶段,我们配置为 development。

以上,关于webpack打包的依赖包和配置就全部弄好了。结果如下:

最后,把webpack打包的指令配置在package.json中的scripts中即可。

webpack打包的指令就是webpack,我们放在build指令中:

下面执行打包,在根目录执行  npm run build  执行结果如下:

执行完成后,发现在根目录创建的dist文件夹,里面存放的就是被打包的文件index.js:

原文地址:https://blog.csdn.net/u011857851/article/details/133270254

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇 2023年10月10日 23:48
云原生之使用Docker部署PDF多功能工具Stirling-PDF
下一篇 2023年10月11日 01:18