当前位置：首页 > news >正文

使用webpack搭建个本地项目

news 2025/11/29 11:03:15

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版本}
}