webpack入门指南（一）

前言
在前端工程化的发展中，各种打包工具层出不穷，类似 gulp，rollup，grunt等，然而在spa页面中推荐使用webpack来打包，在小程序这种多页面配置中推荐gulp打包，在简单的页面中推荐用rollup打包；今天我们就来聊一聊webpack；

1 什么是webpack

Webpack是⼯程化、⾃动化思想在前端开发中的体现;它是⼀个模块打包工具，而所谓的模块：任何一个js，css, html文件都可以看做是一个模块；它会从⼊⼝模块出发，识别出源码中的模块化导⼊语句，递归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所有的依赖打包到⼀个单独的⽂件中,然后再输出；

2.安装webpack

2-1：布局安装（不推荐全局安装）

1：全局安装nodeJs （https://nodejs.org/en/）node版本越高，webpack打包速度越快，所以建议大家安装最新版本的node;

2：局部安装webpack

# 安装最新的稳定版本
npm i -D webpack
# 安装指定版本
npm i -D webpack@<version>
# 安装最新的体验版本 可能包含bug,不要⽤于⽣产环境
npm i -D webpack@beta
# 安装webpack V4+版本时，需要额外安装webpack-cli
npm i -D webpack-cli

检查安装

webpack -v //command not found 默认在全局环境中查找
npx webpack -v// npx帮助我们在项⽬中的node_modules⾥查找
webpack
./node_modules/.bin/webpack -v//到当前的node_modules模
块⾥指定webpack

在这里解释下为什么要局部安装webpack,因为全局安装webpack，会让你电脑下其他项目的webpack也指向全局的webpack版本，有可能造成不同项目依赖所依赖的webpack版本不一致，造成项目构建失败；

2-2 webpack默认配置

webpack⽀持JS模块和JSON模块;⽀持CommonJS ,Es moudule ,AMD等模块类型;⽀持零配置使⽤,比较鸡肋，需要自己做配置；

1：新建src⽂件夹；
2： 新建src/index.js、src/index.json、src/demo.js

### index.js
const json = require("./index.json");//commonJS
import { add } from "./demo.js";//es module
console.log(json, add(2, 3));
### index.json
{
 "name": "JOSN"
}
### demo.js
export function add(n1, n2) {
 return n1 + n2; }

构建
# npx⽅式
npx webpack
# npm script
npm run test

修改package.json⽂件

"scripts": {
 "test": "webpack"
},

原理就是通过shell脚本在node_modules/.bin⽬录下创建⼀个软链接。构建成功后我们会发现现⽬录下多出⼀个dist⽬录，⾥⾯有个main.js，这个⽂件是⼀个可执⾏的JavaScript⽂件，⾥⾯包含webpackBootstrap启动函数；