vuecli与webpack的关系？
vuecli基于webpack构建，vuecli有些配置需要直接使用webpack的配置项。 vuecli的配置项较少，要通过configureWebpack来配置webpack的配置项。 vuecli启动项目实际启动的是webpack-dev-server.
为什么要打包？
- 项目分2种：
- 企业级项目：jsp,asp(写页面：html,css,js)完了直接部署。
- 互联网想：尽量减少加载时间，提高用户体验，需要打包
- 打包：文件压缩（代码、注释压缩成一行）
什么是webpack？
- 打包工具：gulp grant
- 从项目入口文件开始，装载转换所有文件，优化处理文件，生成最终发布
- 重要概念：入口（main.js）,出口（dist）,装载器（loader，plugin）
npm init -y
- 生成package.json文件
npm i webpack -D
- package.json中自动增加"devDependencies": { "webpack": "5.25.1", "webpack-dev-serve": "3.11.2" }
- 创建src/main.js
- 手动新增webpack.config.js配置
- webpack4会自动使用默认配置，有webpack.config.js文件时会执行该配置文件。
// 自定义webpack
// path来自node
var path = require("path")
module.exports = {
mode: "development",
entry: "./src/main.js",
output: {
filename: "main.js", //指定输出文件名
path: path.resolve(__dirname, "dist") //指定输出目录 __dirname当前目录
}
}
npx webpack
- 打包
- npx是node自带的
- npx可以直接运行node_modules中的包
- webpack默认可以打包压缩项目，0配置
webpack-dev-server
把前端当做一个http容器访问，前后分离标志
安装：npm i webpack-dev-server -S
启动：npx webpack-dev-server
