一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。
什么是webpack？
引入官网的一张图：
左边的js,sass,png等相当于一个个模块，右边是被一个编译工具编译出来的浏览器可解析的一个个模块。
hbs、sass等文件不能直接运行在浏览器中，因为解析不出来，需要一个编译工具转变成浏览器可解析的css文件..，js的es6语法在低版本浏览器中也无法兼容，需要一个编译工具去转义成目标浏览器可识别的js，图片可用编译工具进行压缩优化，体积压缩。这个编译工具，就包含webpack。
webpack就是能把不同模块编译成我们想要的东西，webpack就是个模块编译器，模块构建工具
webpack安装
- 环境准备
nodeJs: nodejs.org/en/
版本参考官网发布的最新版本，可以提升webpack的打包速度 - 安装方式
局部安装（推荐）
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>
-S指的是生产依赖，-D指的是开发依赖。
全局安装（不推荐）
安装webpack V4+版本时，需要额外安装webpack-cli
npm install webpack webpack-cli -g
检查版本
webpack -v
卸载
npm uninstall webpack webpack-cli -g
不推荐原因在于：全局安装webpack,这会将你项目中的webpack锁定到指定版本，造成不同项目因为webpack依赖不同版本而导致冲突，构建失败
启动webpack
- webpack默认配置
webpack默认⽀持JS模块和JSON模块
⽀持CommonJS Es moudule AMD等模块类型
webpack4⽀持零配置使⽤,但是很弱，稍微复杂些的场景都需要额外扩展
- 准备执行构建
新建src⽂件夹
新建src/index.js、src/index.json、src/other.js
### index.js
const json = require("./index.json");//commonJS
import { add } from "./other.js";//es module
console.log(json, add(2, 3));
### index.json
{
"name": "JOSN"
}
### other.js
export function add(n1, n2) {
return n1 + n2;
}
- 执行构建
2种方式：
- npx方式, 自带的
npx webpack; - npm script,
npm run test;
修改package.json文件：
"scripts": {
"test": "webpack"
},
原理就是：通过shell脚本在node_modules/.bin目录下创建了一个软连接。
- 构建成功
构建成功后，目录下会多出一个dist目录，里面有一个main.js,这个文件是一个可执行的JavaScript文件，里面包含webpackBootstrap启动函数。
