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

webpack配置详解+项目实战

news 来源：原创 2025/6/27 20:17:30

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

webpack配置-初级配置

1、配置入口和出口文件

2、配置loader

3、配置eslint（可组装js、jsx检查工具）

4、配置babel（将高级的js语法转换成低版本的js语法）

5、使用 html-webpack-plugin

6、 css优化 MiniCssExtractPlugin

7、css兼容性处理

8、启动常见问题处理

项目创建

npm install vue-cli -g  
vue create vue2_weback_demo

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

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

使用方式：vue create 项目名称

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配置-初级配置

安装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中是loader在webpack5中改为plugin

npm install eslint-webpack-plugin eslint --save-dev

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

配置eslint-webpack-plugin

const EslintWebpackPlugin = require("eslint-webpack-plugin");new ESLintPlugin({// 配置哪些目录需要检查context: path.resolve(__dirname, './src'),}),

在.eslintrc.*s中配置eslint规则

module.exports = {
// 继承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语法，处理各种兼容问题。

配置文件
配置文件由很多种写法:

babel.config.*:新建文件，位于项目根目录
babel.config.js
babel.config.json
.babelrc.*:新建文件，位于项目根目录
.babelrc
.babelrc.is
.babelrc.json
package.json 中babel:不需要创建文件，在原有文件基础上写
Babel会查找和自动读取它们，所以以上配置文件只需要存在一个即可

2. presets 预设
简单理解:就是一组 Babel插件,扩展 babel 功能

@babel/preset-env : 一个智能预设允计您使用最新的JavaScript。
@babel/preset-react：一个用来编译 React jsx 语法的预设
@babe1/preset-typescript :一个用来编译TypeScript 语法的预设

在 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 || '/'}),

6、配置服务热更新

下载依赖

npm install wwebpack-dev-server --D

在webpack.config.js中配置devServer

module.exports = {devServer: {static: {directory: path.resolve(__dirname, "./dist"), // 打包后的文件路径 directory:目录},open: true, //自动打开浏览器compress: true, //启动gzip压缩port: 9000, // 端口号},}

启动命令：

npx webpack serve

7、css优化 MiniCssExtractPlugin

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

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

将style-loder 替换为 MiniCssExtractPlugin.loader

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

然后在插件中调用一下

module.exports = {...plugins:[new MiniCssExtractPlugin({filename: "css/[name].[contenthash:8].css"}),]
}

8、css兼容性处理

安装

npm i postcss-loader postcss postcss-preset-env -D

在loader中配置

module.exports = {...module: {rules: [{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" // 排除已经不再维护的浏览器]

9、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

10、启动常见问题处理

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 高级配置见下篇

vue+webpack5（高级配置）
点击查看项目git地址

webpack配置-初级配置

1、配置入口和出口文件

3、配置eslint（可组装js、jsx检查工具）

5、使用 html-webpack-plugin

7、css兼容性处理

项目创建

webpack配置-初级配置

1、配置入口和出口文件

2、配置loader

3、配置eslint（可组装js、jsx检查工具）

4、配置babel（将高级的js语法转换成低版本的js语法）

5、使用 html-webpack-plugin

6、 配置服务热更新

7、css优化 MiniCssExtractPlugin

8、css兼容性处理

9、CssMinimizerWebpackPlugin

10、启动常见问题处理

webpack 高级配置 见下篇

相关文章：

6、配置服务热更新

webpack 高级配置见下篇