Vue中webpack的使用

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

一、Webpack介绍

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

Webpack 的主要特点:

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

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

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

  4. 代码分割(Code Splitting):Webpack 支持将代码拆分成多个块,从而优化加载速度。例如,按需加载、按路由加载等。

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

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

二、webpack安装

bash 复制代码
npm install --save-dev webpack webpack-cli  webpack-dev-server

三、vue相关安装

bash 复制代码
npm install --save-dev vue-loader vue-template-compiler

四、创建Webpack配置文件

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

javascript 复制代码
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

javascript 复制代码
"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插件**

bash 复制代码
npm install --save-dev html-webpack-plugin

webpack.config.js 中添加该插件:

javascript 复制代码
const HtmlWebpackPlugin = require('html-webpack-plugin');// 引入


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

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

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

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

解决办法:

  • file-loader是否安装
  • webpack.config.js是否正确
javascript 复制代码
{
    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语法。

修改后,再运行,图片加载成功!

相关推荐
小小小小宇15 分钟前
配置 Gemini Code Assist 插件
前端
one 大白(●—●)27 分钟前
前端用用jsonp的方式解决跨域问题
前端·jsonp跨域
刺客-Andy30 分钟前
前端加密方式 AES对称加密 RSA非对称加密 以及 MD5哈希算法详解
前端·javascript·算法·哈希算法
前端开发张小七1 小时前
13.Python Socket服务端开发指南
前端·python
前端开发张小七1 小时前
14.Python Socket客户端开发指南
前端·python
ElasticPDF-新国产PDF编辑器1 小时前
Vue 项目 PDF 批注插件库在线版 API 示例教程
前端·vue.js·pdf
拉不动的猪1 小时前
react基础2
前端·javascript·面试
kovlistudio1 小时前
红宝书第二十九讲:详解编辑器和IDE:VS Code与WebStorm
开发语言·前端·javascript·ide·学习·编辑器·webstorm
拉不动的猪1 小时前
react基础1
前端·javascript·面试
ElasticPDF-新国产PDF编辑器2 小时前
Vue PDF Annotation plugin library online API examples
javascript·vue.js·pdf