一.什么是webpack
Webpack是一个静态的模块化打包工具,为现代的JS应用程序。
- 静态的:最终将所需的代码打包部署到静态服务器;
- 模块化:webpack默认支持各种模块化开发,AMD,CommonJS等;
- 现代的:webpack的出现和发展正是由于现代前端开发所面临的各式各样的问题。
- 打包:从官方给出的图中我们也可以看出webpack可打包的类型多样化,进而减少了页面请求。
二.Webpack安装
Webpack使用前提:
1.官方中文文档:https://webpack.docschina.org/
2.webpack的运行依赖于Node环境,在安装webpack前必须确保Node与npm正常使用。(Node官方网站:https://nodejs.org/)
Webpack的安装目前分为两个:webpack、webpack-cli。
两者间的关系:
执行webpack命令,会执行node_modules下的.bin目录下的webpack;
Webpack在执行时是依赖webpack_cli的,没有安装会报错;
在webpack_cli中执行代码时才是真正利用webpack进行编译和打包的过程。
Webpack安装方式:
1.全局安装(任一位置)
npm install webpack webpack_cli -g
2.局部安装(所需打包的文件夹下)
npm install webpack webpack_cli -D
注意:在实战中,多个不同项目打包,所需的webpack版本可能不同,使用全局安装会出错,很少使用,一般会在所用项目中单独局部安装。
三.默认打包
我们可以通过webpack进行打包,之后运行打包后的代码。
webpack
当我们在运行webpack时,它会查找当前目录下的src/index.js作为入口,如果我们想要自己来配置指定的入口和出口,可以进行以下操作:
npx webpack --entry ./src/main.js --output-path ./build
其中,./src/main.js是你想配置的入口,./bulid下的文件是你想配置的出口。
五.创建局部的webpack
- 创建package.json文件,用于管理项目的信息、库依赖等
npm init
- 安装局部webpack
npm install webpack webpack-cli -D
- 使用局部的webpack
npx webpack
- 在package.json中创建scripts脚本,执行脚本打包即可
“scripts”:{
“build”: “webpack”
}
npm run build