npm 安装less插件_安装 webpack 搞定 Vue 打包

作者：Lefex

转发链接：https://mp.weixin.qq.com/s/nCjUZgQMzOSHZ2Z05LuvqA

前言

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 遇到各种文件要如