前言
在前端工程化的发展中,各种打包工具层出不穷,类似 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启动函数;