vue-cli3 的webpack配置

最新推荐文章于 2024-08-08 22:11:57 发布

转载最新推荐文章于 2024-08-08 22:11:57 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/zz153417230/article/details/84389287

标签

#Vue-cli #webpack #vue.confign.js

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨@vue/cli的Webpack配置方式，介绍如何使用inspect命令查看默认配置，并讲解了process.env.NODE_ENV与process.env.BASE_URL的设定。此外，还提供了自定义Webpack配置的详细步骤，包括在vue.config.js中使用configureWebpack选项进行调整。

@vue/cli的webpack配置
查看默认配置
因为Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的, 把一些常用的内容配置好. vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。

vue inspect > output.js

将webpack默认配置, 重定向到一个文件中.

其中的一段为:

plugins: [
    /* config.plugin('vue-loader') */
    new VueLoaderPlugin(),
    /* config.plugin('define') */
    new DefinePlugin(
        {
            'process.env': {
                NODE_ENV: '"development"',
                BASE_URL: '"/"'
            }
        }
    ),

这里定义了

process.env.NODE_ENV 为 development

process.env.BASE_URL 为 /

自定义webpack
主要是按照官方文档的说明

调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

该对象将会被 webpack-merge 合并入最终的 webpack 配置。

警告

有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js中的 baseUrl 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象：

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

原文链接：https://blog.csdn.net/zz153417230/article/details/84389287