精华内容
下载资源
问答
  • <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>
  • <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, ...
  • <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] ...
  • This 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 ...
  • .~/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 ...
  • <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 ...
  • webpackresolve

    2019-01-18 14:57:13
    webpack在启动后会从配置的入口模块触发找出所有依赖的模块,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: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

    2018-10-23 11:14:38
    webpack在启动后会从配置的入口模块触发找出所有依赖的模块,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’

    1. 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']
    
    1. extensions

    在导入语句没带文件后缀时,webpack会自动带上后缀去尝试访问文件是否存在。resolve.extensions用于配置在尝试过程中用到的后缀列表,默认是:

    extensions:['.js', '.json']
    

    也就是说当遇到require(’./data’)这样的导入语句时,webpack会先去寻找./data.js文件,如果找不到则去找 ./data.json文件,如果还是找不到则会报错。

    1. modules

    resolve.modules配置webpack去哪些目录下寻找第三方模块。默认是去node_modules目录下寻找。有时你的项目中会有一些模块大量被其他模块依赖和导入,由于其他模块的位置分布不定,针对不同的文件都要去计算被导入模块文件的相对路径,这个路径有时候会很长,例如:import ‘./…/…/components/button’,这时你可以利用modules配置项优化,假如那些大量导入的模块都在 ./src/components 目录下:

    modules:['./src/components', 'node_modules']
    
    1. descriptionFiles

    resolve.descriptionFiles配置描述第三方模块的文件名称,也就是package.json文件。默认如下:

    descriptionFiles: ['package.json']
    
    1. enforceExtension

    resolve.enforceExtension如果配置为true,所有导入语句都必须带文件后缀。

    1. enforceModuleExtension

    enforceModuleExtensionenforceExtension 作用类似,但 enforceModuleExtension 只对 node_modules 下的模块生效。 enforceModuleExtension 通常搭配 enforceExtension 使用,在 enforceExtension:true 时,因为安装的第三方模块中大多数导入语句没带文件后缀, 所以这时通过配置 enforceModuleExtension:false 来兼容第三方模块。

    原文来源:https://segmentfault.com/a/1190000013176083?utm_source=tag-newest

    展开全文
  • <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:12
    const { 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 配置 Webpack 如何寻找模块所对应的文件。 Webpack 内置 JavaScript 模块化语法解析功能,默认会采用模块化标准里约定好的规则去寻找,但你也...
  • webpack(5)--Resolve

    2018-10-23 14:46:00
    webpack在启动后会从配置的入口模块触发找出所有依赖的模块,Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能,默认会采用模块化标准里约定好的规则去寻找,但你可以根据自己的...
  • webpack resolve alias

    2020-11-29 14:14:05
    https://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-...
  • Error: 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:40
    resolvewebpack的配置项中一个比较重要的属性,主要用来配置模块如何解析。 例如在ES2015中调用import 'lodash',resolve能够对webpack查找lodash的方式进行修改 resolve.alias 创建import或者require的别名...
  • Webpack resolve!

    2020-12-30 08:21:13
    s 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:21
    I 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配置入门的一个系列,感觉不错,作为查阅资料备存。 转载一波: 这是有关书籍地址:...webpack在启动后会从配置的入口模块触发找出所有依赖的模块,Resolve配置webpack如何寻找模块对应的文件。...
  • <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 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,506
精华内容 3,002
关键字:

resolvewebpack