vue-cli3 配置详解：webpack.base.conf.js

Vue.js 是一款前端框架，它的目标是通过尽可能简单的 API 实现响应式的数据绑定和组合的视图组件。而 vue-cli3 是 Vue.js 官方提供的脚手架工具，它可以帮助我们快速创建一个基于 Vue.js 的项目框架。

在 vue-cli3 中，webpack.base.conf.js 是我们项目的基础配置文件，它定义了项目的基本配置信息，包括入口文件、输出文件、loader、plugin 等。本文将详细介绍 webpack.base.conf.js 的配置项及其作用。

入口文件

入口文件是指 Webpack 打包时的入口文件，它定义了 Webpack 从哪里开始打包。在 webpack.base.conf.js 中，我们可以通过以下代码来配置入口文件：

module.exports = {
  entry: {
    app: './src/main.js'
  }
}

上述代码中，我们定义了一个名为 app 的入口文件，它的路径是 ./src/main.js。

输出文件

输出文件是指 Webpack 打包后生成的文件，它定义了 Webpack 打包后的文件输出路径及文件名称。在 webpack.base.conf.js 中，我们可以通过以下代码来配置输出文件：

module.exports = {
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash].js'
  }
}

上述代码中，我们定义了一个名为 dist 的输出文件夹，它的路径是通过 path.resolve 函数获取的。而文件名称则是使用了占位符 [name] 和 [hash]，它们分别代表入口文件的名称和打包后的 hash 值。

Loader

Loader 是 Webpack 的一个核心概念，它用于对不同类型的文件进行加载和转换。在 webpack.base.conf.js 中，我们可以通过以下代码来配置 Loader：

// javascriptcn.com 代码示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

上述代码中，我们定义了三个 Loader：babel-loader、vue-loader 和 css-loader。其中，babel-loader 用于将 ES6/ES7 代码转换为 ES5 代码，vue-loader 用于加载 Vue.js 单文件组件，css-loader 用于加载 CSS 文件。

Plugin

Plugin 是 Webpack 的另一个核心概念，它用于完成一些比 Loader 更加复杂的任务，例如代码压缩、文件拷贝等。在 webpack.base.conf.js 中，我们可以通过以下代码来配置 Plugin：

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new CleanWebpackPlugin()
  ]
}

上述代码中，我们定义了两个 Plugin：HtmlWebpackPlugin 和 CleanWebpackPlugin。其中，HtmlWebpackPlugin 用于生成 HTML 文件，并将打包后的 JS 文件自动引入到 HTML 文件中，CleanWebpackPlugin 用于在每次打包时清空输出文件夹。

总结

本文对 vue-cli3 配置文件 webpack.base.conf.js 进行了详细介绍，包括入口文件、输出文件、Loader 和 Plugin。通过深入了解这些配置项，我们可以更加灵活地配置我们的 Vue.js 项目，从而实现更好的开发体验和更高的开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65781797d2f5e1655d1f269a