1 项目框架
- 使用
npm init -y初始化项目，创建package.json, tsc --init创建tsconfig.json, 如果tsc命令找不到，则使用npm i typescript -g- 手动在根目录下创建
webpack.config,js作为webpack配置文件，该文件是基于node环境的，遵循common.js的语法。 - 创建其它文件，结构如图
├─package-lock.json 不用去动 ├─package.json 不用去动 ├─readme.md readme文档 ├─tsconfig.json ├─webpack.config.js ├─src 用来放置项目内容 | ├─main.ts 入口文件 | ├─views 放置Vue文件 | | └App.vue | ├─assets 放置静态资源 ├─public | └index.html 模板 - 安装webpack相关库
npm i webpack npm i webpack-cli npm i webpack-dev-server - 安装打包时要用到的插件，如html-webpack-plugin
npm i html-webpack-plugin
2 基本配置
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpack demo</title>
</head>
</html>
最简单的html配置，打包后的index.html文件就是基于这个模板的
src/main.ts
const a = 1
先随便放点东西（这里先不用ts的写法）
webpack.config.js
// 配置智能提示Configuration
const {Configuration} = require('webpack')
const path = require('path')
// 引入html-webpack-plugin插件
const htmlWebpackPlugin = require('html-webpack-plugin')
/**
* @type{Configuration}
*/
const config = {
//development 开发环境
mode:"development",
// 入口文件
entry:"./src/main.ts",
// 出口,使用一个随机的hash值命名
output:{
filename:'[hash].js',
//配置输出文件夹为dist
path:path.resolve(__dirname,'dist')
},
plugins:[
//html模板的使用
new htmlWebpackPlugin({
template:"./public/index.html"
})
]
}
// 暴露config对象，这里是common.js的写法
module.exports = config
这样的配置有一个问题,打包出来的文件每次命名都会不一样,上次打包的文件也会有残留，这个可以通过clean-webpack-plugin来解决，原理就是将上一次的dist文件夹删除。
package.json
选择"scripts"的"build"以及"dev"，配置"webpack-dev-server"以及"webpack"。这样当我们输入npm run build的时候就会执行webpack指令了。
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack",
"dev":"webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.0"
}
}
设计一个json文件来配置的原因就是，我们不能直接在命令行里面输入webpack，我们的全局变量里面没有webpack
但是如果是执行npm run build，node会帮我们从node_modules里面先去找webpack（最后再找全局变量），在node_modules/.bin文件夹下，我们可以找到webpack.cmd webpack.ps1等文件，实际上就是去执行了这些文件（根据不同的系统）
3 打包
在终端输入npm run build，就会出现打包后的dist文件，里面有一个HTML文件和JS文件， 可以发现，HTML文件的结构与我们配置的./public/index.html类似，同时引入了另一个js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpack demo</title>
<script defer src="95abf99327cc50dbef53.js"></script></head>
</html>
js文件中也能看到我们之前写的const a=1
最简单的打包就完成了，后面就写针对vue的打包
