当前位置：首页 > news >正文

Vue中webpack的使用

news 来源：原创 2025/6/18 0:22:35

介绍配置过程，以及中途遇到的问题。

一、Webpack介绍

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它主要用于将应用程序中的模块（如 JavaScript 文件、CSS 文件、图片等）打包成浏览器可以理解和执行的格式。Webpack 是一个非常强大的构建工具，广泛应用于前端开发中，尤其是大型单页应用（SPA）的构建。

Webpack 的主要特点：

模块化打包：Webpack 将应用程序中的所有资源视为模块，包括 JavaScript、CSS、图片、字体等，最终将这些模块打包成一个或多个文件。

插件机制：Webpack 提供了丰富的插件支持，开发者可以使用各种插件来扩展 Webpack 的功能，比如压缩代码、优化打包速度等。

加载器（Loaders）：加载器可以帮助 Webpack 处理非 JavaScript 文件（如图片、CSS、LESS、SASS、TypeScript 等）。它允许 Webpack 在打包前对这些文件进行转换。

代码分割（Code Splitting）：Webpack 支持将代码拆分成多个块，从而优化加载速度。例如，按需加载、按路由加载等。

热模块替换（Hot Module Replacement, HMR）：在开发环境下，Webpack 支持热更新，能实时更新代码而无需刷新浏览器，提高开发效率。

Tree Shaking：Webpack 在生产模式下，会自动删除未使用的代码，减少最终打包的文件大小，优化性能。

二、webpack安装

npm install --save-dev webpack webpack-cli  webpack-dev-server

三、vue相关安装

npm install --save-dev vue-loader vue-template-compiler

四、创建Webpack配置文件

在项目根目录下创建一个名为webpack.config.js的文件：

const { VueLoaderPlugin } = require('vue-loader');
const path = require('path');
module.exports = {
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js',
	},
	module: {
		rules: [
			{
				test: /\.vue$/,
				loader: 'vue-loader',
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env'],
					},
				},
			},
		],
	},
	plugins: [new VueLoaderPlugin()],
	resolve: {
		alias: {
			vue$: 'vue/dist/vue.esm.js',
		},
		extensions: ['*', '.js', '.vue', '.json'],
	},
	devServer: {
		contentBase: path.join(__dirname, 'dist'),
		compress: true,
		port: 9000,
	},
};

五、修改packge.json

"build": "webpack --mode production",
"serve": "webpack serve --mode development",
// "serve": "vue-cli-service serve --no-lint",
// "build": "vue-cli-service build --no-lint",

六、修改`public/index.html`文件

添加语句：<script src="/bundle.js"></script>

七、启动

开发模式: 使用 `npm run serve` 启动开发服务器，支持热重载。
生产模式: 使用 `npm run build` 构建项目，生成的文件会放在 `dist` 目录下。

npm run build

构建成功后生成文件夹目录如下：

npm run serve

运行命令，报错：

根据错误信息，contentBase 已经不再是 webpack-dev-server 配置的有效选项了。

主要更改：

contentBase 被废弃，现在使用 static。

你应该在 devServer.static 配置下提供静态文件目录，例如 directory。

修改如下：

再次执行命令，运行成功：

访问页面报错如下：

排查发现：项目中的 index.html 文件不在 dist 目录中，可能是 Webpack 配置中没有正确设置 html-webpack-plugin，导致它没有在构建时自动生成 index.html 文件。

解决办法：

安装html-webpack-plugin插件

npm install --save-dev html-webpack-plugin

在 webpack.config.js 中添加该插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');// 引入


plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',  // 你的 index.html 模板文件
    }),
  ],

再次执行命令，运行成功，页面也没有出现报错。

但是图片加载失败，开发人员工具查看如下：

原因分析：图片被处理成了一个模块对象，而不是一个有效的图片 URL。这个问题通常发生在图片被 loader 处理时，未正确处理成 URL 或路径。

解决办法：

file-loader是否安装
webpack.config.js是否正确

{
    test: /\.(jpg|jpeg|png|gif|webp)$/i, // 处理图片格式
    use: [
        {
            loader: 'file-loader', // 使用 file-loader 处理图片
            options: {
                esModule: false,
                name: '[path][name].[ext]', // 可以设置输出的文件路径和文件名
            },
        },
    ],
},

解析：

一定要配置：esModule: false

这是因为file-loader默认采用ES模块语法，即import '../image.png'；然而Vue生成的是CommonJS模块语法，即require('../image.png')；二者不一致。要么让file-loader或url-loader采用CommonJS语法，要么让Vue采用ES语法。

esModule: false这个配置则file-loader采用CommonJS语法。

修改后，再运行，图片加载成功！