webpack配置详解+项目实战

发布于：2025-03-29 ⋅ 阅读:(27) ⋅ 点赞:(0)

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 两种创建方式的区别

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

安装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语法，处理各种兼容问题。

  1. 配置文件
    配置文件由很多种写法:
  • 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 语法的预设
  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 = {
  // 智能预设能编译最新的es6
  presets: ['@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.html
      template: 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地址

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布