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

import './style'

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

import './style.css'

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

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

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

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

你学会了吗?点个赞吧!

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. CF 1013E Hills

    这是一道DP题...我居然有那么半个小时思考非DP解决方案,实在是太弱了. 题意:给您若干山,您可以花费1代价削去1高度,求有k个山峰时的最小代价. 输出k = 1 ~ (n + 1) >> ...

  2. .Net Core Nlog日志记录到MySql

    前段时间想要实现这个功能网上找了很多资料,现在整理一下发布出来,希望给大家一点帮助. 首先是依赖项的选择: 关于NLog版本不是最新是因为最新版本有点问题我试了试不支持,所以选了这几个版本,MySql ...

  3. 面试集——redis

    背景:该贴主要用来记面试过程中redis相关的问题,方便后期回顾. 为什么说Redis是单线程的以及Redis为什么这么快! https://blog.csdn.net/xlgen157387/art ...

  4. 向redis中添加删除list列表

    转: 向redis中添加删除list列表 2018年04月18日 15:44:54 luo_yu_1106 阅读数:4082   一.添加 向redis中添加队列有两种方式 1.lpush l是lef ...

  5. 第二十二节,TensorFlow中的图片分类模型库slim的使用、数据集处理

    Google在TensorFlow1.0,之后推出了一个叫slim的库,TF-slim是TensorFlow的一个新的轻量级的高级API接口.这个模块是在16年新推出的,其主要目的是来做所谓的“代码瘦 ...

  6. 马士兵2string buffuer

    string不可变的字符序列 s1=s1+s2

  7. exgcd证明和最基础应用

    如何求解这个方程:\(ax + by = gcd (a, b)\)? \(∵gcd(a, b) = gcd (b, a \% b)\) \(∴\)易证 $ gcd(a, b)$ 总是可以化为 \(gc ...

  8. python自动化开发-[第十天]-线程、协程、socketserver

    今日概要 1.线程 2.协程 3.socketserver 4.基于udp的socket(见第八节) 一.线程 1.threading模块 第一种方法:实例化 import threading imp ...

  9. CSS设置边框、符号、背景样式、链接属性

    一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白* ...

  10. Shell命令的执行顺序

    shell执行命令的步骤顺序如上图,看起来有些复杂. 当命令行被处理时,每一个步骤都是在Shell的内存里发生的;Shell不会真的把每个步骤的发生显示给你看. 所以,你可以假想这事我们偷窥Shell ...