什么是webpack:
官方解释: webpack is a static module bundler for modern JavaScript applications
- bundler:打包,webpack可以将帮助我们进行打包，所以它是一个打包工具
- static：静态的,我们可以将代码打包成最终的静态资源部署到服务器中
- module：模块,webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等
- modern：现代,因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；
webpack的使用前提:
webpack的运行是依赖Node环境的,需要安装Node.js
安装webpack
npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装
webpack和webpack-cli的关系:
- 执行webpack命令,会执行node_modules下的.bin目录下的webpack
- webpack在执行时依赖webpack-cli,webpack-cli中代码执行时,才真正利用了webpack进行编译和打包的过程
webpack默认打包
打开vscode终端在当前目录下执行webpack命令
- 会生成一个dist文件夹,里面存放一个main.js文件,这个文件就是我们打包之后的文件
- 当我们执行webpack命令时,webpack会自动查找当前目录下的src/index.js作为入口,如果没有index.js就会报错
- 我们可以通过配置来自定义指定入口和出口
webpack --entry ./src/main.js --output-path ./build
创建局部的webpack
- 第一步:创建package.json文件,用来管理项目的信息和库依赖
npm init - 第二步：安装局部的webpack
npm install webpack webpack-cli -D - 第三步：使用局部的webpack
npx webpack - 第四步：在package.json中创建scripts脚本，执行脚本
"scripts":{"build":"webpack"}
npm run build
webpackp配置文件
我们可以在一个根目录下创建一个webpack.config.js文件,用来配置文件
const path=require('path');
//导出配置信息
module.exports = {
//入口
entry: "./src/main.js",
//输出
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build")
}
}
一枚前端初学者,如果有错误,希望各位指正,谢谢大家
