怎么配置 Webpack4 简单打包 Vue 项目-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个非常流行的前端打包工具，可以将多个 JavaScript 文件、CSS 文件、图片等资源打包成一个或多个文件，方便在浏览器中加载和使用。在 Vue 项目中，使用 Webpack 来打包代码是非常常见的做法。

本文将介绍如何使用 Webpack4 来简单打包 Vue 项目，涉及到的技术点包括 Vue、Webpack、Babel、CSS、图片等。读者需要具备一定的前端开发基础，了解 Vue 和 Webpack 的基本概念和用法。

安装 Webpack 和相关插件

首先，我们需要安装 Webpack 和一些相关插件。可以使用 npm 或 yarn 来安装，这里以 npm 为例：

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader style-loader vue-loader vue-template-compiler babel-loader @babel/core @babel/preset-env file-loader url-loader --save-dev

这些插件的作用分别是：

webpack：Webpack 的核心库，用于打包代码。
webpack-cli：Webpack 的命令行工具。
webpack-dev-server：Webpack 的开发服务器，支持自动刷新和热更新。
html-webpack-plugin：生成 HTML 文件，并将打包后的 JavaScript 文件自动引入。
css-loader：处理 CSS 文件，使其可以被 Webpack 打包。
style-loader：将 CSS 样式插入到 HTML 页面中。
vue-loader：处理 Vue 单文件组件。
vue-template-compiler：编译 Vue 单文件组件中的模板。
babel-loader：处理 ES6 语法，使其可以在旧版浏览器中运行。
@babel/core：Babel 的核心库。
@babel/preset-env：Babel 的预设，用于将 ES6 语法转换为 ES5 语法。
file-loader：处理文件，使其可以被 Webpack 打包。
url-loader：处理 URL，使其可以被 Webpack 打包。

配置 Webpack

接下来，我们需要配置 Webpack。在项目根目录下创建一个 webpack.config.js 文件，用于存放 Webpack 的配置信息。

// javascriptcn.com 代码示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出路径
    filename: 'bundle.js' // 输出文件名
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 处理 JavaScript 文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', // 使用 Babel 处理 ES6 语法
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.vue$/, // 处理 Vue 单文件组件
        exclude: /node_modules/,
        use: {
          loader: 'vue-loader'
        }
      },
      {
        test: /\.css$/, // 处理 CSS 文件
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/, // 处理图片文件
        use: {
          loader: 'url-loader',
          options: {
            limit: 8192 // 小于 8KB 的图片会被转换成 base64 格式
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html' // 模板文件
    }),
    new VueLoaderPlugin()
  ],
  devServer: {
    port: 8080, // 端口号
    open: true // 自动打开浏览器
  }
};

上述配置中，我们指定了入口文件为 ./src/main.js，输出文件名为 bundle.js，并将输出文件放到 dist 目录中。同时，我们配置了一些 Loader，用于处理 JavaScript、Vue、CSS 和图片等文件。

我们还使用了两个插件：html-webpack-plugin 用于生成 HTML 文件，并将打包后的 JavaScript 文件自动引入；vue-loader/lib/plugin 用于处理 Vue 单文件组件中的模板。

最后，我们还配置了一个开发服务器，可以通过 http://localhost:8080 访问我们的应用。

编写 Vue 代码

接下来，我们可以编写 Vue 代码了。在 src 目录下创建一个 App.vue 文件，用于编写 Vue 组件。

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>Hello, {{ name }}!</h1>
    <img :src="image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Vue',
      image: require('./assets/logo.png')
    }
  }
}
</script>

<style>
h1 {
  color: blue;
}
</style>

上述代码中，我们定义了一个名为 App 的组件，包含一个 h1 标题和一张图片。通过 data 函数定义了组件的数据，可以在模板中使用插值语法 {{ }} 来引用。同时，我们还使用了 require 函数来引入图片资源，这样 Webpack 就可以将其打包。

编写入口文件

最后，我们需要编写入口文件 src/main.js，用于将 Vue 组件渲染到页面上。

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App) // 将 App 组件渲染到页面上
}).$mount('#app');

上述代码中，我们使用 import 语句引入了 Vue 和 App 组件，并使用 new Vue 创建了一个 Vue 实例，将 App 组件渲染到页面上。

运行项目

现在，我们已经完成了项目的配置和编写，可以使用以下命令来打包和运行项目：

# 打包项目
npm run build

# 运行开发服务器
npm run serve

打包完成后，会在 dist 目录下生成一个 bundle.js 文件和一个 index.html 文件。可以通过浏览器打开 index.html 文件来查看应用。

运行开发服务器后，可以通过浏览器访问 http://localhost:8080 来查看应用。每次修改代码后，开发服务器会自动重新编译和刷新页面。

总结

本文介绍了如何使用 Webpack4 来简单打包 Vue 项目，涉及到的技术点包括 Vue、Webpack、Babel、CSS、图片等。通过本文的学习，读者可以了解到 Webpack 的基本概念和用法，以及如何将 Vue 项目打包成一个或多个文件。同时，本文还提供了示例代码，读者可以下载并运行来进行学习和实践。

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