介绍配置过程,以及中途遇到的问题。
一、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安装
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语法。
修改后,再运行,图片加载成功!
