Vue WebPack忽略指定文件或目录方式

目录
  • WebPack忽略指定文件或目录
    • 方法1：使用 null-loader
    • 方法2：使用 url-loader
  • WebPack打包忽略某个文件
    • 在项目中public中新建config.js
    • vue.config.js 中设置忽略文件

WebPack忽略指定文件或目录

前端Vue项目使用 WebPack 打包时，有时候我们需要忽略掉一些文件。比如一些说明文档、ReadMe之类的，我们只希望它存在于源码中，而不是被打包给用户。

通过修改 webpack.base.conf.js 配置文件，有以下方式可以达到目的。

方法1：使用 null-loader

module: {
    rules: [
      ...
      // 忽略掉所有 .md 文件
      {
        test: /\.md$/,
        loader: 'null-loader',
      },
      ...
    ]
}

由于官方已经不推芥使用此方法，故会显示一个警告：

  WARNING in ./src ^\.\/.*$
  Module not found: Error: Can't resolve 'null-loader' in 'D:\Documents\Projects\Web\xxx'
   @ ./src ^\.\/.*$
  ...

方法2：使用 url-loader

使用 url-loader ，通过在 generator 中返回一个空字符串，达到同样的效果，不会显示警告。

module: {
    rules: [
      ...
      // 忽略掉所有 .md 文件
      {
        test: /\.md$/,
        loader: 'url-loader',
        options: {
          limit: 10,
          generator: (content, mimetype, encoding, resourcePath) => {
            return ''
          }
        },
      },
      ...
    ]
}

WebPack打包忽略某个文件

在项目中public中新建config.js

vue.config.js 中设置忽略文件

引入

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目总结之文件夹结构配置详解

    vue项目总结之文件夹结构配置详解

    前言 之前一段时间都在使用 vue 开发后台管理系统,在摸索的过程中对 vue 本身和模块化.规范化开发有了更深的认知,现在记录下来,希望对其他需要开发项目的人有帮助. 基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next.scss 等最新语言特性.下面随着小编来一起学习学习吧. 项目配置 首先,在确定好使用的框架和组件库后,先要大致了解它们,做到文档基本熟悉.本次开发使用到的有: vue , vuex , axios , elementUI .

  • vue-cli webpack模板项目搭建及打包时路径问题的解决方法

    这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好.本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方,还请大家评论建议下. 1. 安装必要的环境准备 首先我们要能够暗转node.js,这个环境.百度搜索node,进入官网根据自己的操作系统进行下载即可.现在的版本都是自带npm的了.所以安装后,环境变量正常情况下会自动配置,开启一个命令行终端,输入node,npm,就可以看到相应的信息.那么说明安装

  • Vue项目总结之webpack常规打包优化方案

    由于新建项目发版打包时间大概需要 30分钟 ,发版时 严重 拖慢 下班 时间,所以特意查看了相关文档来优化打包速度,争取早点下班,^_^. 分析打包文件 要优化,先分析.我们先要知道到底是哪里拖慢我们的打包速度呢? 打包后生成文件分析 可以利用 webpack-bundle-analyzer 插件来分析我们打包后生成的文件 安装 npm i webpack-bundle-analyzer -D 使用 修改 webpack.prod.conf.js 文件 const BundleAnalyzerP

  • 浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法

    1.vue中的vue-cli打包 最近在用vue写一个小项目,其中就用到了vue脚手架工具vue-cli,在测试打包后能否运行过程中遇到不少问题,而且在网上这些问题答案都不太好找,废话不多说,进入正题. a.执行打包命令:npm run build b.打包之后生成的文件夹为根目录下的dist文件: c.进入dist中 在运行这个index.html之前先说说一些打包配置问题: 在config文件夹下可以看到一个index.js文件,打开其中可以看到有几个属性分别是: assetsRoot: p

  • Vue WebPack忽略指定文件或目录方式

    Vue WebPack忽略指定文件或目录方式

    目录 WebPack忽略指定文件或目录 方法1:使用 null-loader 方法2:使用 url-loader WebPack打包忽略某个文件 在项目中public中新建config.js vue.config.js 中设置忽略文件 WebPack忽略指定文件或目录 前端Vue项目使用 WebPack 打包时,有时候我们需要忽略掉一些文件.比如一些说明文档.ReadMe之类的,我们只希望它存在于源码中,而不是被打包给用户. 通过修改 webpack.base.conf.js 配置文件,有以下方

  • Asp.net获取服务器指定文件夹目录文件并提供下载的方法

    本文实例讲述了Asp.net获取服务器指定文件夹目录文件并提供下载的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: string dirPath = HttpContext.Current.Server.MapPath("uploads/"); if (Directory.Exists(dirPath)) {        //获得目录信息        DirectoryInfo dir = new DirectoryInfo(dirPath);       

  • 基于Vue+Webpack拆分路由文件实现管理

    事实是,如果你的项目不是特别大,一般是用不着分拆的.如果项目大了,那就需要考虑分拆路由了.其实,这个操作并不复杂. 当我们用 vue-cli 工具,创建一个新的 vue 项目时,就已经给大家新建好了一个路由文件 src/router/index.js ,内容如下: import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router

  • Compact 显示和更改 NTFS 分区上的文件或目录压缩

    Compact 显示和更改 NTFS 分区上的文件或目录压缩.如果在没有参数的情况下使用,则 compact 显示当前目录的压缩状态. 语法 compact [{/c|/u}] [/s[:dir]] [/a] [/i] [/f] [/q] [FileName[...]] 参数 /c  压缩指定的目录或文件.  /u  解压缩指定的目录或文件.  s:dir  指定将所请求的操作(压缩或解压缩)应用到指定目录的所有子目录,或者如果没有指定目录,则应用到当前目录的所有子目录. /a  显示隐藏或系统

  • PHP统计目录中文件以及目录中目录大小的方法

    本文实例讲述了PHP统计目录中文件以及目录中目录大小的方法.分享给大家供大家参考,具体如下: <?php //循环遍历目录中所有的文件,并统计目录和文件的大小 $dirName="phpMyAdmin"; $dir=opendir($dirName); //返回一个资源类型 while($fileName=readdir($dir)){ $file=$dirName."/".$fileName; if($fileName!="." &

  • python文件及目录操作代码汇总

    前言 在python中,内置了文件(file)对象,通过一些内置的方法就可以实现对文件的操作,例如open()方法创建一个文件对象,write()方法向文件写入内容. 一.文件基本操作 1.创建和打开文件 想要操作文件,先要创建或者打开指定文件并创建文件对象,可以通过内置函数open()来实现. file = open(file_name[,mode[,buffering]]) ''' file_name : 要创建或者打开的文件名 mode : 用于指定文件打开的方式 ''' mode参数的参

  • 详解Spring boot操作文件的多种方式

    详解Spring boot操作文件的多种方式

    目录 一.获取文件路径 1.class.getResource(path) 2.ClassLoader.getResource(path) 3.项目路径 二.操作文件的三种方式 1.ClassPath 2.FileSystem 3.UrlResource 一.获取文件路径 获取文件路径 1.class.getResource(path) 其中的参数path有两种形式,一种是以"/"开头的,另一种是不以"/"开头: 「以'/'开头的表示」:从项目的根路径下去获取文件即

  • vue引用js文件的多种方式(推荐)

    1.vue-cli webpack全局引入jquery (1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖.) (2)在webpack.base.conf.js里加入 var webpack = require("webpack") (3)在module.exports的最后加入 plugins: [ new webpack.optimize.CommonsChu

  • Vue+webpack项目配置便于维护的目录结构教程详解

    新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common 目录 主要用来存放公共的文件 src/components 主要用来存放公共的组件 src/config 用来存放配置文件,文件目录如下 src/config/index.js 配置目录入口文件 import api from './website' // 当前平台 export const HOS

  • Vue webpack 项目自动打包压缩成zip文件的方法

    这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了.所以索性在执行 npm run build 命令时就直接打包成zip文件,方便省事! 1.插件装备 webpack插件:filemanager-webpack-plugin,该插件可执行打包,复制,移动,删除文件以及新文件夹在build之前及之后创建. 安装: npm i

随机推荐