Webpack中resolve配置

背景：

（1）开发中为什么引入模块时，不写具体的文件后缀，也能正确加载到文件呢？
（2）甚至直接引入的是一个文件夹的路径时，也能正确使用文件下的index.js文件呢？

import Child from './child';

import Child from './child.js';

resolve配置：

(1) 在引入模块时，如果没有写后缀，那么webpack会在该目录下去查找有没有.js或者.jsx文件，再进行引用。

(2) mainFiles中可以配置入口文件，默认是读取一个文件夹下的index.js文件，如果是child.jsx文件，那么就识别不了，这样配置的话，就会在mainFiles配置数组中去查找，如果存在就可以正确引入。

index.js：

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import Child from 'child'; //通过上面的alias进行了别名配置，减少了路径长度class App extends Component {render() {return (<div><div>This is App</div><Child /></div>)}
}ReactDom.render(<App />, document.getElementById('root'));

注意⚠️：resolve很有用，但是配置要合理。

如果在resolve中的extensions或者mainFiles配置多个查找项，那么每当引入模块时，实际上就会进行查找的处理，在一定程度上也会影响webpack的打包速度。

Webpack中resolve配置相关推荐

Webpack 中 resolve 路径解析
我们先要从 Webpack 中 resolver 这个概念说起.Webpack 带来的一大理念是:一切皆模块.在项目中我们可以使用 ESM 的方式 import './xxx/xxx' 或者 impo ...
java配置文件中的plugin,启用ContextReplacementPlugin以忽略webpack中的配置和测试设置文件...
我正在开发一个项目,其中我的文件夹结构如下 lib apps src / index.js(webpack的入口文件)jestEnvSetup.js webpack.config.js package ...
13 Webpack中的配置-Externals
Externals Externals告诉Webpack那些模块不需要打包,这些模块依赖于外部环境,一般是通过外部环境提供的.比如jQuery的使用,通过Npm可以把jQuery模块下载到本地引入使用 ...
webpack安装及配置
1.概念 webpack是一个静态化前端打包,可以把复杂的依赖关系打包为一个或多个文件,最终生成浏览器可以识别的资源html.css图片,js 2.安装 win+r输入cmd 唤出系统控制面板然后进 ...
webpack中的style-resources-loader加载全局css变量
我们在项目中经常会遇到这种场景,抽离了一些公用的样式,并且还会定义一些变量,比如:variables , mixins , function,之前都是在每个样式文件中手动的@import导入.styl ...
vue-cli中的webpack的config配置详细说明
vue-cli中的webpack的config配置详细说明打开我们的vue项目文件夹我们可以清楚的看到文件夹下的三个文件, "dev.env.js","index.js ...
在webpack中使用eslint配置（详细教程）-js教程-PHP中文网
本篇文章主要介绍了webpack引入eslint配置详解,现在分享给大家,也给大家做个参考. webpack中eslint使用首先,要使webpack支持eslint,就要要安装 eslint-lo ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
webpack devserver配置_在webpack中使用babel
本文衔接上篇文章: 不睡觉的怪叔叔:webpack的模块热替换zhuanlan.zhihu.com 一.为什么需要Babel? 由于某些浏览器不支持ES6,所以使用ES6写的JavaScript程序 ...

Webpack中resolve配置

背景：

resolve配置：

Webpack中resolve配置相关推荐

最新文章

热门文章