开淦!

---

webpack官网

一、webpack

1.1 webpack的作用

官网中给了解释：

• 打包所有的样式
• 打包所有的资源
• 打包所有的脚本
• 打包所有的图片
• 打包所有的样式表

浏览器能解析的是js、css、和一些静态资源，但是平时开发中我们经常会用到less、sass、hbs（模板引擎）,浏览器是不能直接取识别这些东西的，就需要一个工具将他们转换成浏览器能识别的样子，现在多数人使用的工具就是-webpack。

---

1.2 webpack的本质

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

---

1.3 市面上常用的打包工具：

• webpack
• rollup：更常用于打包js
• parcel
• fis（百度）

---

1.4 四个概念

• 入口(entry)：要打包的原文件，单页应用一般是一个入口，多页应用一般是一个页面对应一个入口
• 输出(output)：要打包去的位置。
• loader：用于处理某种特定文件格式的东西，比如css-loader、babel-loader。
• 插件(plugins)：loader被用于转换某些类型的模块，plugins的执行范围更广，会作用于整个webpack打包的过程。
• 模式：通过选择 development 或 production 之中的一个，来设置 mode 参数。

---

二、创建项目

2.1 安装依赖

新建项目的项目名称不能叫webpack，会报错我遇到过=_=

1. 为了可以使用npm安装东西，首先npm i，然后一路回车

项目中出现了package.json文件

2. npm i webpack webpack-cli -D

webpack4.0之后要单独安装webpack-cli
项目中多了2个文件

Q1：现在可以在控制台中直接使用指令webpack xxx了吗？

A1：不可以，想在控制台中直接使用指令需要是全局安装webpack，但刚才输入的是-D，不是-g，若想可以直接使用webpack指令，可以在package.json中scripts中做如下配置操作，就会自动到你局部安装的包node_modules中去找你想要的东西。

3. npm run build 发现warning和报错

warning提示我还没有设置mode，webpack会默认使用’production’的方式来编译代码。

‘production’理解为线上模式，会压缩代码；
‘development’理解为开发模式，不会压缩成看着恶心的代码，方便程序员能看懂调试用)

解决：在build中配置模式

报错是提示我在我的项目中没有/src目录，项目需要一个入口的地方。

解决：项目下新建一个src/index.js文件

2.2 entry相关

我在入口文件src/index.js中写一句话console.log(‘123’); 然后npm run build

此时控制台中没有之前的warning和error了

并且项目中多了dist/main.js文件

此时形成了闭环（有互联网内味儿了~），npm run build打包时会自动去入口src/index.js中找内容，将打包后的内容放在出口dist/main.js中。

以上是webpack最基本的操作，但是在开发当中不会全使用默认配置，会在此基础上使用一些稍微洋气点的操作。

---

2.3 配置文件

新建一个webpack.config.js，其实这是一个node的脚本文件，用于向外暴露node的配置，webpack会读取这个文件，对文件打包。

目前这个文件还不能使用export default，因为目前的webpack.config.js还没有经过babel转换，使用module.exports={}

---

1. 引入入口文件

Q2：入口文件只能叫src/index.js吗？
A2：不
入口文件名字也任意改，只要能和entry中的路径能对应上就可以。

Q3：入口文件只能有一个吗？
A3：不
以下两种写法是一个意思，作用一样

既然entry可以配置成对象，说明entry是可以有多个的。
配置了2个入口文件home.js和about.js，npm run build
发现出口文件的文件名默认就是入口文件的对应名字了

2.4 output相关

output要配置成一个对象

上文提到webpack.config.js是node的配置，所以就可以使用node相关的模块，这里使用了node中的路径解析模块path。

Q4：我的出口文件不想叫main.js要怎么办？
A4：更改output{}中的配置
以下配置表示在当前目录下dist文件夹中的output.js是出口文件

如果不配置filename默认的出口文件叫做main.js

npm run build后发现dist下确实多了一个output.js

会报错的情况

可以用[ ]填写webpack定义好的引用

这样打包后的结果和不配置output{}时的结果是一样的。

Q5：项目中的出口文件上通常带有一串hash值（main.xxxxxxxxxxxx.js）是怎么做到的？
A5：配置[name].[hash].js

Q6：hash值太长看着不舒服
A6：配置[name].[hash:6].js，会截取前6位hash值。

Q7：突然发现两个入口文件生成的hash值是一样的怎么办？

并且我若更改src/home.js下的内容，重新执行一次

发现没有更改过的about.js的hash值也跟着变化了

A7：以上的hash配置方式作用于整个webpack打包过程，使用chunkhash可以根据不同模块生成不同的hash值。

并且此时只更改home.js件，打包后只会home.js的hash值发生变化。

webpack中有三种hash
第一种是作用于整个打包过程的hash
第二种是chunkhash，可以根据不同模块生成对应的hash，使用较多
第三种是contenthash，使用略少，根据内容计算hash

---

2.5 更改配置文件位置

webpack.config.js默认是放在根目录下的，开发中通常要放在scripts或者buuild文件夹下，此时还需要在package.json中做配置，否在去默认的根目录下找找不到会报错。

打包后的文件会自动放在scripts/dist下

因为配置文件中之前写了打包文件的出口文件夹和配置文件在同一级

配置文件webpack.config.js也是可以更改名字的，只要在package.json中配置的配置文件能对应上即可

---

我是洋洋李，一个前端搬砖小弟

一万年太久，只争朝夕，下次见