更改webpack默认配置项

vue.config.js

vue.config.js代码中，解释这段代码
const webpack = require('webpack')module.exports = {chainWebpack: config => {config.plugin('provide').use(webpack.ProvidePlugin, [{$: 'jquery',jquery: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery'}])},configureWebpack: {resolve: {alias: {'form-urlencoded': require.resolve('form-urlencoded'),},},},
}

这段代码用于在 Vue.js 项目中自定义 Webpack 配置，导出了一个包含两个主要属性的对象：chainWebpack 和 configureWebpack，分别以不同方式修改 Webpack 配置。

1. chainWebpack 部分

chainWebpack: config => {config.plugin('provide').use(webpack.ProvidePlugin, [{$: 'jquery',jquery: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery'}])
}

• 作用：通过 chainWebpack 函数以链式方式修改 Webpack 配置，利用 Vue CLI 提供的 API。
• 具体功能：
  • config.plugin('provide')：引用 Webpack 的 ProvidePlugin 插件，该插件可以将指定的模块自动注入到每个模块中，无需显式导入。
  • use(webpack.ProvidePlugin, [{...}])：配置 ProvidePlugin，将 jquery 模块绑定到多个变量名：
    • $：将 jquery 模块映射到全局 $ 变量。
    • jquery：映射到 jquery 变量。
    • jQuery：映射到 jQuery 变量。
    • 'window.jQuery'：将 jquery 模块绑定到全局的 window.jQuery。
  • 效果：在项目的任何 JavaScript 文件中，可以直接使用 $, jquery, jQuery 或 window.jQuery 来访问 jQuery 库，无需手动 import 或 require jQuery。例如，写 $('.selector') 即可直接调用 jQuery 方法。

2. configureWebpack 部分

configureWebpack: {resolve: {alias: {'form-urlencoded': require.resolve('form-urlencoded'),},},
}

• 作用：通过 configureWebpack 对象直接修改 Webpack 的配置，适合添加或覆盖配置项。
• 具体功能：
  • resolve.alias：用于设置模块解析时的别名，方便在代码中引用模块时使用简化的路径或名称。
  • 'form-urlencoded': require.resolve('form-urlencoded')：
    • 创建一个别名 'form-urlencoded'，指向 form-urlencoded 模块的精确路径。
    • require.resolve('form-urlencoded') 会解析 form-urlencoded 模块的实际文件路径（通常是 node_modules 中的路径）。
  • 效果：在项目代码中，可以通过 import formUrlEncoded from 'form-urlencoded' 直接引入 form-urlencoded 模块，而无需写完整的路径。别名确保 Webpack 正确解析到该模块，特别是在模块路径可能不明确或需要特定版本时。

总结

• chainWebpack：通过链式 API 配置 ProvidePlugin，使 jQuery 自动注入到全局变量 $, jquery, jQuery 和 window.jQuery，方便在代码中直接使用 jQuery。
• configureWebpack：通过别名配置简化 form-urlencoded 模块的引用路径。
• 应用场景：这段配置适用于需要在 Vue 项目中全局使用 jQuery（例如使用某些依赖 jQuery 的插件）以及需要引入 form-urlencoded 模块（常用于处理表单数据的 URL 编码）。