webpack配置模块的查找范围

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

import ‘./style‘

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

import ‘./style.css‘

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

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

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

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

你学会了吗?点个赞吧!

原文地址:https://www.cnblogs.com/wuxianqiang/p/10325882.html

时间: 2024-11-04 03:57:05

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

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

一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板.这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮我们完善功能可以将文件打包压缩,图片转base64等.后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要,接下来我将基于webpack3.6.0版本结合文档将文件各个击破,纯干料. 二.主体结构 1. package.json 项目作为一个大家庭,每个文件都各司其职.package.js

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

一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板.这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮我们完善功能可以将文件打包压缩,图片转base64等.后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要,接下来我将基于webpack3.6.0版本结合文档将文件各个击破,纯干料.重点章节点击查看:package.json:config/index.js:webpack.base.con

webpack配置这一篇就够

最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/42e11515c10f git项目地址:https://github.com/gengchen528/webpackSample 更多前端内容可以到:http://www.bloggeng.com/ 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的

vue-cli#2.0 webpack 配置分析

目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └

gulp+webpack配置

转自:https://www.jianshu.com/p/2549c793bb27 gulp gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩

vue UI 告别webpack配置

目录 vue UI 告别webpack配置 开始体验 创建项目 项目细节 1. 插件 2. 依赖 3. 配置 4. 任务 总结 vue UI 告别webpack配置 vue-cli 3.0 的候选版本也已经发布多时了.vue-cli 3.0 版本为我们提供了集 创建.管理.分析 为一体的可视化界面vue ui,妈妈再也不用担心我不懂配置啦~让我们来一起尝尝鲜吧~ #安装最新版的vue-cli npm install -g @vue/cli #yarn/npm 安装(二选一) yarn globa

vue-cli中webpack配置解析

版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2.2.1 目录结构 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.de

最简单的babel+webpack配置

首先先介绍一下2个重要的库:core-js 和 regenerator core-js core-js 是用于 JavaScript 的组合式标准化库,它包含 es5 (e.g: object.freeze), es6的 promise,symbols, collections, iterators, typed arrays, es7+提案等等的 polyfills 实现.也就是说,它几乎包含了所有 JavaScript 最新标准的垫片.不过为什么它不把 generator 也实现了... ?

webpack配置之webpack.config.js文件配置

webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve 1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐的事情.我们尝试用文件的形式将输入输出文件夹配置好.新建一个js文件,并命名为webpack.config.js[目前只能命名为这个,不然程序不识别] webpack.config.js 2.在webpack.config.js文件内输入以下代码 module.exports = { entry: '