1.webpack从安装到打包

本文讲解基于webpack4。

一、为什么要使用webpack？

如今项目越做越大，越来越复杂，前端工程化就成为了必不可少的一环。我们知道，工程化是系统化，模块化，规范化的过程，而在这个过程中，webpack是一个非常重要的工具。

一、安装

webpack基于node环境

1.全局安装：npm install webpack webpack-cli -g
2.查看是否安装成功：webpack -v

此处有一个需要注意的地方是，webpack3没有webpack-cli

---

二、webpack的一些概念

1.webpack必须有入口与出口，即entry与output

• entry：打包的起点，webpack必须得有一个入口让它知道从哪里开始。
• output：处理完成后，结果文件输出到哪。

2.webpack.config.js是webpack的配置文件，也是项目的入口文件。当然，如果你的配置文件不叫webpack.config.js，需要额外指定一下。

---

三、基础打包

1.首先我们在一个空文件夹下新建一个webpack.config.js。在其中暴露一个对象，写上入口与出口。

这里我新建了一个app.js作为入口文件，其中内容如下。

2.项目初始化

• 项目打包必须进行项目初始化。
• 调用 npm init 来初始化 package.json，它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。

npm init -y  (y --》代表yes ，省去了默认选项点击)

初始化完成后，目录下出现 package.json。

3.打包

命令：webpack

命令运行以后，可以看到，已经打包成功了。

4.mode
虽然打包成功了，但是发现报了一个警告。

• 有关mode
  这里需要说明一下，mode是webpack4的属性，用来设置开发模式还是生产模式。
  webpack有一个理念就是减少他的配置文件。我们在前面可以看出，如果没有设置mode，main.js中的代码是压缩的。
  
  我们把mode设置为development之后，你不用做任何事，运行webpack后它的代码就不压缩了。
  

执行webpack

当然，对应的，mode设置为production以后，main.js中的代码是压缩的。

 mode:'production'

• 这里值得一提的是，在webpack3中，如果你不去写一些压缩的配置，是没有属性提供你去做代码压缩的。

---

三、全局与局部

上面我们不难看出，这个项目的打包一直在用全局的webpack打包。
在实际工作中，我们的打包却不是这样的。以vue为例，我们在项目中运行npm run build就会进行打包。这里，我们将实现这样的功能。

未完待续…