Vue全家桶之webpack详解(四)，不可错过

• 在DOS命令窗口输入

webpack --version

• 注意是两个横线

如果你看到3.6.0，说明你已经成功安装了webpack3.6.0

2、准备工作

========================================================================

首先创建如下文件和文件夹

• dist文件夹： 用于存放之后打包的文件

• src 文件夹： 用于存放我们写的源文件

• main.js 项目的入口文件

• mathUtils.js 定义了一些数学工具函数，可以在其他地方引用，并且使用。

• index.html 浏览器打开展示的首页html

• package.json 通过 npm init 生成的，npm 包管理的文件

2.1、js文件的打包

---

现在的 js 文件中使用了模块化的方式进行开发，他们可以直接使用吗？不可以。

• 因为如果直接在 index.html 引入这两个 js 文件，浏览器并不识别其中的模块化代码。

• 另外，在真实项目当中有许多这样的 js 文件时，我们一个个引用非常麻烦，并且后期非常不方便对它们进行管理

我们应该使用webpack工具，对多个 js 文件进行打包

webpack src/main.js dist/bundle.js

2.2、使用打包后的文件

---

打包后会在 dist 文件夹下，生成一个 bundle.js 文件

• 此文件是 webpack 处理了项目直接文件依赖后生成的一个 js 文件，我们只需要将这个 js 文件在 index.html 中引入即可

2.3、示例

---

例如，我们使用模块化开发两个js文件

之后在 main.js 中进行引入两个js文件，在Termial终端使用 webpack 打包main.js

// 将src下的main.js 打包到dist目录下然后命名为bundle.js

webpack src/main.js dist/bundle.js

所以我们就知道了，我们以后在 src 下开发，之后让 webpack 打包main.js，然后我们引用打包后的js文件，这就是我们的开发模式。

3、webpack配置

=============================================================================

3.0、mode节点的可选值

---

module.exports = {

mode: ‘development’, // mode 用来指定构建模式,可选值有 development 和 production

}

mode 节点的可选值有两个，分别是：

1. development

• 开发环境

• 不会堆打包生成的文件进行代码压缩和性能优化

• 打包速度快，适合在开发阶段使用

2. production

• 生产环境

• 会对打包生成的文件进行代码压缩和性能优化

• 打包速度很慢，仅适合在项目发布阶段使用

3.1、入口和出口

---

每次使用webpack的命令都需要写上入口和出口作为参数，非常麻烦，有没有一种方法可以将者两个参数写到配置中，在运行时，直接读取呢？

• 当然可以，就是创建一个 webpack.config.js 文件

• 通过 entry 节点指定打包的入口

• 通过 output 节点指定打包的出口

const path = require(‘path’)

module.exports = {

// 入口:可以是字符串/数组/对象，我们这里的入口只有一个，所以写一个字符串即可

entry: ‘./src/main.js’,

// entry: path.join(__dirname,‘./src/index.js’)

// 出口:通常是一个对象,里面至少包含两个重要属性,path 和 filename

output :{

// 注意: path通常是一个绝对路径

path: path.resolve(__dirnam