resolve webpack

Webpack4 配置 Resolve

千次阅读 2019-07-26 14:19:15

Webpack4 配置 Resolve Webpack在启动后会从webpack.config.js 配置文件中的enter属性指定的入口模块出发找出所有依赖的模块，Resolve 的作用就是：配置 Webpack 如何寻找模块所对应的文件。resolve 属性的值是一个...

Webpack4 配置 Resolve 
Webpack在启动后会从webpack.config.js 配置文件中的enter属性指定的入口模块出发找出所有依赖的模块，Resolve 的作用就是：配置 Webpack 如何寻找模块所对应的文件。resolve 属性的值是一个对象。该对象常用的属性有： modules、extensions、alias、...， 其中modules是配置寻找模块的根目录；extensions是配置搜索模块的后缀名（搜索模块时按照从左往右的顺序搜索对应的后缀名模块）；alias 是给模块对应路劲单独起一个别名。 
简单的使用案例： 
webpack.config.js 
const path = require('path');
module.exports = {
  entry: {
    app: ['./src/main.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'), 
  },
  module: {
    rules: [
      {
          ...
      }
    ]
  },
  plugins: [
    .....
  ],
      
  // 1.配置 webpack 寻找模块的规则
  resolve: { 
    modules: [ // 寻找模块的根目录，array 类型，默认以 node_modules 为根目录
      'node_modules',
      path.resolve(__dirname, 'app')
    ],
    extensions: ['.js', '.json', '.jsx', '.css'], // 模块的后缀名
    alias: { // 模块别名配置，用于映射模块
       // 把 'module' 映射 'new-module'，同样的 'module/path/file' 也会被映射成 'new-module/path/file'
      'module': 'new-module',
      // 使用结尾符号 $ 后，把 'only-module' 映射成 'new-module'，
      // 但是不像上面的，'module/path/file' 不会被映射成 'new-module/path/file'
      'only-module$': 'new-module', 
    }
  },    
};
 
1.配置-modules 
resolve.modules 配置 Webpack 去哪些目录下寻找第三方模块，默认是只会去 node_modules 目录下寻找。 有时你的项目里会有一些模块会大量被其它模块依赖和导入，由于其它模块的位置分布不定，针对不同的文件都要去计算被导入模块文件的相对路径， 这个路径有时候会很长，就像这样 import '../../../components/button' 这时你可以利用 modules 配置项优化，假如那些被大量导入的模块都在 ./src/components 目录下，把 modules 配置成 
resolve: {
  modules:['./src/components','node_modules']
}
 
新建一个项目 
|-- src
|   |-- components
|   |   `-- Button.js
|   |-- index.html
|   `-- main.js
`-- webpack.config.js
 
webpack.config.js 
const path = require('path');

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
  },
  // 1.配置模块的查找规则
  resolve: {
    // 2.导入 require('Button')，会先在components下查找，然后再到node_modules下查找
    // 相对路径是相对于webpack.config.js文件所在的路劲  
    modules:['./src/components','node_modules']
  },

};

 
Button.js 
const Button = {
  render:()=>{
    console.log('我是一个 button 组件')
  }
}
export default Button
 
main.js 
// 1.引入components文件夹中的Button组件
let Button=require('Button')  // 改button会先到components下查找，然再到node_modules文件夹下查找导入
// Button.default ：是拿到Button的对象
console.log(Button.default)
console.log(Button.default.render())
 
index.html 
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/main.js"></script>
</body>
</html>
 
在项目的根目录执行webpack --mode development , 打开index.html查看打包后的main.js文件如下 
// 1.引入components文件夹中的Button组件
let Button=__webpack_require__(/*! Button */ "./src/components/Button.js")  // 改button会先到components下查找，然再到node_modules文件夹下查找导入
// Button.default ：是拿到Button的对象
console.log(Button.default)
console.log(Button.default.render())
 
从这个打包后的结果可以得出结论： 
当在webpack.config.js中配置了resolve.modules:['./src/components','node_modules'], 那么当你通过 let Button=require('Button')' 导入时，会先到components下查找，再到node_modules文件夹下查找，在components找到后会把路径替换成了 let Button=require('./src/components/Button.js')' 
2.配置-extensions 
上面在执行let Button=require('Button')的时候，为什么不用写文件的扩展名也可以导入？为什么不是let Button=require('Button.js')这样导入？其实这两种写法都可以。 
因为在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。 resolve.extensions就是专门用于配置在尝试过程中用到的后缀列表，它的默认值如下： 
resolve: {
  extensions: ['.js', '.json']
}

 
也就是说当遇到 require('Button') 这样的导入语句时，Webpack 会先去寻找 Button.js 文件，如果该文件不存在就去寻找 Button.json 文件， 如果还是找不到就报错。 
假如你想让 Webpack 优先使用目录下的 TypeScript 文件，可以这样配置： 
resolve: {
 extensions: ['.ts', '.js', '.json']
}

 
webpack.config.js 
const path = require('path');

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
  },
  // 1.配置模块的查找规则
  resolve: {
    modules:['./src/components','node_modules'],
    // 3.导入语句没带文件后缀时,Webpack会自动带上后缀后去尝试访问文件是否存在,专门用于配置在尝试过程中用到的后缀列表
    extensions: ['.js', '.json']
  },

};


 
3.配置-alias 
resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。例如使用以下配置： 
// Webpack alias 配置
resolve:{
  alias:{
    utils: './src/utils/'
  }
}

 
当你通过 let Http = require('utils/Http') 导入时，实际上被 alias 等价替换成了 let Http = require('./src/utils/Http')。 
以上 alias 配置的含义是把导入语句里的 utils关键字替换成./src/utils/`。 
项目的目录结构 
|-- src
|   |-- components
|   |   `-- Button.js
|   |-- utils
|   |   `-- Http.js
|   |-- index.html
|   `-- main.js
`-- webpack.config.js

 
webpack.config.js 
const path = require('path');

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
  },
  // 1.配置模块的查找规则
  resolve: {
    // 2.导入 require('Button')，会先在components下查找，然后再到node_modules下查找
    modules:['./src/components','node_modules'],
    // 3.导入语句没带文件后缀时,Webpack会自动带上后缀后去尝试访问文件是否存在,专门用于配置在尝试过程中用到的后缀列表
    extensions: ['.js', '.json'],
    // 4.给指定的路径起一个别名,下面给 ./src/utils 路径起一个 别名叫 utils
    alias:{
      utils: './src/utils'  // key是别名，value是路径：'./src/utils/' 或者 './src/utils' 写法都可以
    }

  },

};


 
Http.js 
const Http = {
  get:()=>{
    console.log('发送get请求')
  }
}

export default Http

 
main.js 
// 1.引入components文件夹中的Button组件
let Button=require('Button')
console.log(Button.default)
Button.default.render()

//2.导入 http 工具类（没有配置alias的用法）
// let Http = require('./src/utils/Http')

//2.导入 http 工具类（配置alias的用法，utils === ./src/utils ）
// let Http = require('utils/Http')
Http.default.get()

 
结论： 
当在webpack.config.js中配置了resolve.alias 配置项，就可以通过别名来把原导入路径映射成一个新的导入路径。例如： let Http = require('utils/Http') 导入时，实际上被 alias 等价替换成了 let Http = require('./src/utils/Http') 
源码下载

收起

展开全文

构建工具

webpack配置resolve属性

2020-02-28 20:36:04

配置webpack的resolve属性，实现第三方包的解析

resolve属性配置 
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 以前的用法
// let CleanWebpackPlugin = require('clean-webpack-plugin');
let CopyWebpackPlugin = require('copy-webpack-plugin');
let webpack = require('webpack');

module.exports = {
    // 多入口
    mode: 'development',
    entry: {
        home: './src/index.js',
    },
    resolve: {  // 解析第三方包 common
        modules: [path.resolve('node_modules')], // 只在node_module目录下进行解析
        extensions: ['.js', '.css', '.json']    // 默认按照文件名后缀进行查找
        // mainFiles: []   // 入口文件的名字
        // mainFields: [   // 主入口的字段
        //     'style',
        //     'main',
        // ],
        // alias: {  // 别名
        //     bootstrap: 'bootstrap/dist/css/bootstrap.css'
        // }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    devtool: 'cheap-module-eval-source-map',
    output: {
        // 这里的 name代表 home， other
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html",
            filename: "index.html",
            chunks: [
                "home",
            ],
        }),
    ]
};

收起

展开全文

webpack path.resolve

2020-03-16 11:46:34

欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日... var path = require("path") //引入node的path模块 path.resolve('/foo/a', './b') // returns '/foo/a/b' path.resolve('/foo/a', 'b') // returns '/fo...

 
 欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ 
 
var path = require("path")     //引入node的path模块

path.resolve('/foo/a', './b')   // returns '/foo/a/b'
path.resolve('/foo/a', 'b')   // returns '/foo/a/b'
path.resolve('/foo/a', '/b')   // returns '/b'
path.resolve('/foo/a', '../b')   // returns '/foo/b'
path.resolve('home','/foo/a', '../b')   // returns '/foo/b'
path.resolve('home','./foo/a', '../b')   // returns '/home/foo/b'
path.resolve('home','foo/a', '../b')   // returns '/home/foo/b'
 
字符以 / 开头: 不会拼接到前面的路径(因为拼接到此已经是一个绝对路径)；
 以 …/ 开头: 拼接前面的路径，且不含最后一节路径；
 以 ./ 开头: 或者没有符号 则拼接前面路径 。 
如果在处理完所有给定的 path 片段之后还未生成绝对路径，则再加上当前工作目录

收起

展开全文

javascript node.js

webpack之resolve

2020-07-03 21:50:41

webpack从entry开始递归解析所有依赖的模块，而怎么找到这些模块对应的文件，怎么更准确更快地找到这些模块所在文件，这就是resolve擅长的了。我们来了解下。 resolve.modules 默认值是["node_modules"]，意思是，...

webpack从entry开始递归解析所有依赖的模块，而怎么找到这些模块对应的文件，怎么更准确更快地找到这些模块所在文件，这就是resolve擅长的了。我们来了解下。 
resolve.modules 
默认值是["node_modules"]， 意思是，webpack默认先去 当前目录的node_modules里找模块，要是没找着，就往上一级目录的node_modules找，还没找着，就继续往上，直到找到为止。
 要是到头了还是没找着，那说明根本没这模块。 
举例 
webpack找模块的机制和Node找模块一样，毕竟webpack是基于nodejs写的嘛。
 所以，我们来看Node是怎样解析模块的。
 比如，我们可能会这样启动webpack调试，node --inspect-brk node_modules\webpack\bin\webpack.js
 webpack.js里需要require.resolve('webpack-cli')，即解析webpack-cli这个模块的绝对路径。
 解析过程是这样的： 
项目根目录\node_modules\webpack\bin\node_modules里找，没找到，往上
项目根目录\node_modules\webpack\node_modules"里找，没找到，继续往上
项目根目录\node_modules里找，找到了和webpack-cli有关的目录：项目根目录\node_modules\webpack-cli 
接下来就是要从项目根目录\node_modules\webpack-cli这个目录找到webpack-cli模块的入口文件。
 怎么找？
 Node解析模块时会根据文件扩展名[".js", ".json",".node", ".mjs"]去一 一查找。 
 项目根目录\node_modules有没有webpack-cli.js，没有
 
 项目根目录\node_modules有没有webpack-cli.json，没有
 
 项目根目录\node_modules有没有webpack-cli.node，没有
 
 项目根目录\node_modules有没有webpack-cli.mjs，没有
  
怎么办？ 
项目根目录\node_modules\webpack-cli里有没有package.json，有！
读取package.json内容，获取main属性值：./bin/cli.js 
所以模块webpack-cli的入口文件所在绝对路径，即require.resolve('webpack-cli')的结果 就是项目根目录\node_modules\webpack-cli\bin\cli.js。 
实践 
实际使用的第三方模块，比如react，vue都是默认放在项目根目录的node_modules里，所以可以指明路径，减少查找。 
const path = require('path');
module.exports = {
    resolve:{
        modules:[path.resolve(__dirname,'node_modules')]
    }
}
 
另外，如果我们自己开发的模块有经常被引用，也可以放到resolve.modules里。 
resolve.extensions 
默认值是[".wasm",".mjs",".js",".json"]。
 如果导入的模块没有扩展名，webpack会根据resolve.extensions指定的扩展名一 一查找，谁在前就先查找谁，就像刚刚Node解析webpack-cli模块那样。
 显然，如果我们导入模块时就带上文件扩展名，webpack就不用费劲巴拉地找了，
 如果我们提供的扩展名们准确，即使要找，webpack也能更快地找到 。
 所以， 
import utils from './utils';import data from './data;' 不如 import utils from './utils.js';import data from './data.json'
[".wasm",".mjs",".js",".json"] 比不上 [".js",".json"] 
resolve.alias 
给文件路径取个别名，这样每次导入模块时就不用写一长串了。 
const path = require('path');
module.exports = {
    resolve:{
        alias:{
            'button':path.resolve(__dirname,'src/components/button.js')
            //'button$':path.resolve(__dirname,'src/components/button.js')
        }
    }
}
 
所以不论哪个文件需要用到Button，直接 import Button from 'button'就好。
 'button$':path.resolve(__dirname,'src/components/button.js')用于精准匹配，button$命中以button结尾的文件。
 再比如，vue$命中vue.runtime.ems.js或者vue.esm.js 等以vue为结尾的文件。 
resolve.mainFiles 
默认值是["index"]，意思是解析目录时，入口文件名是index。 
参考文档 
解析(Resolve)

收起

展开全文

webpack resolve 解析
千次阅读 2016-11-14 15:25:18
webpack resolve 解析var path = require('path'); module.exports = { ... resolve:{ alias:{ "jquery":__dirname+"/assets/static/js/jquery-3.0.0.min.js", "iscroll_zoom":__dirna
收起
webpack 之 resolve
2019-01-18 14:57:13
webpack在启动后会从配置的入口模块触发找出所有依赖的模块，Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你可以根据自己的...
收起
resolve-webpack:在 Webpack 中使用 resolve.modulesDirectories-源码
2021-06-07 23:26:48
解析 webpack 在 Webpack 中使用 resolve.modulesDirectories 安装打开终端运行npm install 发展运行npm run dev 打开
收起
JavaScript
webpack的path.resolve和path.join的区别
2020-05-12 15:47:19
小tips：path的join和resolve的使用区别 path.join最近在项目中的应用 function resolve(dir) { return path.join(__dirname, dir) } ------------------ configureWebpack: { resolve: { alias: { '@': resolve...
收起
Webpack之resolve
2019-09-09 09:52:27
文章目录resolve.extensions注意resolve.mainFilesresolve.alias resolve.extensions 我们在引入外部模块的时候，通常会有这种写法：import test from './test/test 这种写法就是想从./test目录下去引入test.js。 ...
收起
webpack resolve extensions 配置
万次阅读 2016-11-02 20:26:00
配置默认扩展名 1.需要有一个默认空字符串“”，否则在require 全名的时候反而会找不到 2.默认值是[“”, “.webpack.js”, “.web.js”, “.js”]参考文档：https://webpack.github.io/docs/configuration.html
收起
webpack中resolve用法
2019-01-27 11:09:00
如果想直接引入样式的话，可以在webpack的配置文件配置 resolve: { // mainFields: ['style', 'main'] // 改变入口的文件字段 alias: { 'bootstrap': 'bootstrap/dist/css/bootstrap.css' } } ...
收起
webpack系列之三resolve
千次阅读 2019-02-20 02:34:47
作者：崔静 ...现在 ES6 的 Module 则是大家最常用的模块化方案，所以你一定写过 import './xxx' 或者 import 'something-in-nodemodules' 再或者 import '@/xxx'(@ 符号通过 webpack 配置中 alias ...
收起
webpack打包命令-Module not found: Error: Can‘t resolve
2021-07-14 14:08:15
原因：版本问题解决方法:加-o webpack ./src/main.js -o ./dist/bundle.js
收起
Can't resolve 'webpack/hot'
2019-02-20 14:20:27
报错： Can't resolve 'webpack/hot' 解决方案：需要把插件下载到本地
收起
Webpack中resolve配置
2021-02-17 14:50:39
背景：（1）开发中为什么引入模块时，不写具体...(1) 在引入模块时，如果没有写后缀，那么webpack会在该目录下去查找有没有.js或者.jsx文件，再进行引用。 (2) mainFiles中可以配置入口文件，默认是读取一个文件夹下
收起
extensions
webpack使用-报错："Module not found: Error: Can't resolve 'webpack/hot'
千次阅读 2019-08-11 21:17:48
当配置webpack-dev-server本地服务器时，运行报错：原因：没有本地局部安装webpack，hot模块只在本地的webpack的目录下查找，找不到就报错，全局安装webpack也不行解决方法：局部安装webpack：npm install ...
收起
Webpack 中 resolve 路径解析
2021-01-27 18:13:38
我们先要从 Webpack 中 resolver 这个概念说起。Webpack 带来的一大理念是：一切皆模块。在项目中我们可以使用 ESM 的方式 import './xxx/x...
收起
java python vue linux spring
webpack
千次阅读 多人点赞 2019-10-17 21:30:04
webpack的使用2.1 webpack的安装2.2 webpack的使用2.2.1 项目搭建思路2.2.2 webpack的作用2.3 webpack的配置文件webpack.config.js2.4 自定义配置文件2.5 执行webpack之后发生了什么2.6 配置多个入口...
收起
webpack入门（三）——webpack 配置
万次阅读 多人点赞 2016-05-28 23:52:00
喂一个配置对象给webpack ，它就可以干活儿了。根据你用webpack的用法，有两种途径传入这个对象：CLI( 命令行)如果你用命令行，命令行会读取一个叫webpack.config.js（或者用 –config 选项传入的一个配置文件）的...
收起
entry
webpack resolve的作用
千次阅读 2016-09-17 11:51:15
resolve: { //查找module的话从这里开始查找 root: 'E:/github/flux-example/src', //绝对路径 //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名 extensions: ['', '.js', '.json', '.scss'], //...
收起
webpack(5)--Resolve
2018-10-23 14:46:00
webpack在启动后会从配置的入口模块触发找出所有依赖的模块，Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你可以根据自己的...
收起
webpack resolve
2020-07-15 12:42:03
resolve是配置路径的规则，可以配置引入资源的默认路径 alias 配置解析路径别名原本要这样引入css文件和js文件的 import './src/js/index.js' import './src/css/index.csss' 非常不方便而且容易出错，如果需要...
收起
webpack4 报错 Module not found: Error: Can't resolve
千次阅读 2019-10-03 22:12:36
报错Module not found: Error: Can't resolve... 查到的解决方法通常是说文件路径大小写写错了等等之类的。我当初遇到这个问题是因为，使用的是webpack4了，其命令格式变过了，以前的两个路径名之间是不需要加...
收起
Can't resolve 'fs' with WebPack
2021-01-12 10:54:23
<div><p>When I try to load <code>ejs</code> within a WebPack project with <code>import ejs from 'ejs'</code> I get: <pre><code> Module not found: Error: Can't resolve 'fs' in '...
收起
webpack配置详解【四】 -- resolve详解
2020-07-28 15:34:38
resolve: 解析模块的规则 resolve.alias resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。例如使用以下配置： resolve: { alias: { $css: resolve(__dirname, 'src/css') } } 这样在js文件...
收起
VSCode 对 Webpack 配置 resolve alias 的路径智能提示
2020-02-29 14:18:54
项目根目录下创建：jsconfig.json { "compilerOptions": { "baseUrl": "./", "paths": { "@hoc/*": ["src/hoc/*"] } }, "exclude": ["node_modules", "dist"] }
收起
javascript
webpack配置别名和全局变量（resolve.alias&& ProvidePlugin）
万次阅读 2018-09-27 15:40:11
有时候我们在项目中会需要频繁引入同一个路径的文件，如果需要引入的次数特别多，我们就得在每一次引入都要写一长串的地址，那么我们有没有什么方法可以偷点懒呢，我们可以通过调整webpack里的配置达到“偷一点小懒...
收起
alias
下载安装webpack插件报错Unable to resolve dependency tree
万次阅读 2020-12-02 14:26:50
在命令行安装webpack-dev-server 的时候一直报错，检查了很多地方也没问题，包括终端上的报错信息，（这不是我的报错信息，我的忘了截图，这是在 ...
收起
nodejs npm
webpack 加载第三方js库（这里以jquery为例）
千次阅读 2019-01-11 14:04:08
当webpack使用第三方库的时候可以使用 webpack.providePlugin插件有三种方式 1. 直接在html文件中引入 cdn上的文件（注意这种方式是引用网络上的 CDN 文件） <script src="...
收起
webstorm对webpack中resolve进行智能提示
千次阅读 2017-12-12 10:54:15
我们会经常用一些本地的库，然后在webpack中利用resolve中的alias给指定库路径起别名，这样在项目中就可以像引用node_modules里的库一样引用它，当然默认webstorm会对引用node_modules里的库有提示作用，而对resolve...
收起
webstorm 智能提示

Webpack4 配置 Resolve

Webpack4 配置 Resolve

1.配置-modules

2.配置-extensions

3.配置-alias

webpack配置resolve属性

resolve属性配置

webpack path.resolve

webpack之resolve

resolve.modules

举例

实践

resolve.extensions

resolve.alias

resolve.mainFiles

参考文档

webpack resolve 解析

webpack 之 resolve

resolve-webpack:在 Webpack 中使用 resolve.modulesDirectories-源码

webpack的path.resolve和path.join的区别

Webpack之resolve

webpack resolve extensions 配置

webpack中resolve用法

webpack系列之三resolve

webpack打包命令-Module not found: Error: Can‘t resolve

Can't resolve 'webpack/hot'

Webpack中resolve配置

webpack使用-报错："Module not found: Error: Can't resolve 'webpack/hot'

Webpack 中 resolve 路径解析

webpack

webpack入门（三）——webpack 配置

webpack resolve的作用

webpack(5)--Resolve

webpack resolve

webpack4 报错 Module not found: Error: Can't resolve

Can't resolve 'fs' with WebPack

webpack配置详解【四】 -- resolve详解

VSCode 对 Webpack 配置 resolve alias 的路径智能提示

webpack配置别名和全局变量（resolve.alias&& ProvidePlugin）

下载安装webpack插件报错Unable to resolve dependency tree

webpack 加载第三方js库（这里以jquery为例）

webstorm对webpack中resolve进行智能提示

resolvewebpack