记一次webpack打包样式加载问题

今天是周六.

我过来加班了.

是因为一个属性问题.

俗话说一杯茶一包烟一个bug改一天

感觉这句话就是特意为我准备的(我加班的时候喝奶茶,抽烟,而且就一个bug.哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或)



言归正传,说下webpack打包问题,刚到新工作和大佬们一起做ts + vue + vant的项目.(我之前不写ts,其实差不多,就是命名语法等问题)
我们一起撸代码,一直是在本地run serve的本地是一直没问题的,但是准备转测的时候,打包发现了问题(建议大家以后,定期打包一下代码,不然问题集中到最后是很坑的.)

问题:打包之后vant的样式一直没有按需加载(我们这个项目使用是按需引入vant这种方式来使用的.)

就是因为在vue.config.js中配置文件没有加上这个 parallel: false, .导致打包一直有问题.虽然不是很明白原理(网上看了资料也不是很清楚,好像是允许并行webpack项目,提高打包速度的插件...)


代码:

parallel: false,

如上图 加上这个属性打包之后样式就会按需加载vant的css文件了.

以后应该没有人会遇到这个问题吧.毕竟我在网上搜了几天的资料都没看到过这类的问题,我就记录下来提醒自己吧,over!

em....顺便说下vant的按需引入和全局引入吧

全局引入:(在main.js中导入就好了/用ts的童鞋就是main.ts文件)

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

别忘了Vue.use(Vant) 哦!

按需引入(看大家都是推荐使用的,我也推荐一下这种方法吧.)

// 1.安装npm install babel-plugin-import -D
// 2.在babelrc中配置
   "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["import", [
      {
        "libraryName":"vant",
        "style":true
      }
      ]
    ]
  ]     

import { Button } from 'vant'

Vue.use(Button) //或者下面的
 @Component({
        components: {
            [Button.name]: Button,
            //下面这些送你们的
            [Icon.name]: Icon,
            [NavBar.name]: NavBar,
            [Actionsheet.name]: Actionsheet,
            [SubmitBar.name]: SubmitBar,
            [Cell.name]: Cell,
            [Search.name]:
            [CellGroup.name]: CellGroup,
            [SwipeCell.name]: SwipeCell,
            [Stepper.name]: Stepper,
            [List.name]: List,
        }
    })

原文地址:https://www.cnblogs.com/niluiquhz/p/10584033.html

时间: 2024-10-03 02:10:50

记一次webpack打包样式加载问题的相关文章

【webpack】-- 样式加载

加载css需要用到css-loader和style-loader css-loader将@import 和 url 处理成正规的ES6 import ,如果@import指向的是一个外部资源,css-loader会跳过,而只会对内部资源做处理.css-loader处理之后,style-loader会将输出的css注入到打包文件中.css默认是inline模式,且实现了HMR接口.但inline不太适用于生产环境(全部输出在页面上).还需要用extracttextplugin生成一个单独的css文

解决vue-cli webpack打包后加载资源的路径问题

vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: 前端精品教程:百度网盘下载 config/index.js文件的build->assetsPublicPath的默认值改为 './' assetsPublicPath:资源的根目录.这个是通过http服务器运行的url路径.因为webapp和static中间还有层dist,所以要用'./' 2.另一个就是单纯

webpack打包懒加载

lazyload https://webpack.js.org/guides/lazy-loading/ 懒加载 -- 按需加载. Lazy, or "on demand", loading is a great way to optimize your site or application. This practice essentially involves splitting your code at logical breakpoints, and then loading

解决访问github时css、js样式加载不了

最近发现访问github时会时不时出现样式加载不了的问题 F12查看控制台信息,发现几个样式文件time-out,当然是GRW的杰作 DNS解析不了就只有自己连IP地址了,在http://serve.netsh.org/pub/ping-tool/中查看这两个域名的IP地址,更改本地hosts文件 ubuntu的hosts在/etc/hosts文件中 更改过后别忘了重启网络  sudo /etc/init.d/networking restart 再次访问github

远程访问本地的网站 网站样式加载不上

远程访问本地的网站 网站样式加载不上(MLECMS2.3) 找到项目中的配置文件 修改配置文件中的localhost为本地的IP地址,一般是192.168.0.***

[Unity]浅谈AssetBundle的依赖关系打包与加载

一.写在前面 通过AssetBundle进行资源管理很方便.AssetBundle的打包与加载策略有很多种,本文来讲一种可以随意通过资源名来加载指定目录下资源的打包方法.意在加深对资源管理的理解. 二.策略介绍 1.打包的粒度划分的策略 ①     所有在指定目录下的文件,即RootList,都被打包成单独结点 ②     对于RootList所依赖的所有资源,即DepList,依赖数大于1的,被打包成单独结点,等于1的,向上合并至被依赖结点. ③     记录打包信息 2.下载策略 ①    

css样式加载顺序及覆盖顺序深入理解

注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { border: solid 2 #AE0; } 查找一些教材中(w3schools等),只说css的顺序是"元素上的style" > "文件头上的st

u3d外部资源 打包与加载的问题

被坑了一下午,调bug,u3d外部加载资源一会可以,一会不行,始终找不到问题,最后快下班的时候,重新试了一下,原来是资源打包之前的文件名,和之后的加载资源名必须一样 [MenuItem("Custom Editor/Build AssetBundle From Selection Twice")] static void ExportResourceNoTrack() { // Bring up save panel string path = EditorUtility.SaveFi

webpack分片chunk加载原理

首先,使用create-react-app快速创建一个demo npx create-react-app react-demo # npx命令需要npm5.2+ cd react-demo npm start 通过http://localhost:3000/端口可以访问页面,接下来修改主应用组件App.js import React, { Component } from 'react'; import './App.css'; class App extends Component { onB