一般我们的入口文件会引入一下公共的样式文件,比如这样

  1. import './style'

但是这个样式文件并不会生效呀,因为你的写法不对鸭,你要把文件的后缀名也要写

  1. import './style.css'

为什么会这样了,这是因为commonJS文件查找的形式,一般会先找JS,再找JSON,再找文件,文件里面的index.js,反正就是很复杂,具体的去看看源码吧!

如何解决这个问题,就是在webpack的配置文件中配置

  1. resolve: {
  2. extensions: ['.js', '.json', '.css'] // 配置commonJS的查找范围
  3. }

按照指定的文件类型进行查找,这样就可以正确的找到我们需要的文件啦!所以有些时候报错时出现文件找不到,可能是这个原因哦

你学会了吗?点个赞吧!

webpack配置模块的查找范围的更多相关文章

  1. webpack指定第三方模块的查找路径

    通常我们会使用一些地方模块在我们的项目中,比如bootstrap import 'bootstrap' 导入的bootstrap默认会查找当前目录的node_modules文件,但是如果这个文件没有, ...

  2. vue-cli中webpack配置详解

    vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...

  3. vue-cli脚手架中webpack配置基础文件详解

    一.前言 原文:https://segmentfault.com/a/1190000014804826 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wep ...

  4. vue-cli 脚手架中 webpack 配置基础文件详解

    一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板.这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮 ...

  5. webpack配置指南

    Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...

  6. Webpack配置示例和详细说明

    /* * 请使用最新版本nodejs * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本. * 也可以使用 webpack -d -w 命令,生成用于开 ...

  7. vue-cli#2.0 webpack 配置分析

    目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-s ...

  8. webpack配置这一篇就够

    最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...

  9. 前端工程化(二)---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

随机推荐

  1. 使用selenium 模拟人操作请求网页

    首先要 pip install selenium  安装插件 然后要下载驱动驱动根据你的浏览器 Chrome  selenium 驱动下载地址 http://chromedriver.storage. ...

  2. 修改 iis 的端口号: 80 与 443

    来自:https://support.microsoft.com/en-us/help/149605/how-to-change-the-tcp-port-for-iis-services Micro ...

  3. Tomcat内存监控及调优

    JDK(1.6版本以上)自带有个jvisualvm工具.该工具是用来监控java运行程序的cpu.内存.线程等的使用情况.并且使用图表的方式监控java程序.还具有远程监控能力. 界面如下: 1.JD ...

  4. cnblogs latex公式

    选项->启用数学公式支持 \begin{equation*} \begin{split} &xxx\\ &xxx\\ \end{split} \end{equation*} (\ ...

  5. 斯坦福大学公开课机器学习:machine learning system design | trading off precision and recall(F score公式的提出:学习算法中如何平衡(取舍)查准率和召回率的数值)

    一般来说,召回率和查准率的关系如下:1.如果需要很高的置信度的话,查准率会很高,相应的召回率很低:2.如果需要避免假阴性的话,召回率会很高,查准率会很低.下图右边显示的是召回率和查准率在一个学习算法中 ...

  6. TestNg 7.依赖测试

    我本个测试方法执行的时候,依赖于其他的方法.用到关键字dependsOnmethods(依赖于那个方法)也有依赖于哪个组(dependsOnGroups). 看以下的一段代码: package com ...

  7. java 文件创建 调试

    BufferedWriter bw=new BufferedWriter(new FileWriter("/2.txt")); bw.write("hello" ...

  8. POJ 3522 Slim Span(极差最小生成树)

    Slim Span Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 9546   Accepted: 5076 Descrip ...

  9. parallels tools 安装

    │ - kernel-devel-2.6.32-358.el6.x86_64 │ │ - dkms

  10. 图形设计必备软件:CorelDRAW

    [CorelDRAW 激发创意] CorelDRAW Graphics Suite 是一款领先的图形设计软件,收到数百万专业人士.小型企业主以及全球设计爱好者的热捧.它可以提供无缝的图形.版面.插图. ...