安装 webpack 搞定 Vue 打包

第 9 阶段：搞懂、搞透前端构建第 2 天

webpack 是一个通过 node.js 实现的工具，本节内容核心掌握 webpack 的安装和使用，并掌握如何通过 webpack 打包 vue 项目。通过 npm 安装步骤：

1、创建一个文件夹 day1，然后在这个文件夹下执行 npm init，目的是生成一个 package.json 文件；

2、通过 npm install -D webpack  或者：npm install --save-dev webpack 安装 webpack，-D 和 --sava-dev 等价。写本课程时使用的 webpack 版本是 4.43.0，大于等于 V4 版本需要安装 webpack-cli，执行命令 npm install --save-dev webpack-cli。

安装完成后，package.json 内容如下：

安装完 webpack 之后，我们通过 webpack 打包 vue 实例来学习 webpack 打包配置。

第一步：创建该有的文件

在 day1 这个文件夹下创建文件，最终目录结构如下，home 是采用 vue 实现的一个页面，：

index.html：html 模板文件，红框内，div 为 Vue 实例要使用的元素节点，script 标签中 ../dist/day1.js 文件是打包后的文件。

index.vue 相当于一个 vue 组件。

index.js，创建 Vue 实例的文件，将作为 Home 页面的入口文件。

第二步、配置 webpack

在打包之前需要先建一个 webpack.config.js 文件，这个文件用来告诉 webpack 该如何打包，包含了具体打包配置信息。

1、mode · 线下还是线上模式

打包模式，支持 development（开发模式，方便调试） 和 production（线上模式，会做各种优化处理，比如文件压缩）。

2、entry · 总要告诉我先从哪个文件开始吧

打包的入口，打包的时候要告诉 webpack 从哪个文件开始打包，例子中打包入口文件为 home/index.js，可支持多个入口，如下图：

3、output · 包打好了，要放到哪里

与打包结果相关的配置，filename 指定打包后文件名，path 指定打包结果保存的路径；

4、module · 一切文件皆模块

告诉 webpack 遇到各种文件要如何处理，比如遇到 vue 文件要交给 vue-loader 来处理，遇到 css 文件要交给 css-loader 来处理，总之不同文件要找能够处理它的工具来处理。

module 主配置 loader，loader 用来处理不同的文件，比如 less 文件可以 less-loader 转换成 css 文件。我们来看一下，一个 loader 其实就是一个函数：

5、plugins · 来点特殊的服务

plugin 也就插件，主要用来扩展 webpack 的功能，构建期间可监听 webpack 在编译期间产生的事件。plugin 其实就是一个类，需要实现一个 apply 函数，webpack 在使用插件的时候会调用插件实现的 apply 方法。

介绍完 webpack 配置文件中的基本概念后，我们看看 webpack.config.js 具体配置信息：

// path 为 node 提供的模块，可直接使用
const path = require('path');
// vue-loader was used without the corresponding plugin.
// Make sure to include VueLoaderPlugin in your webpack config.
// 使用 vue-loader 是官方要求必须要使用 VueLoaderPlugin 这个插件
// 引入时只能叫 VueLoaderPlugin 这个名字
const VueLoaderPlugin = require('vue-loader/lib/plugin');


// webpack 的配置其实就是一个对象
module.exports = {
    // 设置打包方式，支持 development 和 production
    mode: 'development',
    // 打包入口文件
    entry: './home/index.js',
    // 最终打包结果配置
    output: {
        filename: 'day1.js',
        path: path.resolve(__dirname, './dist')
    },
    // 配置 loader，不同文件应用不同的 loader
    module: {
        rules: [
            {
                // vue 文件采用 vue-loader 来处理
                test: /\.vue$/,
                use: ['vue-loader']
            },
            {
                // css 文件，先采用 css-loader 处理，
                // 再使用 style-loader 处理，注意顺序
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        // vue-loader 目前需要 VueLoaderPlugin，不然会报错
        // 直接创建了 VueLoaderPlugin 实例
        new VueLoaderPlugin()
    ]
}

第三步、打包命令配置

通过 ./node_modules/webpack/bin/webpack.js --config webpack.config.js 这条命令来进行打包，除了使用 --config 配置参数外，还可以通过 --help 查看其它命令参数：

为了避免每次都要写 ./node_modules/webpack/bin/webpack.js --config webpack.config.js 这么一长串的命令，可以使用 npm scripts 来简化操作，修改 package.json 中的 scripts 属性，添加 build，执行命令 npm run bulid 即可进行打包：

Node 8.2/npm 5.2.0  之后自带了 npx，它的作用是自动查找脚本所在的位置，可以省略 webpack 的具体文件路径：

"scripts": {
    "build": "npx webpack --config webpack.config.js"
  }

其实连 npx 都可以省略：

"scripts": {
    "build": "webpack --config webpack.config.js"
}

更过分的是可以这样写（--config 不建议省略）：

"scripts": {
    "build": "webpack"
}

第四步：跑起来

执行 npm run build，将在根目录下生成一个 dist/day1.js 文件，也就是打包后的文件。

在浏览器里打开 index.html 文件：

---

本节完，诚挚邀请你来思考下面的问题并打卡：
1、本节内容只有一个 html 页面，如果项目里有多个 html 页面，该如何配置 webpack；

2、在 index.html 文件中，我写了<scriptsrc="../dist/day1.js"></script> 这句话，如果有多个 html，我需要多次写这句话来引入不同的打包结果文件，有没有好的方式来做这件事情；

3、本节内容中你学到了什么，要没有需要改进的地方；

代码入口：https://github.com/lefex/FE/tree/master/webpack/day1

大家加油，贵在坚持！

---

推荐阅读：

第 8 阶段前端动效结束，下一阶段内容预告