webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
为什么需要打包工具？
开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。
这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JavaScript、CSS 等语法，才能运行。
除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。
WebPack的五大核心概念
Webpack 本身功能是有限的，但是有着 高度可配置性，可以很好满足你的需求。
在开始前你需要先理解一些核心概念：
- entry 入口
指示Webpack从哪个文件开始打包，默认值是 ./src/index.js，但你可以通过在 webpack.config.js中配置 entry 属性，来指定一个（或多个）不同的入口起点。
- output 输出
指示 Webpack 打包完的文件输出到哪里去，如何命名等，主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
你可以在webpack.config.js中配置字段output来完成这些处理过程。
- loader
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
- plugin 插件
插件可以用于webpack功能扩展的任务。包括：打包优化，资源管理，注入环境变量。
- mode 模式
通过选择 development（开发模式）, production （生产模式）或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
webpack的配置文件
在项目根目录下新建文件：webpack.config.js
// 插件功能：应用程序生成一个 HTML 文件，并自动将生成的所有 bundle 注入到此文件中。
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
module.exports = {
// 入口
entry: './src/index.js', //默认值
// 输出
output: {
path: path.resolve(__dirname, "dist"),
filename: 'main.js', // 默认值
},
// loader 加载器
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }]
},
// 插件
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
// 模式
mode: 'development', // 开发模式
};Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范。
构建项目
- 项目目录
webpack_project # 项目根目录
└── src # 项目源码目录
├── js # js文件目录
│ ├── file1.js
│ └── file2.js
| ...
└── main.js # 项目主文件
└── index.html # HTML模板- 创建上述文件
需要将你打包的文件引入main.js中，否则webpack不会对该文件进行打包。
文件名：file1.js
export default function add(x, y) {
return x + y;
}文件名：main.js
import add from "./js/add";- npm初始化项目
npm init -y此操作会产生一个package.json文件，可以在文件中修改你的项目名称、依赖、版本等信息。
需要注意的是项目名称不能webpack否则下一步会报错。
- 安装所需依赖
npm install webpack webpack-cli -D在此建议将npm镜像使用nrm use taobao 更换为淘宝镜像，下载依赖更快。
- 启动webpack
开发模式：
npx webpack ./src/main.js --mode=development生产模式：
npx webpack ./src/main.js --mode=productionnpx webpack: 是用来运行本地安装 Webpack 包的。
./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。
--mode=xxx：指定模式（环境）
- 查看结果
查看控制台是否报错。是否生成有输出文件在目录./dist目录中。
此时的webpack只能处理 js 资源，一旦遇到 css 等其他资源就会报错。
