Vue-cli 是一个基于 Vue.js 的脚手架工具，它提供了快速搭建 Vue.js 项目的基础结构和开发环境。其中，Webpack 是 Vue-cli 中的默认构建工具，它可以将项目中的各种资源（如 HTML、CSS、JavaScript 等）打包成最终的可部署文件。本文将介绍 Vue-cli 中 Webpack 的基本配置，帮助初学者更好地理解 Vue.js 项目的构建过程。
为什么需要配置 Webpack
在 Vue.js 项目中，我们使用的是单文件组件（.vue 文件），这种文件格式可以让我们在一个文件中同时编写 HTML、CSS 和 JavaScript。但是，在浏览器中运行一个单文件组件时，需要将其转换成浏览器可识别的格式。这就是 Webpack 的工作。
Webpack 的主要作用是将项目中的各种资源打包成最终的可部署文件，同时还可以进行代码分割、压缩、优化等操作。但是，Webpack 的默认配置并不一定适用于所有项目，因此我们需要对其进行一些基本配置，以满足项目的需求。
Webpack 的基本配置
在 Vue-cli 中，Webpack 的配置文件位于项目根目录下的 webpack.config.js 文件中。下面是一个基本的 Webpack 配置文件：
// javascriptcn.com 代码示例
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: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
]
}上面的配置文件中包含了以下几个部分：
entry：指定应用程序的入口文件，这里指定为./src/main.js。output：指定打包后的文件输出路径和文件名，这里指定为./dist/bundle.js。module：指定 Webpack 在加载各种资源时使用的 loader，这里包含了针对.vue、.js和.css文件的 loader 配置。plugins：指定 Webpack 在打包过程中需要使用的插件，这里只包含了一个用于生成 HTML 文件的插件。
loader 的作用
在上面的配置文件中，我们使用了三个 loader：vue-loader、babel-loader 和 css-loader。下面分别介绍它们的作用。
vue-loader
vue-loader 是一个用于加载单文件组件的 loader。它会将 .vue 文件解析成一个 JavaScript 模块，并将其中的 HTML、CSS 和 JavaScript 分别提取出来。这样，我们就可以在浏览器中运行一个单文件组件了。
babel-loader
babel-loader 是一个用于将 ES6+ 代码转换成 ES5 代码的 loader。在 Vue.js 项目中，我们通常会使用 ES6+ 语法来编写 JavaScript 代码，但是不是所有浏览器都支持 ES6+ 语法。因此，我们需要将 ES6+ 代码转换成 ES5 代码，以保证浏览器的兼容性。
css-loader
css-loader 是一个用于加载 CSS 文件的 loader。它会将 CSS 文件转换成 JavaScript 模块，并将其中的样式提取出来，最终以 <style> 标签的形式插入到 HTML 文件中。这样，我们就可以在单文件组件中编写 CSS 样式了。
plugins 的作用
在上面的配置文件中，我们使用了一个插件：HtmlWebpackPlugin。它的作用是生成一个 HTML 文件，并将打包后的 JavaScript 文件自动引入到 HTML 文件中。这样，我们就不需要手动修改 HTML 文件了。
总结
本文介绍了 Vue-cli 中 Webpack 的基本配置，包括了 Webpack 的作用、基本配置文件的结构、loader 的作用和 plugins 的作用。通过学习本文，读者可以更好地理解 Vue.js 项目的构建过程，并学会对 Webpack 进行基本配置。如果读者想要深入学习 Webpack，可以参考 Webpack 官方文档。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65890c9beb4cecbf2de3cca7