-
fix: Resolve webpack dependencies
2020-12-02 16:03:30<p><strong>What kind of change does this PR introduce?</strong></p> <p>tries to merge master on top of #229 Test cases seems to work fine. There is an extra line in the...webpack/webpack-cli</p></div> -
resolve webpack-hot-middleware conflicts
2020-11-28 09:46:22<div><p>When I use webpack-hot-middleware with a custom <code>path</code>: <p><em>server.js</em></p> <pre><code>js ... app.use( require('webpack-hot-middleware')(compiler, { log: false, ... -
Unable to resolve webpack@fulls1z3/webpack#v2.2.1-harmony
2020-12-09 09:29:42<div><p>It seems that repository: https://github.com/fulls1z3/webpack was deleted and now trying to install azure-functions-pack from npm always fails. <pre><code> yarn add azure-functions-pack [1/4] ... -
fix(core): resolve webpack loaders with `require.resolve()`
2021-01-12 18:50:39This means that a webpack config defined within a package like '/cypress' cannot resolve loaders like 'ts-loader', unless 'ts-loader' is declared in the workspace's own ... -
Cannot resolve webpack/buildin/harmony-module.js
2020-12-08 23:03:50.~/Projects/jss/node_modules/webpack/buildin/harmony-module.js' in '/' at compiler.run (~/Projects/jss/node_modules/rollup-plugin-size-snapshot/dist/treeshakeWithWebpack.js:58:16) at ... -
fix(preset-scss): require.resolve webpack loaders
2020-12-01 23:50:29<p><code>/preset-scss</code> is passing webpack loaders as strings instead of their absolute location causing it to rely on hoisting to place them next to <code>/core</code> which is not guaranteed ... -
webpack 之 resolve
2019-01-18 14:57:13webpack在启动后会从配置的入口模块触发找出所有依赖的模块,Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能,默认会采用模块化标准里约定好的规则去寻找,但你可以根据自己的...Resolve
webpack在启动后会从配置的入口模块触发找出所有依赖的模块,Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能,默认会采用模块化标准里约定好的规则去寻找,但你可以根据自己的需要修改默认的规则。
1. alias
resolve.alias配置项通过别名来把原来导入路径映射成一个新的导入路径。如下:
//webpack alias配置 resolve: { alias: { componets: './src/components/' } }
当你通过import Button from 'components/button'导入时,实际上被alias等价替换成import Button from './src/components/button'。
以上alias配置的含义是把导入语句里的components关键字替换成./src/components。
这
样做可能会命中太多的导入语句, alias还支持$符号来缩小范围只命中以关键字结尾的导入语句:
resolve: { alias: { 'react$' : '/path/to/react.min.js' } }
这样react$只会命中以react结尾的导入语句,即只会把import react关键字替换成import '/path/to/react.min.js'
2. mainFields
有一些第三方模块会针对不同环境提供几份代码。例如分别提供采用ES5 和 ES6的2份代码,这2份代码的位置写在package.json文件里:
{ "jsnext: main": "es/index.js", //采用ES6语法的代码入口文件 "main": "lib/index.js"//采用ES5语法的代码入口文件 }
webpack会根据mainFields的配置去决定有限采用哪份代码, mainFields默认如下:
mainFields: ['browser', 'main']
webpack会按照数组里的顺序去package.json文件里面找,只会使用找到的第一个。
假如我们想要ES6的那份代码,可以这样进行配置:
mainFields: ['jsnext:main', 'browser', 'main']
3. extensions
在导入语句没带文件后缀时,webpack会自动带上后缀去尝试访问文件是否存在。resolve.extensions用于配置在尝试过程中用到的后缀列表,默认是:
extensions:['.js', '.json']
也就是说当遇到require('./data')这样的导入语句时,webpack会先去寻找./data.js文件,如果找不到则去找./data.json文件,如果还是找不到则会报错。
4. modules
resolve.modules配置webpack去哪些目录下寻找第三方模块。默认是去node_modules目录下寻找。有时你的项目中会有一些模块大量被其他模块依赖和导入,由于其他模块的位置分布不定,针对不同的文件都要去计算被导入模块文件的相对路径,这个路径有时候会很长,例如:import './../../components/button',这时你可以利用modules配置项优化,假如那些大量导入的模块都在./src/components目录下:
modules:['./src/components', 'node_modules']
5. descriptionFiles
resolve.descriptionFiles配置描述第三方模块的文件名称,也就是package.json文件。默认如下:
descriptionFiles: ['package.json']
6. enforceExtension
resolve.enforceExtension如果配置为true,所有导入语句都必须带文件后缀。
7. enforceModuleExtension
enforceModuleExtension 和 enforceExtension 作用类似,但 enforceModuleExtension 只对 node_modules 下的模块生效。 enforceModuleExtension 通常搭配 enforceExtension 使用,在 enforceExtension:true 时,因为安装的第三方模块中大多数导入语句没带文件后缀, 所以这时通过配置 enforceModuleExtension:false 来兼容第三方模块。
转自:
https://segmentfault.com/a/1190000013176083?utm_source=tag-newest
-
Webpack4 配置 Resolve
2019-07-26 14:19:15Webpack4 配置 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
2018-10-23 11:14:38webpack在启动后会从配置的入口模块触发找出所有依赖的模块,Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能,默认会采用模块化标准里约定好的规则去寻找,但你可以根据自己的...Resolve
webpack在启动后会从配置的入口模块触发找出所有依赖的模块,Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能,默认会采用模块化标准里约定好的规则去寻找,但你可以根据自己的需要修改默认的规则。- alias
resolve.alias配置项通过别名来把原来导入路径映射成一个新的导入路径。如下:
//webpack alias配置 resolve: { alias: { componets: './src/components/' } }
当你通过 import Button from ‘components/button’ 导入时,实际上被alias等价替换成import Button from ‘./src/components/button’。
以上alias配置的含义是把导入语句里的components关键字替换成./src/components。
这
样做可能会命中太多的导入语句, alias还支持$符号来缩小范围只命中以关键字结尾的导入语句:
resolve: { alias: { 'react$' : '/path/to/react.min.js' } }
这样react$ 只会命中以react结尾的导入语句,即只会把import react关键字替换成import '/path/to/react.min.js’
- mainFields
有一些第三方模块会针对不同环境提供几份代码。例如分别提供采用ES5 和 ES6的2份代码,这2份代码的位置写在package.json文件里:
{ "jsnext: main": "es/index.js", //采用ES6语法的代码入口文件 "main": "lib/index.js"//采用ES5语法的代码入口文件 }
webpack会根据mainFields的配置去决定有限采用哪份代码, mainFields默认如下:
mainFields: ['browser', 'main']
webpack会按照数组里的顺序去package.json文件里面找,只会使用找到的第一个。
假如我们想要ES6的那份代码,可以这样进行配置:
mainFields: ['jsnext:main', 'browser', 'main']
- extensions
在导入语句没带文件后缀时,webpack会自动带上后缀去尝试访问文件是否存在。resolve.extensions用于配置在尝试过程中用到的后缀列表,默认是:
extensions:['.js', '.json']
也就是说当遇到require(’./data’)这样的导入语句时,webpack会先去寻找./data.js文件,如果找不到则去找 ./data.json文件,如果还是找不到则会报错。
- modules
resolve.modules配置webpack去哪些目录下寻找第三方模块。默认是去node_modules目录下寻找。有时你的项目中会有一些模块大量被其他模块依赖和导入,由于其他模块的位置分布不定,针对不同的文件都要去计算被导入模块文件的相对路径,这个路径有时候会很长,例如:import ‘./…/…/components/button’,这时你可以利用modules配置项优化,假如那些大量导入的模块都在 ./src/components 目录下:
modules:['./src/components', 'node_modules']
- descriptionFiles
resolve.descriptionFiles配置描述第三方模块的文件名称,也就是package.json文件。默认如下:
descriptionFiles: ['package.json']
- enforceExtension
resolve.enforceExtension如果配置为true,所有导入语句都必须带文件后缀。
- enforceModuleExtension
enforceModuleExtension 和 enforceExtension 作用类似,但 enforceModuleExtension 只对 node_modules 下的模块生效。 enforceModuleExtension 通常搭配 enforceExtension 使用,在 enforceExtension:true 时,因为安装的第三方模块中大多数导入语句没带文件后缀, 所以这时通过配置 enforceModuleExtension:false 来兼容第三方模块。
原文来源:https://segmentfault.com/a/1190000013176083?utm_source=tag-newest
-
Switch to enhanced-resolve for webpack options
2021-01-01 13:12:39<div><p>This uses the configuration in the resolve key of the webpack config to resolve file paths, enabling the use of the webpack 2 ...option. <p>Closes #4 </p><p>该提问来源于开源项目:... -
webpack resolve
2020-07-10 19:58:12const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { // [name] 默认是 main, 可以写固定值 // ...webpack.config.js
const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { // [name] 默认是 main, 可以写固定值 // 文件名称(制定名称+目录) filename: 'js/[name].js', // 输出文件目录(将来所有资源输出的公共目录) path: resolve(__dirname, 'build'), }, module: { rules: [ // loader的配置 { test: /\.css$/, // 多个loader 用 use use: ['style-loader', 'css-loader'] }, ] }, // 插件 plugins: [ new HtmlWebpackPlugin() ], // 模式 development 开发, production 生产 mode: 'development', // 解析模块的规则 resolve: { // 配置解析模块路径别名: 优点: 简写路径,缺点: 路径没有提示。 alias: { $css: resolve(__filename, '../src/css') }, // 配置省略文件路径的后缀名,优先查找第一个。 extensions: ['.js', '.json', '.css', 'jsx'], // 告诉webpack 解析模块 去哪个目录找。 modules: [resolve(__dirname, '../../node_modules'), 'node_modules'] } };
index.js
import '$css/index';
index.css
html, body { height: 100%; background-color: pink; }
-
Can't resolve 'webpack/hot'
2019-02-20 14:20:27报错: Can't resolve 'webpack/hot' 解决方案: 需要把插件下载到本地 -
webpack学习笔记--配置resolve
2018-05-17 10:36:00Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块,Resolve 配置 Webpack 如何寻找模块所对应的文件。 Webpack 内置 JavaScript 模块化语法解析功能,默认会采用模块化标准里约定好的规则去寻找,但你也... -
webpack(5)--Resolve
2018-10-23 14:46:00webpack在启动后会从配置的入口模块触发找出所有依赖的模块,Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能,默认会采用模块化标准里约定好的规则去寻找,但你可以根据自己的... -
webpack resolve alias
2020-11-29 14:14:05https://webpack.js.org/configuration/resolve/</p> <p>To use the following plugin https://github.com/RobinHerbots/Inputmask#selecting-the-dependencylib</p> <p>How can i do this?</p><p>该提问来源于开源... -
Webpack resolve support
2020-11-27 23:45:09<p>I have <code>resolve.alias</code> field in my webpack. It should install react-lite instead of react + react-dom. Is this gonna be supported? xP</p><p>该提问来源于开源项目:webpack-... -
Cannot resolve .webpack.res.1462025829429_520036.js
2020-12-29 16:54:54Error: client/front/Sidebar/Sidebar.js: Command failed: node node_modules/webpack/bin/webpack.js client/front/Sidebar/sidebar.css public/test/.webpack.res.1462025829429_520036.js --config webpack.... -
webpack04 resolve
2018-07-09 09:59:40resolve是webpack的配置项中一个比较重要的属性,主要用来配置模块如何解析。 例如在ES2015中调用import 'lodash',resolve能够对webpack查找lodash的方式进行修改 resolve.alias 创建import或者require的别名... -
Webpack resolve!
2020-12-30 08:21:13s behaviour is given priority with webpack resolution as a fallback, but with all the configuration webpack gives! (This is great for different module directories like bower_components or web_modules ... -
Webpack resolve image
2020-12-27 21:05:21I am working with Nuxt.js which uses Webpack to resolve images. <p>Does not work <code><avatar src="@/assets/img/profiles/test.png"></code></p> <p>works <code><avatar src... -
resolve configs for webpack2
2021-01-07 17:22:10<code>modulesDirectories</code> now <a href="https://github.com/webpack/webpack.js.org/blob/develop/content/how-to/upgrade-from-webpack-1.md#resolveroot-resolvefallback-resolvemodulesdirectories">... -
深入浅出webpack学习(5)--Resolve
2019-05-11 02:12:22今天看到webpack配置入门的一个系列,感觉不错,作为查阅资料备存。 转载一波: 这是有关书籍地址:...webpack在启动后会从配置的入口模块触发找出所有依赖的模块,Resolve配置webpack如何寻找模块对应的文件。... -
Read resolve settings from webpack config
2020-12-26 07:48:46<div><p>We have some directories other than <code>node_modules</code> in <code>resolve.modules</code> in our webpack config, including JS and non-JS assets. While non-JS assets can be handled by ...