Vue.js vue.config.js & webpack 4: 重写规则中的’exclude’或’include’

在本文中，我们将介绍如何通过vue.config.js文件和Webpack 4对Vue.js项目中的规则进行重写，特别是重写规则中的’exclude’或’include’属性。我们将讨论这些属性的作用，以及如何使用它们来满足项目特定的需求。

阅读更多：Vue.js 教程

了解vue.config.js

在Vue.js项目中，vue.config.js文件用于配置一些全局的构建配置，包括Webpack的配置。这个文件位于项目的根目录下，可以自己创建。

vue.config.js文件中的配置选项，可以覆盖默认的Webpack配置，以满足我们的定制需求。我们可以在这个文件中修改各种构建相关的选项，比如publicPath、outputDir、devServer等。

重写规则中的exclude属性

在Vue.js项目中，我们通常会使用Webpack的module.rules配置规则来处理不同类型的文件，比如.vue文件、.js文件、.css文件等。而这些规则中的exclude属性用于指定哪些文件不需要进行处理。

假设我们需要将某些文件排除在Webpack的处理范围之外，我们可以使用exclude属性。比如，我们有一个文件夹下的文件都是已处理过的，我们希望Webpack不再处理它们，可以使用如下配置：

// vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .exclude.add(/path\/to\/exclude/)
      .end()
  }
}

上述配置中的exclude属性使用add方法添加了一个正则表达式，用于指定某个文件夹的路径，Webpack会排除这个路径下的文件。

如果我们需要排除多个文件夹的路径，可以连续调用exclude.add方法，示例如下：

exclude.add(/path/first/exclude/)
exclude.add(/path/second/exclude/)

重写规则中的include属性

与exclude属性相反，include属性用于指定哪些文件需要被处理。我们可以使用它来限定Webpack只处理某些特定的文件。

比如，如果我们希望Webpack只处理某个特定文件夹下的文件，可以使用如下配置：

// vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .include.add(/path\/to\/include/)
      .end()
  }
}

上述配置中的include属性使用add方法添加了一个正则表达式，用于指定某个文件夹的路径，Webpack会只处理这个路径下的文件。

同样，如果我们需要处理多个文件夹的路径，可以连续调用include.add方法。

示例说明

为了更好地理解上述概念，我们来看一个示例。假设我们的Vue.js项目中有一个特定的文件夹（src/assets/vendor），我们希望Webpack只处理这个文件夹下的JS文件，其他文件夹中的JS文件不进行处理。

我们可以按照下面的方式进行配置：

// vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .include.add(/src\/assets\/vendor/)
      .end()
  }
}

上述配置中，我们使用include属性指定了要处理的文件夹路径。这样，Webpack只会处理src/assets/vendor文件夹下的JS文件，其他文件夹中的JS文件将被排除在外。

总结

在本文中，我们介绍了如何通过vue.config.js文件和Webpack 4中的规则来重写Vue.js项目中的’exclude’或’include’属性。我们了解了这些属性的作用，并通过示例说明了如何使用它们来满足项目特定的需求。通过灵活配置这些属性，我们可以更好地控制Webpack的处理范围，提高项目的构建效率。希望本文对您理解和使用Vue.js中的规则重写有所帮助。