精华内容
下载资源
问答
  • 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
    配置webpackresolve属性,实现第三方包的解析

    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 片段之后还未生成绝对路径,则再加上当前工作目录

    展开全文
  • webpackresolve

    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

    实践

    实际使用的第三方模块,比如reactvue都是默认放在项目根目录的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
  • webpackresolve

    2019-01-18 14:57:13
    webpack在启动后会从配置的入口模块触发找出所有依赖的模块,Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能,默认会采用模块化标准里约定好的规则去寻找,但你可以根据自己的...
  • 解析 webpackWebpack 中使用 resolve.modulesDirectories 安装 打开终端 运行npm install 发展 运行npm run dev 打开
  • 小tips:path的join和resolve的使用区别 path.join最近在项目中的应用 function resolve(dir) { return path.join(__dirname, dir) } ------------------ configureWebpack: { resolve: { alias: { '@': resolve...
  • Webpackresolve

    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
  • webpackresolve用法

    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 ...
  • 原因:版本问题 解决方法:加-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' 解决方案: 需要把插件下载到本地
  • Webpackresolve配置

    2021-02-17 14:50:39
    背景: (1)开发中为什么引入模块时,不写具体...(1) 在引入模块时,如果没有写后缀,那么webpack会在该目录下去查找有没有.js或者.jsx文件,再进行引用。 (2) mainFiles中可以配置入口文件,默认是读取一个文件夹下
  • 当配置webpack-dev-server本地服务器时,运行报错: 原因:没有本地局部安装webpack,hot模块只在本地的webpack的目录下查找,找不到就报错,全局安装webpack也不行 解决方法: 局部安装webpack:npm install ...
  • 我们先要从 Webpack 中 resolver 这个概念说起。Webpack 带来的一大理念是:一切皆模块。在项目中我们可以使用 ESM 的方式 import './xxx/x...
  • 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 选项传入的一个配置文件)的...
  • 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' 非常不方便而且容易出错,如果需要...
  • 报错Module not found: Error: Can't resolve... 查到的解决方法通常是说 文件路径大小写写错了等等之类的。 我当初遇到这个问题是因为,使用的是webpack4了,其命令格式变过了,以前的 两个路径名之间是不需要加...
  • <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 '...
  • resolve: 解析模块的规则 resolve.alias resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。例如使用以下配置: resolve: { alias: { $css: resolve(__dirname, 'src/css') } } 这样在js文件...
  • 项目根目录下创建:jsconfig.json { "compilerOptions": { "baseUrl": "./", "paths": { "@hoc/*": ["src/hoc/*"] } }, "exclude": ["node_modules", "dist"] }
  • 有时候我们在项目中会需要频繁引入同一个路径的文件,如果需要引入的次数特别多,我们就得在每一次引入都要写一长串的地址,那么我们有没有什么方法可以偷点懒呢,我们可以通过调整webpack里的配置达到“偷一点小懒...
  • 在命令行安装webpack-dev-server 的时候一直报错,检查了很多地方也没问题,包括终端上的报错信息, (这不是我的报错信息,我的忘了截图,这是在 ...
  • webpack使用第三方库的时候 可以使用 webpack.providePlugin插件 有三种方式 1. 直接在html文件中引入 cdn上的文件 (注意这种方式是引用网络上的 CDN 文件) &lt;script src="...
  • webstorm对webpackresolve进行智能提示

    千次阅读 2017-12-12 10:54:15
    我们会经常用一些本地的库,然后在webpack中利用resolve中的alias给指定库路径起别名,这样在项目中就可以像引用node_modules里的库一样引用它,当然默认webstorm会对引用node_modules里的库有提示作用,而对resolve...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,605
精华内容 17,442
关键字:

resolvewebpack