webpack学习笔记(一)安装与试用
由于初次接触 webpack(官网),对很多方面都不是很理解,在查找部分资料后记录一下自己的见解(本文实践基于webpack4)。
1. 个人见解
- 简单来说,webpack就是js的 打包 工具。个人认为比较类似于maven构建,打包java项目。
- 它能够根据 依赖关系 整合,压缩打包js,通过相关配置还能打包html/css,图片等静态资源文件。(把乱七八糟的文件塞到一块👍)
- 打包后的项目,js文件会被整合,减少请求量 。可以压缩内容,提升加载速度,同时具有一定安全性。
2. 安装webpack
2.1 所需环境
安装webpack,首先需要电脑中已经安装了node,npm,这一步就不说了。
2.2 安装步骤
webpack安装方式有 全局安装 和 局部安装 ,两种方式都需要安装一遍。安装较慢的可以使用淘宝镜像cnpm。
并且 webpack4 在安装时需要同时安装两个东西:webpack,webpack-cli(脚手架)。以下是安装方法:
2.2.1全局安装:
npm install webpack webpack-cli -g
2.2.2局部安装:
首先需要在项目(文件夹)根目录 生成package.json 配置文件,cmd进入 根目录,执行(所有选项回车确定即可):
npm init
然后安装webpack:
npm install webpack webpack-cli -s
成功安装后的文件夹目录如下,有 项目依赖包 以及 配置文件:
![]() |
到这里,我们的安装已经完成了。
3. 简单使用
在 默认配置 中,webpack只会去打包js,入口文件(entry)为:src/index.js,出口文件(output)为:dist/mian.js 。我们就使用默认配置来尝试一下。
3.1 新建index.js:
3.2 执行打包命令
直接在根目录执行命令
webpack
这个时候会看到已经 打包成功,根目录下出现dist(目标文件夹)里面的main.js就是打包好的文件:
但是会出现 警告:
这是因为webpack打包有两种模式,一种是开发模式:development,另一种是生产模式:production。
开发模式下打包的代码是格式化的,可以方便调试;生产模式下则是压缩过的。
在 没有配置 的情况下,它会用生产模式进行打包,但是会报 警告。我们可以在使用 cli命令 的时候,将参数带过去(也可以选择直接在 配置文件 中去设置):
webpack --mode=production
这样就不会报警告了。
3.3 测试
我们直接建一个html文件,然后引入这个生成的js,打开后,可以看到控制台输出的 “hello webpack” 了。
4. 总结
第一次学习webpack,问题还是挺多的,光安装就找了蛮久,因为中文官网找不到相关内容,不同版本之间各种方法也不一样。初步使用之后感觉还是挺好的,对于大的项目来说,webpack打包的确是省事不少。后续慢慢学,还会慢慢记录的~
修正一个错误:官网其实是有详细的介绍的,是自己没看到🤣,需要的小伙伴可以移步 >> 官网指南
这也是自己第一次写博客,写的内容呢也是简单的不能再简单的了,主要是记录一下自己的学习过程,希望能有所成长,同时也能对大家有所帮助(ps:写的都是大家会的,能有什么帮助🤣),总之呢,养成这个习惯吧🤓