拆解：从0-1用webpack创建工程项目
站长
· 阅读数 55
本文2708字，几乎浓缩了我3年多工作的全部精华。
用傻瓜式的操作就能学会怎么从0开始搭建一个工程化项目！那么现在正式开始。
以下是本文的文章结构，如果已经非常了解从0到1配置过程的朋友，可以直接翻到最底部，下面有工程文件的项目地址和依赖包的版本，可跳转查阅。
- 一、基础配置
- 一、创建项目
- 二、创建并配置webpack.config.js
- 三、配置package.json的启动命令
- 四、书写js逻辑：tool.js和main.js
- 二、Vue环境的配置
- 一、安装相关loader
- 二、创建App.vue，并且修改main.js引入App.vue
- 三、配置webpack.config.js中的modules模块
- 四、安装vue-router及其配置
- 安装项目依赖
- 创建route/index.ts并引入路由，在main.ts中引用
- 在App.vue中引入router-view
- 五、安装pinia及其配置
- 安装项目依赖
- 创建stores/user.ts并将方案和数据暴露出去
- 在main.ts中引入pinia
- 在App.vue中使用pinia
- 三、安装TS进行类型检查
- 安装TS相关插件
- 修改webpack.config.js中的modules模块
- 创建tsconfig.json进行配置
- 在src下创建shims-vue.d.ts文件，解决ts找不到vue文件的问题
- 修改App.vue文件中的js内容
- 整个项目的依赖包版本如下
- 四、结尾
如果对你有帮助，可先点赞收藏，避免下次就看不到了。整个项目我将以vue3 + Typescript + webpack5的技术栈。
首先是第一部分，基础配置。
一、基础配置
一、创建项目
首先需要创建项目目录，并且初始化项目，操作如下。
mkdir webpack-0-1
cd webpack-0-1
npm init -y
以上，就创建了我们的项目目录webpack-0-1，并且初始化package.json文件。接下来是创建最小的可视化代码模块和相关依赖。
输入如下：
// 创建项目文件
mkdir src
cd src
// 创建js入口文件
vim main.js
// 创建html模板文件
yarn add html-webpack-plugin -D
// 清空dist文件插件
yarn add clean-webpack-plugin -D
// 安装开发服务器
yarn add webpack-dev-server -D
以上，就将js代码片段和相关依赖安装好了。众所周知，我们安装webpack相关依赖，一定要进行最基础的配置。
因此就来到了第二步。
二、创建并配置webpack.config.js
配置如下：
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
module: {
},
resolve: {
alias: {
'@': path.resolve('src')
},
// 扩展名的设置
extensions: [ '.ts', '.tsx', '.js', '.jsx', '.vue', '.json' ]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
templateContent: `<!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从0到1</title>
</head>
<body>
<div id='app'></div>
</body>
</html>`
})
],
devServer: {
port: 8088,
// 指定虚拟服务器的静态资源目录
static: {
directory: path.join(__dirname, 'public')
}
}
}
以上，是webpack中最基础的配置项，不清楚各个模块功能的可以看我下面的解释。已经了解这块知识的朋友可以跳过，看下一个步骤了。
webpack核心配置解释：
- entry: 入口文件的配置。
- output: 文件和文件目录的指定输出。
- loader: 模块转换器，对js和json之外的其他类型文件进行处理。(因为webpack只认识js和json文件内容，其他文件类型不认识，相当于是将webpack不认识的内容转化为认识的内容)
- plugin: 插件，用于扩展webpack功能，可以贯穿 Webpack 打包的生命周期，执行不同的任务。
- mode: 打包环境配置。一般有development，production和none三个配置项，方便在不同的环境下做不同的事情。
- devserver: 是一个本地服务。实现http服务、热替换等。
将webpack.config.js配置好了之后，就需要在package.json文件中进行配置了。即迎来我们的第三步。
三、配置package.json的启动命令
"scripts": {
"dev": "webpack serve --progress --config ./webpack.config.js",
"build": "webpack --config ./webpack.config.js"
}
执行npm run dev即可运行本地环境，执行npm run build即可执行打包环境。我们执行npm run dev，可以发现项目可以运行起来了，但是控制台和页面上没有任何内容。
所以需要执行第四步。
四、书写js逻辑：tool.js和main.js
在src文件夹下面创建具体的业务代码，用于测试。我们分别在main.js和tool.js下编写我们的代码。
以下是tool.js的代码
const tool = {
name: '摩根',
age: 24,
makeSomething(){
console.log('我的名字和年龄>>>>>', this.name, this.age);
}
}
export default tool;
以下是main.js的代码
import tool from '@/tool/tool.js'
tool.makeSomething();
再次运行npm run dev，这个时候我们可以看到在控制台已经有我的名字和年龄>>>>>摩根，24打印出来了。
到这里，最基础的工程化项目已经可以完成了。
为了让大家更加清晰整个文件结构，我把具体的文件目录在下面展示出来了。
|- webpack-0-1
|- src
|- tool
|- tool.js
|- main.js
|- package.json
|- webpack.config.js
到这里基本就可以运行一个小型的项目，但是目前主流上还是用vue3比较多一些，所以接下来我把vue相关的技术栈也引入到项目中。大家在项目开发的时候就可以直接使用CV大法，粘贴我的这个项目结构到实战中了，彻底摆脱使用脚手架创建项目的方式。
二、Vue环境的配置
首先安装所有vue项目配置相关的依赖包。
1、使用css则安装：style-loader css-loader less less-loader
2、使用单文件组件则安装：vue vue-loader
3、使用单页应用路由则安装：vue-router
4、使用全局状态管理器则安装：vuex（或者pinia）
完成以上四步，则完成整套vue全家桶的配置。
话不多说，上代码。
一、安装相关loader
yarn add vue-loader vue style-loader css-loader less-loader less -D
二、创建App.vue，并且修改main.js引入App.vue
<template>
<div>
<p class="myStyle">{{ msg }}</p>
</div>
</template>
<script setup>
import { ref } from "vue"
const msg = ref('hello world');
setTimeout(() => {
msg.value = '我是变化的值';
}, 2000)
</script>
<style lang="less" scoped>
.wrap{
width: 300px;
height: 200px;
background-color: burlywood;
.myStyle{
font-size: 30px;
}
}
</style>
// main.js
import tool from '@/tool/tool.js'
// ===========新增部分开始============
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
// ===========新增部分结束============
tool.makeSomething();
三、配置webpack.config.js中的modules模块
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: ["vue-loader"],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/i,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
},
],
},
],
},
plugins: [
new VueLoaderPlugin()
]
}
经过了上面的3个步骤，我们就可以开始愉快的写我们的单页应用了。
但眼尖的朋友知道，还有vueRouter和vuex没有安装配置呢。
那么我就一条龙服务，做到底咯。
四、安装vue-router及其配置
安装项目依赖
yarn add vue-router
创建route/index.ts并引入路由，在main.ts中引用
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: () => import('@/pages/home.vue') }
]
})
export default router
import router from './router'
createApp(App).use(router).mount("#app");
在App.vue中引入router-view
<template>
<div class="wrap">
<p class="myStyle">{{ msg }}</p>
<router-view></router-view>
</div>
</template>
五、安装pinia及其配置
安装项目依赖
yarn add pinia
使用的用法跟vuex比较类似，注意要兼容vue3的写法。
创建stores/user.ts并将方案和数据暴露出去
import { defineStore } from "pinia";
import {ref} from 'vue'
export const useCalStore = defineStore("calculate", () => {
const count = ref(10);
function add(num: number = 1) {
count.value = count.value + num;
}
return {
add,
count,
};
});
在main.ts中引入pinia
import {createPinia} from 'pinia'
createApp(App).use(router).use(createPinia()).mount("#app");
在App.vue中使用pinia
<span>{{ calculate.count }}</span>
<button @click="calculate.add(5)">点击累加</button>
<script lang="ts" setup>
import { ref } from "vue"
import { useCalStore } from '@/stores/calculate';
const calculate = useCalStore();
</script>
到这里基本算完成90%了，很多公司都是这样一套配置就能开始往下业务编写阶段（事实上很多公司也是这样干的），但是我们想要让我们的工程项目优化的更好一点，所以接下来我们要给这个项目进行类型检查。
三、安装TS进行类型检查
安装TS相关插件
yarn add typescript ts-loader -D
修改webpack.config.js中的modules模块
module.exports = {
module: {
rules: [
{
test: /.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader",
options: {
// transpileOnly: true, // 关闭项目运行时的类型检查
appendTsSuffixTo: ["\.vue$"], // 给 .vue文件添加个 .ts后缀用于编译。
// happyPackMode: true,
},
},
],
},
]
}
}
创建tsconfig.json进行配置
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx",
"types/**/*.d.ts",
"types/*.d.ts"
],
"exclude": [
"node_modules"
]
}
在src下创建shims-vue.d.ts文件，解决ts找不到vue文件的问题
declare module "*.vue" {
import { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}
修改App.vue文件中的js内容
<script lang="ts" setup>
import { ref } from "vue"
const msg = ref<string>('hello world');
......
</script>
根据以上的几个操作步骤，整个项目基本算完整了，接下来运行一下试试看。下面是作者运行之后网页的展示现象。
整个项目的依赖包版本
可点击key和value值进行编辑
```json
"devDependencies": {
"clean-webpack-plugin":"^4.0.0",
"css-loader":"^6.7.3",
"html-webpack-plugin":"^5.5.0",
"less":"^4.1.3",
"less-loader":"^11.1.0",
"style-loader":"^3.3.1",
"ts-loader":"^9.4.2",
"typescript":"^4.9.5",
"vue":"^3.2.47",
"vue-loader":"^17.0.1",
"webpack":"^5.75.0",
"webpack-cli":"^5.0.1",
"webpack-dev-server":"^4.11.1"
},
"dependencies":**{
"pinia":"^2.0.30",
"vue-router":"^4.1.6"
}
四、结尾
最后我把项目的链接地址放出来，点击这里即可跳转到项目地址，方便给学习从0到1的朋友作为参考。
感谢大家的支持，如果点赞超过100，我将推出在这样的工程项目下，如何进一步的进行优化。
如果这篇文档对你有帮助，欢迎点赞、关注或者在评论区留言，我会第一时间对你的认可进行回应。精彩内容在后面，防止跑丢，友友们可以先关注我，每一篇文章都能及时通知不会遗失。
转载自:https://juejin.cn/post/7200396667505836069