vue脚手架是用什么打包的

Vue脚手架主要使用Webpack进行打包。1、Webpack是Vue脚手架默认的打包工具，2、它提供了丰富的配置选项和插件支持，3、能够很好地处理Vue组件和资源文件。接下来，我们将详细介绍Webpack在Vue脚手架中的作用和配置方法。

一、WEBPACK概述

Webpack是一个现代JavaScript应用程序的静态模块打包工具。它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle。

Webpack的核心功能包括：

模块打包：将JavaScript、CSS、图片等资源打包成一个文件或多个文件。
代码拆分：按需加载，提高应用程序性能。
插件系统：通过插件扩展Webpack的功能，例如优化打包、压缩代码等。

二、WEBPACK在VUE脚手架中的应用

Vue脚手架（例如Vue CLI）通过Webpack来处理项目的构建和打包任务。Vue CLI提供了一个经过优化的Webpack配置，使开发者可以专注于应用程序的开发，而不必担心构建配置的复杂性。

Vue CLI中的Webpack配置特点：

预配置的Webpack配置：提供了一套默认的Webpack配置，适合大多数项目。
可扩展性：允许开发者通过配置文件（如vue.config.js）自定义Webpack配置。
插件支持：Vue CLI插件可以添加额外的Webpack配置，例如PWA支持、TypeScript支持等。

三、WEBPACK配置文件

在Vue CLI项目中，Webpack的配置主要通过vue.config.js文件来完成。以下是一个简单的vue.config.js示例：

module.exports = { // 基本路径 publicPath: '/', // 输出文件目录 outputDir: 'dist', // 静态资源目录 assetsDir: 'assets', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // 是否使用包含运行时编译器的Vue核心的构建 runtimeCompiler: false, // 生产环境是否生成 sourceMap 文件 productionSourceMap: false, // webpack配置 configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src') } } }, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: {}, // 启用 CSS modules for all css / pre-processor files. requireModuleExtension: false }, // webpack-dev-server 相关配置 devServer: { open: true, host: '0.0.0.0', port: 8080, https: false, hotOnly: false, proxy: null, // 设置代理 before: app => {} }, // 第三方插件配置 pluginOptions: { // ... } }

四、WEBPACK插件和加载器

Webpack的强大之处在于其插件和加载器系统。插件用于执行范围更广的任务，例如打包优化、资源管理等。加载器用于转换模块的源代码，例如将ES6转换为ES5，将Sass转换为CSS等。

常用的Webpack插件和加载器：

插件/加载器	功能
vue-loader	处理Vue单文件组件（.vue文件）
babel-loader	转换ES6代码为ES5代码
css-loader	处理CSS文件
style-loader	将CSS注入到DOM中
file-loader	处理文件资源（如图片、字体等）
url-loader	类似file-loader，但可以将小文件转换为base64
html-webpack-plugin	生成HTML文件并自动注入打包后的资源
mini-css-extract-plugin	将CSS提取到单独的文件中
optimize-css-assets-webpack-plugin	压缩CSS文件
terser-webpack-plugin	压缩JavaScript文件

五、WEBPACK在生产环境和开发环境中的配置差异

在开发环境和生产环境中，Webpack的配置有所不同。开发环境侧重于提升开发效率，提供实时重载、调试支持等。而生产环境侧重于优化打包结果，减小文件体积，提高加载速度。

开发环境配置特点：

启用source map，便于调试。
启用热模块替换（Hot Module Replacement），实现实时重载。
代码未压缩，便于阅读和调试。

生产环境配置特点：

禁用source map，以减少文件体积。
压缩代码，优化加载速度。
分离CSS文件，减少初始加载时间。
优化打包，分离第三方库和业务代码。

以下是一个区分开发环境和生产环境的示例配置：

const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
  // 公共配置
  publicPath: '/',
  outputDir: 'dist',
  configureWebpack: {
    devtool: isProduction ? false : 'source-map',
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  },
  // 开发环境配置
  devServer: {
    open: true,
    hot: true
  },
  // 生产环境配置
  css: {
    extract: isProduction,
    sourceMap: !isProduction
  }
};

六、实例说明

为了更好地理解Webpack在Vue脚手架中的应用，以下是一个具体的示例项目配置。

项目结构：

my-vue-app/ ├── node_modules/ ├── public/ │ ├── index.html ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ ├── main.js ├── .gitignore ├── babel.config.js ├── package.json ├── vue.config.js └── webpack.config.js

vue.config.js配置：

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'assets',
  runtimeCompiler: true,
  productionSourceMap: false,
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  },
  css: {
    extract: true,
    sourceMap: false,
    loaderOptions: {
      sass: {
        prependData: `@import "~@/styles/variables.scss";`
      }
    },
    requireModuleExtension: true
  },
  devServer: {
    open: true,
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null
  },
  pluginOptions: {
    // ...
  }
}

七、总结与建议

Vue脚手架主要使用Webpack进行打包，它提供了丰富的配置选项和插件支持，能够很好地处理Vue组件和资源文件。开发者可以通过自定义Webpack配置，优化项目的构建流程，提升开发效率和应用性能。

进一步的建议：

深入学习Webpack：了解Webpack的核心概念和配置选项，能够更好地定制项目的构建流程。
使用Vue CLI插件：利用Vue CLI插件扩展Webpack功能，如添加TypeScript支持、PWA支持等。
优化打包配置：根据项目需求，优化Webpack配置，提高应用性能和加载速度。

通过合理配置Webpack，可以显著提升Vue项目的开发效率和生产环境下的性能。希望本文对你理解和应用Vue脚手架的Webpack配置有所帮助。