1.需求分析、基本配置[webpack搭建vue3脚手架]
发布于 2022年 01月 24日 06:36
这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战
脚手架git地址 持续更新中....
概览
vue3出来之后vue-cli新增了其脚手架,不得不说真的很香,就想着能不能使用webpack捣鼓一个高仿品。一方面是加深对webpack的学习,另一方面试扩展自己对ts、eslint配置的熟悉,还有就是将其搬到工作中,拥有更好的开发体验。
需求分析
既然是模仿,第一步肯定是体验vue-cli创建的项目。个人体验之后感受如下:
- hrm良好的支持,开发效率提高
- 良好的ts支持,良好的ts语法错误提示。
- eslint对vue3的良好支持,更好的代码规范。
第二步是提取核心功能:
webpack基础配置
接下来对webpack进行基础配置。基本要求:
- 简单易懂的目录结构。
- 配置根据环境进行分离。
- 常见插件配置
目录结构
依赖安装
- 使用命令:npm init -y生成一份package.json文件
- 所需依赖及版本(基本都是用的最新的)如下
"devDependencies": {
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.62.1",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0",
"webpack-merge": "^5.8.0"
}
脚本命令
package.json下新增两个脚本命令,开发与打包的命令。
"scripts": {
"dev": "webpack-dev-server --config build/webpack.dev.js",
"build": "webpack --config build/webpack.prod.js"
},
common基本配置
开发与生产共有的配置。
入口
entry: path.resolve(process.cwd(), './src/index.js'),
出口
output: {
filename: '[name].bundle.js',
path: path.resolve(process.cwd(), './dist')
}
插件配置
这里我们主要配置一下html-webpack-plugin
plugins: [
new HtmlWebpackPlguin({
template: path.resolve(process.cwd(), './public/index.html')
})
]
webpck.common.js完整代码
const path = require('path')
const HtmlWebpackPlguin = require('html-webpack-plugin')
module.exports = {
entry: path.resolve(process.cwd(), './src/index.js'),
output: {
filename: '[name].bundle.js',
path: path.resolve(process.cwd(), './dist')
},
plugins: [
new HtmlWebpackPlguin({
template: path.resolve(process.cwd(), './public/index.html')
})
]
}
dev开发配置
配置合并
使用webpack-merge用于dev配置文件与common配置合并
const { merge } = require('webpack-merge')
const common = require('./webpack.common')
module.exports = merge(common, {
mode: 'development',
})
serve配置
devServer: {
hot: true,
port: 8080
}
sourcemap配置
sourcemap根据自己需求选用,官网
devtool: "eval-source-map"
webpack.dev.js完整代码
const { merge } = require('webpack-merge')
const common = require('./webpack.common')
module.exports = merge(common, {
mode: 'development',
// 配置serve
devServer: {
hot: true,
port: 8080
},
// 配置sourcemap
devtool: "eval-source-map"
})
prod生产配置
这一章没什么生产配置,只是在webpack.prod.js中指明其是生产环境
const { merge } = require('webpack-merge')
const common = require('./webpack.common')
module.exports = merge(common, {
mode: 'production',
})
总结
webpack的基本配置就建立起来了,使用npm run dev进行开发,使用npm run build进行打包!下一章我们将配置vue3和一些常用loader(sass-loader、url-loader等)。