vue 如何把依赖也打包

在 Vue 中，可以使用 Webpack 的 DLLPlugin 插件来打包依赖。该插件可以将经常被使用的库（例如 Vue、Vue Router、Vuex 等）打包成一个单独的文件，这样在每次构建时就不用重新打包这些库，从而提高构建速度。

具体操作步骤如下：

1. 在项目根目录下创建一个 webpack.dll.config.js 文件。

2. 在该文件中配置需要打包的依赖和输出文件的路径，例如：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['vue', 'vue-router', 'vuex']
  },
  output: {
    path: path.join(__dirname, 'dist', 'dll'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dist', 'dll', '[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
};

3. 在项目的 webpack.config.js 文件中引入该插件并使用，例如：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.join(__dirname, 'src'),
      manifest: require('./dist/dll/vendor-manifest.json')
    })
  ]
};

4. 在命令行中执行 webpack --config webpack.dll.config.js 命令，生成依赖的打包文件和 manifest 文件。

5. 在项目的 webpack.config.js 文件中引用打包好的依赖文件，例如：

module.exports = {
  // ...
  entry: {
    app: './src/main.js',
    vendor: ['vue', 'vue-router', 'vuex']
  },
  // ...
};

这样，在每次构建时，之前打包好的依赖文件就会被直接使用，从而提高构建速度。