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/）

image-20201016193524345.png

官方对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打包后的变化：

image-20201019172122634.png

上述示例是最简单的例子，配置文件中仅包含输入和输出配置，输入为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 代码，压缩合并图片等。
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。