首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用vue-cli-3设置从我的webpack版本中排除目录

Vue CLI是一个基于Vue.js进行快速开发的完整系统,它集成了一系列的工具和配置,可以帮助开发者快速搭建Vue项目。而vue-cli-3是Vue CLI的第三个版本,相比于之前的版本,它提供了更加灵活和强大的配置选项。

在使用vue-cli-3设置从webpack版本中排除目录时,可以通过配置webpack的exclude选项来实现。exclude选项用于排除某些目录或文件不被webpack处理。

首先,在Vue CLI生成的项目中,可以找到一个名为vue.config.js的文件,如果没有则需要手动创建。在该文件中,可以使用configureWebpack选项来配置webpack。

具体操作如下:

  1. 打开vue.config.js文件,如果没有则创建该文件。
  2. 在文件中添加以下代码:
代码语言:txt
复制
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules\/(?!要排除的目录)/,
          use: {
            loader: 'babel-loader'
          }
        }
      ]
    }
  }
}

上述代码中,通过配置exclude选项来排除某些目录。其中,要排除的目录需要使用正则表达式进行匹配,可以根据实际情况进行修改。

  1. 保存文件并重新启动项目。

这样,webpack在打包时就会排除指定的目录,不对其进行处理。

需要注意的是,以上代码只是一个示例,实际情况中可能需要根据具体需求进行修改。另外,如果项目中使用了其他loader或插件,也需要根据实际情况进行配置。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据实际需求弹性调整计算资源,支持多种操作系统和应用场景。详情请参考腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,适用于存储和处理各种类型的文件和数据。详情请参考腾讯云对象存储

以上是关于如何使用vue-cli-3设置从webpack版本中排除目录的答案,希望能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

H5 基础脚手架:极速构建项目

前言 构建篇的 h5 项目构建配置,没有阅读过前文的读者拉到下方系列目录即可预览全系列 虽然 webpack 的优化配置博文烂大街了,还是稍微提一下,补充在完全体的系列里面 Webpack 辅助分析插件...// 在`disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。...// 例如,您可以使用`source:false`选项排除统计文件中模块的来源。...,提高后续项目的打开速度 不建议: 需要自己部署 cdn,第三方的不稳定,挂掉可能就需要喝茶了 项目版本依赖引用,升级会有问题,有一定的维护成本 不用的项目版本不一致,引用不一致,增加单个项目引用体积...构建速度从最开始的 7s 优化到最后的 2.5s(主要是二次构建,缓存提效,你就说爽不爽吧)。 上述的配置都可通用,并实际使用过,提效不大的就没放上去了,没啥意思。

92630

Webpack 打包优化之速度篇

在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨;当然,那些法子对于打包速度的提升,也是大有裨益。....* 版本中,使用的是 resolve.root,如今已经被弃用为 resolve.modules;同时被弃用的还有resolve.fallback、resolve.modulesDirectories...exclude:不能满足的条件(排除不处理的目录) include:导入的文件将由加载程序转换的路径或文件数组(把要处理的目录包括进来) loader:一串“!”...如果配置 Webpack 来排除 node_modules,那么它将从 dist 已经编译的目录中获取文件。否则会再次编译它们。...而在生产环境时,就需要将提前构建好的包,同步到 dist 中;这里拷贝静态文件,你可以使用 copy-webpack-plugin 插件:把指定文件夹下的文件复制到指定的目录;其配置如下: var CopyWebpackPlugin

1.6K20
  • TypeScript 工程化的实践方案

    一.TypeScript—编译选项和tsconfig.json配置选项 二.使用webpack打包ts代码 上一篇系统地总结学习了TypeScript的基础常用语法。...我们还可以通过编译选项来对ts进行一些配置,比如我写的ts代码语法有问题,就不让它编译。又比如我希望把我的代码编译成ES6版本的都可以进行配置。..."src/*" ] }, "lib": [ /* 译过程中需要引入的库文件的列表,不设置也行 */ "esnext", "dom",...二.使用webpack打包ts代码 实际开发中直接去使用ts编译器去编译代码的情况其实非常少,因为我们一般在开发一些大型项目的时侯,ts一般是结合打包工具去使用的,我们用得比较多的就是webpack。...下面就来学习总结一下把ts和webpack整合到一起,使用webpack来打包ts代码。

    88730

    使用Webpack5创建Vue2项目及优化

    2是因为上面安装的版本是 @babel/runtime-corejs2 配置webpack.config.js设置使用babel的规则 module.exports = { module: {...可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存。...to配置的相对路径是相对于发布目录的。 如果from所在目录中排除文件后没有文件的时候会报错。...缩小范围 在配置 loader 的时候,我们需要更精确的去指定 loader 的作用目录或者需要排除的目录,通过使用 include 和 exclude 两个配置项,可以实现这个功能,常见的例如: include...,推荐阅读 从过去到现在,聊聊 Tree-shaking webpack5 中 tree-shaking 中的配置 打开项目下 package.json, 加入配置 "sideEffects" sideEffects

    3K10

    【webpack 性能优化】编译速度从 50S 到 7S

    但需要注意的是:HardSourceWebpackPlugin 和 speed-measure-webpack-plugin 不能一起使用,这一点让我郁闷了很久 babel-loader 的 cacheDirectory...你可能使用 /\.m?js$/ 来匹配,这样有可能去转译 node_modules 目录或者其他不需要的源代码,导致性能下降 可以通过 exclude 排除掉一些不需要编译的文件。...这会将转译的结果缓存到文件系统中。cacheDirectory 默认值为 false。当有设置时,指定的目录将用来缓存 loader 的执行结果。...由于动态链接库中大多数包含的是常用的第三方模块,例如 Vue react、react-dom,只要不升级这些模块的版本,动态链接库就不用重新编译 如何使用? 要完成下面三步: 抽离。...如果你有其他的东西被构建依赖,你可以在这里添加它们 // 注意,webpack、加载器和所有从你的配置中引用的模块都会被自动添加 }, }, }; 总结 以上的探索,花费了笔者挺多的时间的

    3.4K21

    webpack入门指南

    publicPath设置成了http://rynxiao.com/assets/,其中设置到了插件的一些东西,这点下面会讲到,总之这个插件的作用是生成了上线发布时候的首页文件,其中script中引用的路径将会被替换...例如,我在output中如下设置: output : { path : './assets/', filename : '[name]....表示必须要包含的文件或者目录,而exclude的表示需要排除的目录 比如我们在配置中一般要排除node_modules目录,就可以这样写 { test : /\.js$/, loader : '...---- 5.2 如何给文件打版本 线上发布时为了防止浏览器缓存静态资源而改变文件版本,这里提供两种做法: 5.2.1 使用HtmlWebpackPlugin插件 // version/webpack.config.js...设置一个文件启动目录,运行 webpack-dev-server --content-base basic/ // 3.

    2.3K40

    【TS】612- 了不起的 tsconfig.json 指南

    如何配置一个合理的 tsconfig.json 文件?本文将全面带大家一起详细了解 tsconfig.json 的各项配置。...指定需要编译的目录 在不指定输入文件的情况下执行 tsc 命令,默认从当前目录开始编译,编译所有 .ts 文件,并且从当前目录开始查找 tsconfig.json 文件,并逐级向上级目录搜索。...,默认是当前目录 "paths": { // 路径映射,相对于baseUrl // 如使用jq时不想使用默认版本,而需要手动指定版本,可进行如下配置 "jquery":..."exclude": [ "src/lib" // 排除src目录下的lib文件夹下的文件不会编译 ] } 和 include 属性一样,支持 glob 通配符: * 匹配0或多个字符(不包括目录分隔符...文中通过一个简单 learnTsconfig 项目,让大家知道项目中如何使用 tsconfig.json 文件。在后续文章中,我们将这么多的配置项进行分类学习。

    2.1K30

    TypeScript趁早学习提高职场竞争力

    项目选项:target 设置ts代码编译的目标版本 示例: "compilerOptions": { "target": "ES6" } 如上设置,我们所编写的ts代码将会被编译为ES6版本的js代码...为例介绍以下如何结合构建工具使用TS。...整合,通常情况下,实际开发中我们都需要使用构建工具对代码进行打包;TS同样也可以结合构建工具一起使用,下边以webpack为例介绍一下如何构建工具使用TS: 初始化项目,进入项目根目录执行命令:npm...中的清除插件,每次构建都会先清除目录 配置webpack 根目录下创建webpack的配置文件webpack.config.js: const path = require("path"); const...@babel/preset-env:babel的预定义环境 @babel-loader:babel在webpack中的加载器 core-js:core-js用来使老版本的浏览器支持新版ES语法 修改webpack.config.js

    1.9K10

    vue-cli webpack2项目打包优化

    ,匹配要处理的文件) exclude:不能满足的条件(排除不处理的目录) include:导入的文件将由加载程序转换的路径或文件数组(把要处理的目录包括进来) 这可以减少不必要的遍历,从而减少性能损失...webpack-parallel-uglify-plugin 插件相对 UglifyJsPlugin 打出的包略大(但是不明显);这里的提速和增加的体积相比,我选择了追求速度(使用后我从40秒降到了19...拷贝静态文件 使用copy-webpack-plugin插件:把指定文件夹下的文件复制到指定的目录;其配置如下: var CopyWebpackPlugin = require('copy-webpack-plugin...19s->15s 设置 babel 的 cacheDirectory 为true 在webpack.base.conf.js中修改babel-loader: loader: 'babel-loader...cacheDirectory=true', 15s->14s 设置 noParse 如果你确定一个模块中,没有其它新的依赖,就可以配置这项, Webpack 将不再扫描这个文件中的依赖,这对于比较大型类库

    1.3K40

    webpack 4.x 初级学习记录

    填写路径的时候不用添加{} webpack {entry file} {destination for bundled file} 以上就是4版本之前的使用方式,但是这种方式在4版本中就不能使用了,4...从 webpack 4.0.0 版本开始,可以不用通过引入一个配置文件打包项目。然而,webpack 仍然还是 高度可配置的,并且能够很好的满足需求。...webpack 的核心概念: 入口(entry) 输出(output) loader 插件(plugins) 我们需要在根目录下创建一个 webpack.config.js 的文件,使用 Commonjs...当然也可以使用多个,但是推荐一个使用一个 了解更多 输出(output) output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ....是7.x版本,8.x版本目前会出现报错,具体如何解决还没有了解清楚,所以安装 babel-loader 时需要写成这样的 babel-loader@7 babel-loader 8.x 版本安装 cnpm

    72230

    如何在2021年编写网络应用程序?

    部署方式 故障排除 常见问题 介绍 在本文中,我将逐步向您介绍我使用的工具。...但是,这是我从小就喜欢的方法(出于我将要讲到的原因),也是我最能详细解释的方法。 从这里开始,我假设您对Java和Vue有基本的了解。我也不会详细介绍如何安装Node.js以及如何使用NPM。...首先,让我们从Webpack本身及其CLI界面开始 $ npm install webpack webpack-cli 然后,我们需要使用其编译器添加处理Vue文件的插件 $ npm install vue-loader...这将main.js在dist目录中创建一个新文件。这是我的最终用户将使用的文件。 现在,我们创建一个index.html文件(通常在public目录中,但这并不是必然要求)。 我Film.vue在components目录中创建一个新文件。

    10.9K20

    了不起的 tsconfig.json 指南

    如何配置一个合理的 tsconfig.json 文件?本文将全面带大家一起详细了解 tsconfig.json 的各项配置。...指定需要编译的目录 在不指定输入文件的情况下执行 tsc 命令,默认从当前目录开始编译,编译所有 .ts 文件,并且从当前目录开始查找 tsconfig.json 文件,并逐级向上级目录搜索。...,默认是当前目录 "paths": { // 路径映射,相对于baseUrl // 如使用jq时不想使用默认版本,而需要手动指定版本,可进行如下配置 "jquery":..."exclude": [ "src/lib" // 排除src目录下的lib文件夹下的文件不会编译 ] } 和 include 属性一样,支持 glob 通配符: * 匹配0或多个字符(不包括目录分隔符...文中通过一个简单 learnTsconfig 项目,让大家知道项目中如何使用 tsconfig.json 文件。在后续文章中,我们将这么多的配置项进行分类学习。

    4K10

    前端工程化:Webpack之常见配置详解

    但可能在创建前端项目时,都只是用脚手架vue-cli的初始化命令跑一下,将webpack当成一个黑盒使用,刚开始我也是这样,但是虽然一切配置都能通过脚手架自动完成,我们不用学会如何手动去配置,但是我们也至少应该知道...webpack-cli@4.7.2 -D 4、常用配置和基本使用 4.1 在项目中配置 webpack ① 在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件...中的默认约定 在 webpack 4.x 和 5.x 的版本中,有如下的默认约定: ① 默认的打包入口文件为 src -> index.js ② 默认的输出文件路径为 dist -> main.js...示意图如下: image.png image.png 解决:在 webpack.config.js 中添加如下的配置 image.png 生成环境下 如果生产环境下,使用Source Map,不可排除不法分子会利用它来...我在下面给你们总结了本篇文章的主要内容: ① webpack 的基本使用 ⚫ 安装、webpack.config.js、修改打包入口 ② plugin 的基本使用 ⚫ webpack-dev-server

    1.3K12

    会写 TypeScript 但你真的会 TS 编译配置吗?

    随着 TypeScript 的流行,越来越多的项目通过使用 TypeScript 来实现编写代码时候的类型提示和约束,从开发过程中减少 BUG 出现的概率,以此提升程序的健壮性和团队的研发效率。...: exclude 字段中的声明只对 include 字段有排除效果,对 files 字段无影响,即与 include 字段中的值互斥。...如果 tsconfig.json 文件中 files 和 include 字段都不存在,则默认包含 tsconfig.json 文件所在目录及子目录的所有文件,且排除在 exclude 字段中声明的文件或文件夹...延伸一下知识点,思考一下 tsc 是如何将高版本(ECMAScript 规范)代码向低版本代码转换的?这个转换的结果靠谱吗?与 Babel 有何差异?.../src",则 src 目录下的 TS 文件不能引用 src 目录以外的 ts 文件,一般我们会设置为 ./src 或 .

    3.8K41

    Vue 07.webpack

    网页加载速度慢, 因为 我们要发起很多的二次请求; 要处理错综复杂的依赖关系 如何解决上述两个问题 合并、压缩、精灵图、图片的Base64编码 可以使用之前学过的requireJS、也可以使用webpack...可以解决各个包之间的复杂依赖关系; 如何完美实现上述的2种解决方案 使用Gulp, 是基于 task 任务的; 使用Webpack, 是基于整个项目进行构建的; 借助于webpack这个前端自动化构建工具...这会将项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。...webpack的命令 在项目根目录中运行npm i webpack@3.x.x --save-dev安装到项目依赖中 webpack打包构建 运行npm init初始化项目,使用npm管理项目中的依赖包...' // 设置偶数行背景色,索引从0开始,0是偶数 $('#list li:even').css('backgroundColor','lightblue'); // 设置奇数行背景色 $('#list

    78920

    10天从入门到精通Vue(五)Webpack打包

    如何解决上述两个问题 什么是webpack 如何完美实现上述的2种解决方案 webpack安装的两种方式 初步使用webpack打包构建列表隔行变色案例 使用webpack的配置文件简化打包时候的命令...根据官网的图片介绍webpack打包的过程 webpack官网 webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行...main.js并书写各行变色的代码逻辑: // 导入jquery类库 import $ from 'jquery' // 设置偶数行背景色,索引从0开始,0是偶数 $('#list...> 使用html-webpack-plugin插件配置启动页面 由于使用--contentBase指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性...;use中相关loader模块的调用顺序是从后向前调用的; 使用webpack打包less文件 运行cnpm i less-loader less -D 修改webpack.config.js这个配置文件

    49130

    前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    静态文件(css/js/img)hash版本支持 11 清除目标文件目录 12 eslint支持并实现自动修复部分问题 13 vue接口请求axios支持 14 热更新,自动编译并刷新浏览器 项目目录结构...之所以可以直接写vue, axios,是因为我们在 alias 里设置了别名: var path = require('path') module.exports = { // 模块别名的配置,为了使用方便.../src/js/lib/axios.min.js') } } 这里的 path.resolve 作用是把相对路径转为绝对路径,假设我项目建在d:/demo 目录下, _dirname: d:\demo...extract-text-webpack-plugin 插件 默认情况下,js依赖引入css,编译后,css被加在js中,如果我们想把css提取出一个单独的文件,可以使用这个插件,并可以对提取出的css...income.js中依赖income.less 如果不使用extractTextPlugin,编译后的目录结构为 ? 查看income.js,发现css被引入在js之中,模块id为16 ?

    1.1K60

    借助Babel 7和Webpack构建React Toolchain

    它使用了一些最近node才支持的关键字和语法(在本教程中我使用了v 9.3.0版本)。因此需要一些很麻烦的设置,但是Facebook为此提供了一个可以轻松创建React应用的方案。....gitignore文件并在其中(至少)排除掉node_modules和dist目录。...我们在devServer属性设置了webpack-dev-server所需的配置,只需要指定我们打包文件的源文件所在目录contentBase、打包后的文件目录publicPath以及服务器端口port...--mode,webpack会回滚到上一个版本的构建结果并抛出警告。...毕竟如果你如果不需要文件处理那么这个功能就是冗余的了,不是吗? 我希望这篇文章可以帮助你理解React的应用是如何正常运转的以及其基本功能的底层是如何实现的。

    1.1K40
    领券