vue2 使用webpack打包

Vue2 项目可以使用 webpack 来进行打包。下面是一个基本的 Vue2 + webpack 的项目结构：

- src
  - assets
    - images
    - styles
  - components
  - router
  - store
  - views
  - App.vue
  - main.js
- index.html
- package.json
- webpack.config.js

其中：

- `src` 目录是我们源代码的目录，包含了所有 Vue2 组件、路由、状态管理、样式等文件；
- `index.html` 是我们的 HTML 页面；
- `package.json` 是我们的项目配置文件，包含了我们的依赖和启动命令；
- `webpack.config.js` 是我们的 webpack 配置文件，包含了我们的入口、输出、loader、插件等配置。

下面是一个简单的 webpack 配置文件示例：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

在 `package.json` 中，我们可以定义一些启动命令，比如：

{
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  }
}

这样，我们就可以使用 `npm run dev` 来启动开发服务器，以及使用 `npm run build` 来打包我们的项目了。