vue webpack

// Vue 和 Webpack 示例代码

// 1. 创建一个简单的 Vue 项目结构，使用 Webpack 进行打包。

// 文件结构：
// - /src
//   - App.vue
//   - main.js
// - webpack.config.js
// - package.json

// 2. 安装依赖
// 在终端中运行以下命令来安装 Vue 和 Webpack 相关的依赖：
// npm install vue vue-loader vue-template-compiler webpack webpack-cli --save-dev

// 3. 创建 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: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
};

// 4. 创建 src/App.vue 文件
<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue with Webpack!'
    };
  }
};
</script>

// 5. 创建 src/main.js 文件
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app');

// 6. 修改 package.json 添加启动脚本
{
  "scripts": {
    "build": "webpack"
  }
}

// 现在你可以通过运行 `npm run build` 来构建你的 Vue 项目，并且 Webpack 会将所有资源打包到 dist/bundle.js 中。

以上代码展示了如何使用 Webpack 打包一个简单的 Vue 项目。包括了项目结构、依赖安装、Webpack 配置、Vue 组件和入口文件的创建，以及如何通过 npm 脚本进行打包。