1、创建一个名字为my-webpack-project空文件夹
mkdir my-webpack-project
2、进入该文件夹
cd my-webpack-project
3、初始化项目
npm init -y
4、安装webpack和webpack-cli作为开发依赖
npm install --save-dev webpack webpack-cli
5、安装vue和vue-loader作为开发依赖,vue-loader用于加载Vue单文件组件
npm install --save-dev vue vue-loader vue-template-compiler
6、安装其他必要的loader,比如css-loader和style-loader,用于处理CSS
npm install --save-dev css-loader style-loader
7、创建一个简单的webpack配置文件webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js', // 项目入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 打包文件输出目录
filename: 'bundle.js' // 打包后的文件名
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
};
8、在项目根目录下创建一个src
文件夹,并添加一个main.js
作为入口文件
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app');
9、在src
文件夹中添加一个App.vue
单文件组件作为Vue应用程序的入口点
<template>
<div id="app">
<h1>Hello Vue!</h1>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
text-align: center;
}
</style>
10、在项目根目录下创建一个HTML文件index.html
,作为项目的主页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
11、在项目根目录下创建一个package.json
文件,并添加一个脚本来运行webpack:
{
"name": "my-webpack-project",
"version": "1.0.0",
"description": "",
"scripts": {
"build": "webpack"
},
"devDependencies": {
"webpack": "^5.93.0",//此处为你的webpack版本
"webpack-cli": "^5.1.4",//此处为你的webpack-cli版本
}
}
12、运行webpack打包项目
npm run build
这将会打包你的项目,并在dist
目录下生成bundle.js
文件