持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情
什么是webpack
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
webpack安装
webpack是基于nodeJs环境的，需要提前安装好node环境。版本参考官网发布的最新版本，可以提升webpack的打包速度
安装方式：
- 全局安装
npm install webpack -g 固定版本
# 检查版本
webpack -v
# 卸载
npm uninstall webpack webpack-cli -g
- 局部安装
- -D
npm install webpack webpack-cli -D 4x/5x npm install webpack 3x
步骤：
npm init -y # 初始化npm配置⽂件
npm install --save-dev webpack # 安装核⼼库
npm install --save-dev webpack-cli # 安装命令⾏⼯具
# 安装最新的4.x稳定版本
npm i -D webpack@4.44.0
# 安装指定版本
npm i -D webpack@<version>
启动webpack
准备执行构建：
- 创建的webpack文件夹并初始化，局部安装webpack
- 新建src目录
- 创建src/index.js
console.log('Hello webpack')
执行构建：
# npx⽅式
npx webpack
# npm script
npm run build
修改package.json⽂件：
"scripts": {
"build": "webpack"
},
原理就是通过shell脚本在node_modules/.bin⽬录下创建⼀个软链接
构建成功：
构建成功之后⽬录下多出⼀个 dist ⽬录，⾥⾯有个 main.js ，这个⽂件是⼀个可执⾏的JavaScript⽂件，
⾥⾯包含webpackBootstrap启动函数。
webpack的配置文件
默认配置文件是：webpack.config.js
webpack打包的时候会查看项目下面有没有自己的配置文件，如果有配置文件并且配置文件中有配置信息，则按照配置文件中的信息进行打包；如果有配置文件，但是里面没有信息，仍按照默认配置进行打包。
// webpack的配置文件
const {resolve} = require("path")
// webpack是基于nodeJS
// 原理就是通过shell脚本在node_modules/.bin⽬录下创建⼀个软链接
module.exports = {
// 入口
entry: "./src/index.js",
// 出口
output: {
// 生成的资源存放的位置, 必须是绝对路径
path: resolve(__dirname, './dist') ,
// 生成的资源文件名
filename: 'index.js'
},
mode: "development" // none（既无开发体验，也无优化） development（开发体验） production(优化)
}
