Webpack学习与心得
前言
通过vue-cli可以创建一个vue项目：
// 已安装node环境前提下
npm install vue-cli -g // 全局安装 vue-cli
vue init webpack new-project // 通过vue-cli创建一个名为 new-project的项目
虽然通过上面简单的命令就可以创建一个vue项目，但是疑问也随之而来
vue-cli所创建项目下的那么多目录都是些什么？如何对这个vue项目做一些个人配置？
首先vue-cli并不是此文探讨的重点，进入vue-cli官方网站，可以看到一句话：vue-cli基于webpack 构建，并带有合理的默认配置（vue-cli官网地址：https://cli.vuejs.org/zh/guide/）
官网对vue-cli的说明很详细，其中的重点是：vue-cli是基于webpack，如果我们要了解vue-cli是如何工作的，要了解vue-cli生成的目录与配置问题，就有必要去了解webpack
什么是Webpack？
此处继续引用官方网站的一张图来说明webpack的作用：（官网地址：https://www.webpackjs.com/）
官方对webpack的概念介绍有点抽象，简而言之，webpack的作用就是打包
其具体作用如下：
- 将ES6语法转成ES5
- 将Less、Sass转换成css
- 将html、css、js代码压缩合并
- 将图片压缩
- 自动打开浏览器、保存时自动刷新
- 其它
webpack的作用很多，还有许多开源插件，能够拓展它的功能，此文从它的基础功能说起
Webpack使用演示
webpack有很多用处，此处演示一个最简单的例子，并通过此例初步了解webpack的工作流程
- 首先需要安装webpack
npm install webpack -g
- 新建测试目录demo01，并在demo01下新建两个js文件：main.js，webpack.config.js
main.js
document.write('<h1>Hello World</h1>');
let a = 100; // let 为es6语法
document.write(a);
webpack.config.js
module.exports = {
entry: './main.js', // 打包的入口文件为main.js
output: {
filename: 'bundle.js' // 打包后的生成文件为dist/bundle.js
}
};
在main.js中包含了es6语法，通过这两个文件，演示webpack的语法转换
- 在当前目录运行命令：
webpack --config webpack.config.js
- 运行完上述命令后，可以看到当前目录下多了一个dist目录，其中dist/bundle.js便是打包生成的文件，打开这个文件，可以看到main.js打包后的变化：
上述示例是最简单的例子，配置文件中仅包含输入和输出配置，输入为main.js，输出为dist/bundle.js，对比两个文件，可以看出webpack的一些作用：代码转换、文件优化，其中webpack.config.js是配置文件
Webpack完整配置示例
webpack高度可配置，在使用它之前，需要理解其四个核心概念：Entry、Output、Loader、Plugins
- Entry: 指定webpack开始构建的入口模块
- Output: 指定webpack如何命名输出的文件以及输出的目录
- Loader: webpack默认只能处理JavaScript，loader的存在能是其将一些非js文件，变成能够处理的模块
- Plugins: 它扩展了webpack的功能，其功能十分强大，例如打包优化、压缩等
以下通过一个比较完整的示例，来演示上面四个配置项：
-
新建一个demo02目录，目录中将包含以下文件：app.css、main.js、webpack.config.js
app.css
body { background-color:blue; }main.js
require('./app.css'); document.write('<h1>Hello World</h1>'); document.write('<h1>123</h1>'); let a = 100; // let 为es6语法 document.write(a);webpack.config.js
var HtmlwebpackPlugin = require('html-webpack-plugin'); // 外部plugin module.exports = { entry: './main.js', // 打包入口文件 output: { filename: 'bundle.js' // 输出文件 }, module: { rules:[ // loader列表 { test: /\.css$/, // 匹配.css尾缀的文件 use: [ 'style-loader', 'css-loader' ] // 使用两个loader }, ] }, plugins: [ // 插件列表 new HtmlwebpackPlugin({ title: 'Webpack-demo', // 生成的html的标题 filename: 'index.html' // 生成的文件名称 }) ] };上面配置文件中包含了entry、output、loader、plugin，是一个比较完整的配置，其中：
style-loader作用：使webpack能够识别解析css文件
style-loader作用：让解析后的css内容，能够作用于页面
html-webpack-plugin作用：它的主要作用是用于生成html文件，默认的webpack主要是用于处理js文件的依赖图构建和打包，当需要生成html文件时，便需要使用HtmlWebpackPlugin插件
-
在打包前需要安装一些依赖，不然会报错：
npm install style-loader npm install css-loader npm install html-webpack-plugin -
打包
webpack --config webpack.config.js注意：如果打包时报错Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'，可运行命令：npm link webpack --save-dev来解决
-
生成：
在dist目录下，可看到生成的两个文件bundle.js、index.html，我们可以通过浏览器打开index.html
image-20201020102937670.png
此示例中， 输入文件为：app.css、main.js，输出文件为：bundle.js、index.html
app.css和main.js中的内容被一起写入了bundle.js，并且自动生成了index.html，此html文件自动引用bundle.js，通过浏览器打开，就能看到上面的网页效果。
小结
从以上两个demo可以看出webpack的强大功能，不过上面的演示才只是它的冰山一角，它还有许多其它的功能和配置。
通过vue-cli创建的项目，可以看到项目的build目录下有三个文件：webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js，这三个文件便是vue项目构建的webpack配置文件，如果我们要对vue项目做一些特别的配置或者特别的构建，就会接触到这三个文件
webpack也不止用于对vue的构建，也可用于构建React或者个人项目，总的来说，webpack包含以下功能：
- 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
- 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
- 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
- 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
- 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
- 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
- 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
