首页
学习
活动
专区
工具
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(主要是二次构建,缓存提效,你就说爽不爽吧)。 上述配置都可通用,并实际使用过,提效不大就没放上去了,没啥意思。

92130

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代码。

    87330

    使用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

    2.8K10

    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.3K21

    【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

    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

    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

    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

    71830

    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

    如何在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 文件。在后续文章,我们将这么多配置项进行分类学习。

    3K10

    会写 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.7K41

    前端工程化: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

    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

    78620

    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.htmlscript标签src属性...;use相关loader模块调用顺序是后向前调用使用webpack打包less文件 运行cnpm i less-loader less -D 修改webpack.config.js这个配置文件

    48230

    借助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

    前后端分离之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
    领券