精华内容
下载资源
问答
  • This also imports the commit history from webpack-chain to neutrino-dev. Importing this also means we will probably start tracking with Neutrino's common versioning.</p><p>该提问来源于开源项目&#...
  • m tring to import in ES6 Webpack project. I installed with npm (npm install jsSHA) and then I imported with "import jsSHA". When i try to use new jsSHA() object the jsSHA is undefined. Can ...
  • Can't import in webpack

    2020-12-09 14:51:21
    m bundling my project with webpack and had to add: <pre><code> js module.exports = Fabrique; </code></pre> <p>at the end of the <strong>build/phaser-input.js</strong> in order to be able to ...
  • webpack根据ES2015 loader 规范实现了用于动态加载的import()方法。 这个功能可以实现按需加载我们的代码,并且使用了promise式的回调,获取加载的包。 在代码中所有被import()的模块,都将打成一个单独的包,放在...
  • importwebpack 编译成了啥? 我们知道,webpack 打包过程如下: 合并webpack.config.js和命令行传递的参数,形成最终的配置 解析配置,得到entry入口 读取入口文件内容,通过@babel/parse将入口内容(code)转换...

    import 被webpack 编译成了啥?

    我们知道,webpack 打包过程如下:

    • 合并webpack.config.js和命令行传递的参数,形成最终的配置
    • 解析配置,得到entry入口
    • 读取入口文件内容,通过@babel/parse将入口内容(code)转换成ast
    • 通过@babel/traverse遍历ast得到模块的各个依赖
    • 通过@babel/core(实际的转换工作是由@babel/preset-env来完成的)将ast转换成es5 code
    • 通过循环伪递归的方式拿到所有模块的所有依赖并都转换成es5

    那么,问题来了。

    问题:import moduleName from 'xxModule’和import(‘xxModule’)经过webpack编译打包后最终变成了什么?在浏览器中是怎么运行的?

    答案:

    • import经过webpack打包以后变成一些Map对象,key为模块路径,value为模块的可执行函数;
    • 当然其中的异步方法(import(‘xxModule’))比较特殊一些,它会单独打成一个包,采用动态加载的方式。
      具体过程:当用户触发其加载的动作时,会动态的在head标签中创建一个script标签,然后发送一个http请求,加载模块,模块加载完成以后自动执行其中的代码,主要的工作有两个,更改缓存中模块的状态,另一个就是执行模块代码。(webpack4)

    没看懂?继续往下看解析

    分析:

    1. 初始化项目
      在这里插入图片描述
      执行命令

      npm init -y
      npm i webpack webpack-cli -D
      

      webpack.config.js文件:

      const path = require('path')
      
      module.exports = {
        entry: './src/index.js',
        // 为了利于分析打包后的代码,这里选择开发模式
        mode: 'development',
        output: {
          path: path.resolve(__dirname, './dist'),
          filename: 'main.js'
        }
      }
      

      src/index.js 文件:

      /**
       * 入口文件,引入 print 方法,并执行
       * 定义了一个 button 方法,为页面添加一个按钮,并为按钮设置了一个 onclick 事件,负责动态引入一个文件
       */
      import { print } from './num.js'
      
      print()
      
      function button () {
        const button = document.createElement('button')
        const text = document.createTextNode('click me')
        button.appendChild(text)
        button.onclick = e => import('./info.js').then(res => {
          console.log(res.log)
        })
        return button
      }
      
      document.body.appendChild(button())
      

      src/num.js 文件:

      export function print () {
        console.log('我是 num.js 的 print 方法')
      }
      

      src/num.js 文件:

      export const log = "log info"
      

    打包

    执行命令

    npx webpack
    

    在这里插入图片描述

    会看到多了一个 dist 目录,且看输出结果,main.js是我们在webpack.config.js中配置的输出的文件名,但是src_info_js.main.js呢?这是什么????

    模版文件

    新建/dist/index.html文件,并引入打包后的main.js

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <script src = "./main.js"></script>
    </body>
    </html>
    

    在浏览器打开 index.html

    控制台输出如下:
    在这里插入图片描述
    nextwork 加载的资源如下:
    在这里插入图片描述
    当点击按钮后,src_info_js.main.js 文件被加载
    在这里插入图片描述

    分析打包后的源码

    首先将源码折叠

    (function (modules) {
      // xxxx
    })({
      // xxx
    })
    

    这是一个自执行函数

    函数参数

    在这里插入图片描述
    webpack将所有的import moduleName from 'xxModule’都变成了一个Map对象,key为文件路径,value为一个可执行的函数,而函数内容其实就是模块中导出的内容,当然,模块自己也被webpack做了一些处理,接着往下进行。

    从打包后Map对象中能找到我们代码中的各个模块,以及模块的内容,但是也多了很多不属于我们编写的代码,比如以__webpack_require__开头的代码,这些又是什么呢?其实是webpack自定义的一些方法。

    展开全文
  • webpack import() 动态加载模块踩坑

    千次阅读 2018-07-16 16:42:50
    webpack根据ES2015 loader 规范实现了用于动态加载的import()方法。 这个功能可以实现按需加载我们的代码,并且使用了promise式的回调,获取加载的包。 在代码中所有被import()的模块,都将打成一个单独的包,放在...
        

    import

    webpack根据ES2015 loader 规范实现了用于动态加载的import()方法。

    这个功能可以实现按需加载我们的代码,并且使用了promise式的回调,获取加载的包。

    在代码中所有被import()的模块,都将打成一个单独的包,放在chunk存储的目录下。在浏览器运行到这一行代码时,就会自动请求这个资源,实现异步加载。

    这里是一个简单的demo。

    import('lodash').then(_ => {
        // Do something with lodash (a.k.a '_')...
      })
    

    可以看到,import()的语法十分简单。该函数只接受一个参数,就是引用包的地址,这个地址与es6的import以及CommonJS的require语法用到的地址完全一致。可以实现无缝切换【写个正则替换美滋滋】。

    并且使用了Promise的封装,开发起来感觉十分自在。【包装一个async函数就更爽了】

    然而,以上只是表象。

    只是表象。

    我在开发的时候就遇到了问题。场景是这样的:一个对象,存储的是各级的路由信息,及其对应的页面组件。为减少主包大小,我们希望动态加载这些页面。

    同时使用了react-loadable来简化组件的懒加载封装。代码如下所示。

    function lazyLoad(path) {
      return Loadable({
        loader: () => import(path),
        loading: Spin,
      });
    }

    然后我就开始开心的在代码中写上lazyLoad('./pages/xxx')。果不其然,挂了。浏览器表示,没有鱼丸没有粗面,也不知道这个傻逼模块在哪里。

    于是我查看了官方文档,发现有一个黄条提示。

    clipboard.png

    emmm,看来问题出在这里了。

    这个现象其实是与webpack import()的实现高度相关的。由于webpack需要将所有import()的模块都进行单独打包,所以在工程打包阶段,webpack会进行依赖收集。

    此时,webpack会找到所有import()的调用,将传入的参数处理成一个正则,如:

    import('./app'+path+'/util') => /^\.\/app.*\/util$/
    

    也就是说,import参数中的所有变量,都会被替换为【.*】,而webpack就根据这个正则,查找所有符合条件的包,将其作为package进行打包。

    clipboard.png

    因此,如果我们直接传入一个变量,webpack就会把 (整个电脑的包都打包进来[不闹]) 认为你在逗他,并且抛出一个WARNING: Critical dependency: the request of a dependency is an expression。

    所以import的正确姿势,应该是尽可能静态化表达包所处的路径,最小化变量控制的区域

    如我们要引用一堆页面组件,可以使用import('./pages/'+ComponentName),这样就可以实现引用的封装,同时也避免打包多余的内容。

    另外一个影响功能封装的点,是import()中的相对路径,是import语句所在文件的相对路径,所以进一步封装import时会出现一些麻烦。

    因为import语句中的路径会在编译后被处理成webpack命令执行目录的相对路径.

    友情链接:

    https://webpack.js.org/api/mo...

    展开全文
  • The solution would be to import this flags straight from webpack core (missing at the moment). will help us here, he volunteered to integrate them inside webpack core. Later, we will import them here ...
  • import() webpack打包报错

    千次阅读 2018-12-19 16:41:27
    按照webpack官网案例搭建了一个小的项目,在使用动态导入方式做...1.安装babel-plugin-dynamic-import-webpack npm i babel-plugin-dynamic-import-webpack -D 2.修改 .babelrc 配置文件,在plugins中添加如下...

    按照webpack官网案例搭建了一个小的项目,在使用动态导入方式做代码分离时,惊现报错,报错如下:

    一番搜索找到了以下解决方案:

    解决过程如下:

    1.安装babel-plugin-dynamic-import-webpack

    npm i babel-plugin-dynamic-import-webpack -D

    2.修改 .babelrc 配置文件,在plugins中添加如下配置

    3.再次执行打包命令,打包成功

    展开全文
  • webpack中定义alias相信很多人都知道,在引入文件的时候比较方便不需要写冗长的引用地址,在webpack里定义这个: resolve: { alias: { '@': path.resolve(__dirname, 'src/') } } 则引入文件时 @ 则表示src...

    问题背景

    webpack中定义alias相信很多人都知道,在引入文件的时候比较方便不需要写冗长的引用地址,在webpack里定义这个:

     resolve: {
          alias: {
            '@': path.resolve(__dirname, 'src/')
          }
        }
    

    则引入文件时 @ 则表示src目录

    然后在使用import导入css文件时,使用alias`定义的地址简写却出现问题

    * -!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-3-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./@/assets/iconfonts/iconfont.css in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/styles/index.scss
    
    To install it, you can run: npm install --save -!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-3-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./@/assets/iconfonts/iconfont.css
    

    说明webpack 没有正确识别资源相对路径

    问题原因

    实际上,css要经过css-loader去处理,,import在默认情况下会把后面的路径当做绝对路径去处理,如下面引入

    @import '@/assets/iconfonts/iconfont.css';
    

    默认情况下会查找 @/assets/iconfonts/iconfont.css'这个地址,当然不存在。

    解决办法

    在引用路径的字符串最前面添加上·~符号,如@import "~@/assets/iconfonts/iconfont.css";Webpack 会将以 ~ 符号作为前缀的路径视作依赖模块而去解析,实际引用地址被解释为alias配置@的地址+后面的路径 , @ 的 alias 配置就能生效了。

    总结

    ~开头webpack会当做相对路径去解释,最终转换出完整的路径给css-loader加载
    各类非 js 直接引用(import require)静态资源,依赖相对路径加载问题,都可以用 ~ 语法完美解决;

    展开全文
  • <p>When <code>webpack</code> sees this import, it uses py-loader to call transcrypt. This results in the following: <pre><code> ./main.js ./module.py ./__target__/module.js ./__target__/org.transcrypt...
  • <div><p>When I write webpack.config.file with es6 syntax, the resolver is not working.</p><p>该提问来源于开源项目:benmosher/eslint-plugin-import</p></div>
  • 本文作者:李永宁本文链接:https://juejin.cn/post/6859569958742196237某大厂面试题面试官,问:import moduleName from '...
  • <div><p>Currently Webpack 2 supports System.import now! However combing with typescript&tsloader, it will show "Cannot find name 'System'"..</p><p>该提问来源于开源项目:...
  • Webpack import sass issue

    2021-01-09 07:58:46
    <code>import 'style-loader!css-loader!sass-loader!./index.scss'; <strong>If this is a feature request, what is motivation or use case for changing the behavior? Im using yeoman fountain web-...
  • <div><p>This PR contains the following updates: ...| <a href="https://togithub.com/airbnb/babel-plugin-dynamic-import-webpack">babel-plugin-dynamic-import-webpack</a> | devDependencies | minor | ...
  • <p>1) How can I import klaro with webpack? <p>2) How can I import klaro lazy with webpack? I would like to do something like <pre><code> if (cookie not set ...) { import('klaro').then... { ...
  • 我们的目标是把html引入ts文件,webpack打包时就能把html打进js文件,减少文件加载啦 1 安装 text-loader ...2 webpack 配置里新增 text-loader 为文本加载器 module: { rules: [ { test: ...
  • m using webpack on both the server and the client... maybe here a short-hand way to use the result of the import ?</p><p>该提问来源于开源项目:faceyspacey/babel-plugin-universal-import</p></div>
  • 来源:李永宁https://juejin.im/post/6859569958742196237某大厂面试题面试官,问:import moduleName from 'xxMod...
  • webpack and plugin import

    2021-01-12 04:52:07
    <p>Using webpack I can install wave surfer easily, but I fail to load plugins. <pre><code>javascript import WaveSurfer from "wavesurfer"; import Regions from "wavesurfer/plugin/wavesurfer....
  • <p><strong>What kind of change does this PR introduce? Feature. <p><strong>Did you add tests for your changes? Yes <strong>If relevant, did you update the ...webpack/webpack-cli</p></div>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,047
精华内容 4,418
关键字:

importwebpack