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

webpack配置详解+项目实战

news 2025/4/3 8:05:20

webpack在vue中的配置，适合想重新认知webpack的你

webpack配置-初级配置

项目创建

npm install vue-cli -g  
vue create vue2_weback_demo

vue create 和vue init 两种创建方式的区别

  1. vue create
    是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。

使用方式：vue create 项目名称

  1. vue init
    vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)

webpack是官方推荐的标准模板名
使用方式：vue init webpack 项目名称

webpack配置

npm install webpack webpack-cli -D
npm install webpack-dev-server -D

webpack.config.js 初始化配置是参考B栈视频学习整理的，有兴趣的小伙伴也可以看一下，话不多说，下面进入配置
参考视频

初级配置

1、配置入口和出口文件
  • 知道要从哪个文件开始打包，从哪个目录输出
module.exports = {// 也可以配置为一个数组，配置多入口entry: './src/main.js',mode: "development",output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',},
}
2、配置loader
  • 页面有各种语言，css、js、less等，要配置解析器让webpack打包的时候能够识别他，解析成浏览器识别的语法。
// 用来处理获取的样式
function getStyleLoaders(pre) {return [MiniCssExtractPlugin.loader,"css-loader",{loader: "postcss-loader",options: {postcssOptions: {// plugins: [["autoprefixer"]],plugins: ['postcss-preset-env'],//能解决大多数兼容性问题},},}, pre].filter(Boolean);
}module: {rules: [{ test: /\.css$/,// 匹配的条件use: [// 通过style标签动态插入style标签'style-loader', // 把css代码转化为js代码，css-loader是处理css文件的loader'css-loader'] }，{test: /\.less$/,use: getStyleLoaders("less-loader"), // 从右向左解析原则// use: ["style-loader", "css-loader", "less-loader"]},{test: /\.s[ac]ss$/,use: getStyleLoaders("sass-loader")},{test: /\.js$/,exclude: /node_modules/,use: [{loader: 'babel-loader',options: {presets: ['@babel/preset-env'],// cacheDirectory: true, // 开启babel缓存// cacheCompression: false,// 关闭缓存文件压缩// plugins: ['@babel/plugin-transform-runtime'],},},]},]},
3、配置eslint（可组装js、jsx检查工具）

我们打包前，要先保证代码正确，这个时候就用到了eslint
配置文件由很多种写法:
.eslintrc.*:新建文件，位于项目根目录
.eslintrc
.eslintrc.js
.eslintrc.json
区别在于配置格式不一样
package.json 中eslintconfig:不需要创建文件，在原有文件基础上写ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

  • 在webpack4中是loder在webpack5中改为plugin
npm install eslint-webpack-plugin eslint --save-dev

我的代码里面配置@vue/cli-plugin-eslint 所以不用安装上面这个步骤
– 参考链接webpack官网 plugin配置
webpack官网

  • 配置eslint-webpack-plugin
 new ESLintPlugin({// 配置哪些目录需要检查context: path.resolve(__dirname, './src'),}),
  • 在.eslintrc.*s中配置eslint规则
// 继承eslint规则
extends:["eslint:recommended"]
env :{"node":true，//启用node中全局变量"browser":true，//启用浏览器中全局变量
}
parserOptions:{"ecmaVersion":6, //使用es6语法"sourceType": "module" //使用模块化语法
}
rules:{"no-var":2，//不能使用 var 定义变量
}
  • 在根目录配置文件.eslintignore中配置忽略检查的文件
dist
4、配置babel（将高级的js语法转换成低版本的js语法）

配置好eslint之后，就是要配置babel，他能将高级的js语法转换成低版本的js语法，处理各种兼容问题。

  1. 配置文件
    配置文件由很多种写法:
  • babel.config.*:新建文件，位于项目根目录
  • babel.config.js
  • babel.config.json
    .babelrc.*:新建文件，位于项目根目录
  • .babelrc
  • .babelrc.is
  • .babelrc.json
    package.json 中babel:不需要创建文件，在原有文件基础上写
    Babel会查找和自动读取它们，所以以上配置文件只需要存在一个即可
  1. presets 预设
    简单理解:就是一组 Babel插件,扩展 babel 功能
  • @babel/preset-env : 一个智能预设允计您使用最新的JavaScript。
  • @babel/preset-react： 一个用来编译 React jsx 语法的预设
  • @babe1/preset-typescript :一个用来编译TypeScript 语法的预设
  1. 在 Webpack 中使用
    1.下载包
npm i babel-loader @babel/core @babel/preset-env -D

我安装babel已包含上述插件，无需再安装

babel官网配置

  • 在webpack中配置babel
module:{{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],},},},
}
  • 在babel.config.js中配置babel
module.exports = {// 智能预设能编译最新的es6presets: ['@babel/preset-env'],
};

对于js来说何时用babel-loader何时用esbuild-loader

  • 主要功能：通过 Babel 转译 JavaScript 代码，支持 ES6+ 语法转换为兼容性更高的代码。
    灵活性：支持多种插件和预设（如 @babel/preset-env、@babel/plugin-transform-runtime 等），可以满足复杂的转译需求。
  • 生态丰富：Babel 的插件生态系统非常强大，能够处理各种语言特性（如 TypeScript、Flow 等）。
  • 速度较慢：由于 Babel 是基于 JavaScript 实现的，转译速度相对较慢，尤其是在大规模项目中。
    使用场景
  • 当需要对现代 JavaScript 语法进行深度转译时（如支持 IE 浏览器）。
  • 当需要使用 Babel 插件来实现特定功能时（如 polyfill、代码优化等）。
    esbuild-loader
    特点
  • 主要功能：通过 esbuild 工具快速转译 JavaScript 代码，专注于性能优化。
  • 速度快：esbuild 是用 Go 语言编写的，转译速度远快于 Babel。
  • 简单易用：默认支持 ES6+ 语法转译，无需额外配置插件或预设。
  • 功能有限：相比 Babel，esbuild 的功能较为单一，不支持复杂的插件系统。
    使用场景
  • 当项目对转译速度有较高要求时（如开发环境中的热更新）。
  • 当只需要简单的 ES6+ 语法转译，而不需要复杂的功能（如 polyfill 或特定插件）

我当前项目是vue2+webpack 所以用的是esbuild-loader

5、使用 html-webpack-plugin

html-webpack-plugin 是一个用于在 webpack 的构建过程中生成 HTML 文件的插件。它允许您使用一个简单的模板文件，并自动将生成的 bundle 文件插入到模板文件中，从而生成一个完整的 HTML 文件。
使用方式如下：

  new HtmlWebpackPlugin({// 模版：以public/index.html为模板生成打包后的index.htmltemplate: path.resolve(__dirname, "./public/index.html"),BASE_URL: process.env.BASE_URL || '/'}),
配置服务热更新
  • 下载依赖
npm install wwebpack-dev-server --D

在webpack.config.js中配置devServer

  devServer: {static: {directory: path.resolve(__dirname, "./dist"), // 打包后的文件路径 directory:目录},open: true, //自动打开浏览器compress: true, //启动gzip压缩port: 9000, // 端口号},
  • 启动命令：
    npx webpack serve
6、 css优化 MiniCssExtractPlugin

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

将style-loder 替换为 MiniCssExtractPlugin.loader

    {test: /\.css$/,// MiniCssExtractPlugin.loader 最终会将css提取到单独的文件use: [MiniCssExtractPlugin.loader, "css-loader"], // 从右向左解析原则// use: ["style-loader", "css-loader"]}

然后在插件中调用一下

 new MiniCssExtractPlugin({filename: "css/[name].[contenthash:8].css"}),
7、css兼容性处理
  • 安装
npm i postcss-loader postcss postcss-preset-env -D
  • 在loader中配置
    {test: /\.s[ac]ss$/,use: [MiniCssExtractPlugin.loader,"css-loader",{loader: "postcss-loader",options: {plugins:['postcss-preset-env'],//能解决大多数兼容性问题postcssOptions: {plugins: [["autoprefixer"]],},},},"sass-loader",], // scss的loader},
  • 在package.json中配置browserslist
  "browserslist": ["> 1%", // 全球超过1%的浏览器"last 2 versions", // 最近两个版本"not dead" // 排除已经不再维护的浏览器]
7、CssMinimizerWebpackPlugin

CssMinimizerWebpackPlugin 是一个用于优化和压缩 CSS 的 webpack 插件。它使用 cssnano 来优化和压缩 CSS，并支持 source maps 和 assets 中使用查询字符串。

  • 安装依赖
npm install css-minimizer-webpack-plugin --save-dev

webpack官方给出的代码

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');module.exports = {module: {rules: [{test: /.s?css$/,use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],},],},optimization: {minimizer: [// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释// `...`,new CssMinimizerPlugin(),],},plugins: [new MiniCssExtractPlugin()],
};

我直接在plugins中配置了CssMinimizerPlugin

8、启动常见问题处理

ERROR in Template execution failed: ReferenceError: BASE URL is not defined
ERROR in ReferenceError: BASE URL is not defined

  plugins: [...new DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('production'),BASE_URL: '"../"' // 定义全局变量BASE_URL}),],

webpack 高级配置 见下篇

[项目地址] (https://gitee.com/pear66/vue-webpack5)


http://www.mrgr.cn/news/96162.html

相关文章：

  • pytorch+maskRcnn框架训练自己的模型以及模型导出ONXX格式供C++部署推理
  • 我的创作纪念日——三周年
  • unity 做一个圆形分比图
  • #C8# UVM中的factory机制 #S8.5# 对factory机制的重载进一步思考
  • 第十四届蓝桥杯省赛电子类单片机学习记录（客观题）
  • UDP视频传输中的丢包和播放花屏处理方法
  • Linux一步部署主DNS服务器
  • RGB-T综述
  • FALL靶场通关攻略
  • 【目标检测】【深度学习】【Pytorch版本】YOLOV1模型算法详解
  • Springbean（二）@Component及其派生注解自动注入（2）使用注意和加载问题
  • HarmonyOS之深入解析跳转支付宝小程序完成操作后如何自动返回App
  • 设计秒杀系统（高并发的分布式系统）
  • node-ddk,electron,主进程通讯,窗口间通讯
  • 为AI聊天工具添加一个知识系统 之152 当今AI模型和AI工具应用中的核心矛盾
  • cesium中label样式修改为圆角
  • Ubuntu24.04 离线安装 MySQL8.0.41
  • 软考《信息系统运行管理员》- 5.3 信息系统数据资源备份
  • 在Cesium中创建渐变色墙体效果
  • [二值图像处理] 骨架线提取、骨架端点、交叉点提取