使用webpack搭建个本地项目

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应用程序的入口点

10、在项目根目录下创建一个HTML文件index.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文件