首页 > 其他分享 >vue&webpack - vue2版本webpack脚手架配置梳理

vue&webpack - vue2版本webpack脚手架配置梳理

时间:2024-01-05 15:12:18浏览次数:48  
标签:vue module js webpack vue2 loader config

vue&webpack - vue2版本webpack脚手架配置梳理

资源链接

Vue CLI
webpack
webpack5 和 webpack4 的区别

webpack

Webpack 4 于 2018 年 2 月发布。
(2020-10-10)webpack 5.0.0 发布

VUE CLI 配置

configureWebpack

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 中的 publicPath 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方,以确保所有的部分都能正常工作在一起。

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

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

chainWebpack / 链式操作 (高级)

Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则和具名插件,并有机会在后期进入这些规则并对它们的选项进行修改。

修改 Loader 选项

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

对于 CSS 相关 loader 来说,我们推荐使用 css.loaderOptions 而不是直接链式指定 loader。这是因为每种 CSS 文件类型都有多个规则,而 css.loaderOptions 可以确保你通过一个地方影响所有的规则。

添加一个新的 Loader

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // 你还可以再添加一个 loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}

替换一个规则里的 Loader

如果你想要替换一个已有的基础 loader,例如为内联的 SVG 文件使用 vue-svg-loader 而不是加载这个文件:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // 清除已有的所有 loader。
    // 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()

    // 添加要替换的 loader
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }
}

修改插件选项

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* 传递给 html-webpack-plugin's 构造函数的新参数 */]
      })
  }
}

你需要熟悉 webpack-chain 的 API 并阅读一些源码以便了解如何最大程度利用好这个选项,但是比起直接修改 webpack 配置,它的表达能力更强,也更为安全。

比方说你想要将 index.html 默认的路径从 /Users/username/proj/public/index.html 改为 /Users/username/proj/app/templates/index.html。通过参考 html-webpack-plugin 你能看到一个可以传入的选项列表。我们可以在下列配置中传入一个新的模板路径来改变它:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].template = '/Users/username/proj/app/templates/index.html'
        return args
      })
  }
}

你可以通过接下来要讨论的工具 vue inspect 来确认变更。

审查项目的 webpack 配置

vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。那个全局的 vue 可执行程序同样提供了 inspect 命令,这个命令只是简单的把 vue-cli-service inspect 代理到了你的项目中。

该命令会将解析出来的 webpack 配置、包括链式访问规则和插件的提示打印到 stdout。

将其输出重定向到一个文件以便进行查阅:

vue inspect > output.js

注意它输出的并不是一个有效的 webpack 配置文件,而是一个用于审查的被序列化的格式。

你也可以通过指定一个路径来审查配置的一小部分:

# 只审查第一条规则
vue inspect module.rules.0

指向一个规则或插件的名字:

vue inspect --rule vue
vue inspect --plugin html

列出所有规则和插件的名字:

vue inspect --rules
vue inspect --plugins

标签:vue,module,js,webpack,vue2,loader,config
From: https://www.cnblogs.com/zc-lee/p/17947284

相关文章

  • 【Webpack】-css,less,图片的打包及压缩优化
    一、打包CSS代码由于Webpack默认只识别js代码,所以打包css代码需要其他一些东西来帮忙加载器css-loader:解析css代码加载器style-loader:把解析后的css代码插入到DOM步骤:1.准备css文件代码引入到src/login/index.js中(压缩转译处理等)2.下载css-loader和style-loader本地软件包3.配置web......
  • vue---v-modle实现字符组件通信
    子父组件在做数据传值和通信中,通常都是父组件通过【:props】进行数据的传递,通常用于父组件通过传递不同的参数,改变子组件。但是经常会遇到这样的场景:需要父子组件进行数据通信,实现双向数据绑定,可以利用v-modle实现父子组件数据交互通信。父组件:<template><div>......
  • # Vue3 使用路由 Router
    Vue3使用路由Router之前几篇博文说了一下vue的基本语法和vue的传参,今天这篇博文稍微说一下vue3里面使用路由。介绍众所周知,vue是用来构建单页面应用的前端框架,大于大多数此类型应用来讲,都推荐使用官方支持的vueRouter,在单页面应用,客户端的JavaScript可以连接页面......
  • Vue中使用API内容渲染的弹出列表的打开方式
    要在Vue中实现点击链接打开一个弹出窗口,你可以按照以下步骤进行操作:首先,为每个链接添加一个点击事件处理程序。你可以使用@click指令来做到这一点。在你的模板中的链接元素上添加该指令,如下所示:<av-for="iinitems"v-bind:key="i.id"class="biblio__item"@click=......
  • 如何继续填写具有Vue日期选择器Cypress的表单
    在使用Cypress填写包含Vue日期选择器的表单时,可以尝试以下方法来解决下拉菜单覆盖表单的问题:使用.click()命令打开日期选择器:在使用cy.get('#dispatch-date').type('22-10-2022');填写日期之前,尝试使用.click()命令点击日期选择器,以确保下拉菜单打开并露出可选日期。例如:cy.get('#d......
  • Vue2 中每个组件实例都对应一个 watcher 实例?.
    Vue2中每个组件实例对应一个渲染Watcher实例,用于监听组件的响应式数据变化并更新视图。除了渲染Watcher,还可以通过watch属性来创建额外的Watcher实例,用于监听特定的数据变化。在Vue2中,每个组件实例都有一个$watch方法,可以用于创建Watcher实例。......
  • 手撕Vuex-模块化共享数据上
    前言好,经过上一篇的介绍,实现了Vuex当中的actions方法,接下来我们来实现Vuex当中的模块化共享数据(modules)。modules方法用于模块化共享数据,那么什么叫模块化共享数据呢?其实非常简单。过去我们将所有模块的数据都放到state中共享,例如:我们有三个模块首页/个人中心/登录......
  • 手撕Vuex-实现actions方法
    经过上一篇章介绍,完成了实现mutations的功能,那么接下来本篇将会实现actions的功能。本篇我先介绍一下actions的作用,然后再介绍一下实现的思路,最后再实现代码。actions的作用是用来异步修改共享数据的,怎么异步修改,这个时候我们回到Vue的官方Vuex文档中,有如下这么一个图:从......
  • 手撕Vuex-实现mutations方法
    经过上一篇章介绍,完成了实现getters的功能,那么接下来本篇将会实现mutations的功能。在实现之前我们先来回顾一下mutations的使用。将官方的Vuex导入进来,因为我们的还没有实现,现用一下官方的,来演示一下mutations的使用。mutations是用来修改共享数据的,先在mutations中......
  • 手撕Vuex-实现共享数据
    经过上一篇章介绍,完成了添加全局$store,接下来就是实现共享数据的功能。在Vuex中,共享数据是通过state来实现的,所以我们需要在Nuex.js文件中实现state的功能。在Vuex中,state是一个对象,这个对象中存放的就是我们的共享数据,所以我们需要在Nuex.js文件中定义一个state对......