webpack 4.x 基础

参考资料：

webpack 中文

webpack 基础篇

webpack 4.x.x 搭建项目完整详解步骤

webpack 初识

webpack 是现代 JavaScript 应用程序的静态模块打包工具。在 webpack 中，一切皆模块，JavaScript、CSS、LESS、SASS、JSON、图片等等在webpack中都是一个模块。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack 在构建项目时通过配置中提供的入口文件，来查找每一个相关的文件或资源，并将它们压缩打包合并成最终的输出。

webpack 概念

Entry 入口
Output 出口
Module 模块
- Loader 编译器
Plugin 插件
Mode 模式
Chunk 代码块
HMR(Hot Module Replacement) 模块热替换

webpack 初始项目搭建

Talk is cheap, show me the code.

依次敲入如下命令，搭建一个基于 webpack 的项目

mkdir webpack-learn
cd ./webpack-learn
npm init
npm i webpack webpack-cli webpack-dev-server
mkdir config dist src 依次创建文件夹，用以 webpack 配置的骨架
touch dist/index.html src/index.js 创建项目入口 html、js 文件
在 package.json > script 中配置 build 的运行命令

"build": "webpack",
npm run build

执行完命令后，dist 文件夹下会多出 main.js，这是 webpack 的默认打包配置生成的产物

webpack 默认打包入口为 src/index.js，默认打包模式为 --model development，打包模式一般分两种：

--model development 开发环境
--model production 生产环境

在 package.json > script 中配置生产环境命令：

"build:prod": "webpack --model production",

webpack 配置文件初识

对于一个投入生产的项目，还是需要对 webpack 进行高度配置的，在 config 文件夹中创建配置文件：touch config/webpack.dev.js

配置文件内容：

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装 npm install html-webpack-plugin
const path = require('path'); //node内置path模块，该模块主要集成文件系统路径操作API

const config = {
  mode: 'development',
  entry: {
    main: path.resolve(__dirname, '../src/index.js') // 入口 js 文件
  },
  output: {
    path: path.resolve(__dirname, '../dist'), // 输出位置
    filename: 'bundle.js' // 输出文件名
  },
  module: {
    rules: [],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }), //根据项目提供HTML模板，生成新页面，并将对应的输出打包压缩输出的js，链接到页面中;
  ],
  devServer: {
    contentBase: path.join(__dirname, './dist'), //编译打包文件的位置
		publicPath: '/',    
		port: 8088, //服务器端口号
		host: '0.0.0.0',
		proxy: {}, //代理列表
		compress: true,
		historyApiFallback: true, //开启服务器history重定向模式
  }
};

module.exports = config;

配置项介绍：

mode 模式

webpack打包的模式，开发环境或生产环境

模式是指webpack通过选择 development 、 production 和 none之中的一个，来进设置webpack编译的方式。我们可以通过设置配置文件中的 mode 字段，来配置webpack的编译模式

entry 入口

项目 js 的入口文件，支持多入口

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的

output 出口

js打包压缩后的出口文件，多入口时对应的配置应做相对变化

output 属性告诉 webpack 在哪里输出它所编译后的文件，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来处理输出的规则

module 模块

模块中的配置项 rules 可以配置loder使用的规则、作用范围、控制输出的名称、位置等；主要作用是编译，解析文件;

*Loader 编译器

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

plugins 插件

通过深入了解 webpack 插件机制的核心 tabpable 可以让我们更好地理解、使用和编写插件。其实质是触发 webpack 自身暴露提供的钩子触发编译过程中要执行的任务。

插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

devServer webpack-dev-server 配置

提供各种常用的开发功能，如代理，压缩，刷新资源等；其中比较值得关注的是HMR 模块热替换(HMR - Hot Module Replacement)技术。

webpack 结合配置文件继续开发

npm i html-webpack-plugin 安装未安装的插件

将 dist 清空，并在 src 中添加 index.html 模板文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>Hello webpack</div>
</body>
</html>

在 package.json 中添加启用自配置打包的命令：

"build": "webpack --config config/webpack.dev.js",
npm run build

此时，dist 文件夹中不再是 main.js，而是index.html 和 bundle.js，说明配置生效

且可以看到index.html中插入了：<script type="text/javascript" src="bundle.js"></script>

启动 `webpack-dev-server` 以启动项目

package.json中添加开发启动命令：

"dev" : "webpack-dev-server --config config/webpack.dev.js --color --progress --hot"

--color 启用彩色打印 --progerss 启用进程监测 --hot 启用热加载
npm run dev
打开localhost:8088