webpack的世界里，万物皆模块
简介
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。
安装
# 安装webpack V4+版本时，需要额外安装webpack-cli
npm i webpack webpack-cli -D
# 检查版本
webpack -v
# 卸载
npm uninstall webpack webpack-cli -D
启动 执行构建
默认配置
- webpack默认只⽀持JS模块和JSON模块
- 基于nodeJS，⽀持CommonJS ，Es moudule， AMD等模块类型
- webpack4⽀持零配置使⽤,但是很弱，稍微复杂些的场景都需要额外扩展
// webpack.config.js
const path = require("path");
module.exports = {
// 必填 webpack执⾏构建⼊⼝
entry: "./src/index.js",
output: {
// 将所有依赖的模块合并输出到main.js
filename: "main.js",
// 输出⽂件的存放路径，必须是绝对路径
path: path.resolve(__dirname, "./dist")
}
};
启动构建
npx方式
npx webpack
npx 建立一个软链接 node_modules/.bin/ 下启动相关服务
npm script
npm run test
// package.json
"scripts": {
"test": "webpack"
}
通过shell脚本在node_modules/.bin⽬录下创建⼀个软链接
核心概念
- 入口（entry）
webpack打包⼊⼝⽂件 默认值 ./src/index.js
- 出口（output）
出口 构建输出的位置 默认值 ./dist/main.js
- 加载器（loader）
webpack 默认只支持JS和JSON模块， loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
- 插件（plugin）
插件机制 原理上是作用于整个webpack打包周期的 有生命周期的概念 在打包中 打包完成后做一些操作
是对webpack的拓展和增强
- 模式（mode）
构建的模式 node/development/production
