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：写的都是大家会的，能有什么帮助），总之呢，养成这个习惯吧

友情链接：

下一篇：webpack学习笔记（二）核心概念理解及简单运用