V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
xiaoming1992
V2EX  ›  JavaScript

求 webpack 插件,排除特定 js 文件。

  •  
  •   xiaoming1992 · 2020-01-11 15:02:24 +08:00 · 3686 次点击
    这是一个创建于 1797 天前的主题,其中的信息可能已经有所发展或是发生改变。

    假设我的文件结构如下:

    src
    |--index.js
    |--componentA // 组件 A,依赖 Z
    |--componentB // 组件 B,依赖 Z
    |--componentC // 组件 C,依赖 Z
    |--fileZ // 独立 js 文件,无依赖
    

    现在我希望在打包时,忽略文件 Z,而将组件 A、B、C 中所依赖的 fileZ 中的内容转变为依赖 window

    // 例如
    
    // 组件 A 源码
    import { funcOne } from "fileZ"
    
    // 转译成如下,暂时先不管我 window 里面有没有这个方法
    const { funcOne } = window
    

    ps: 不能修改代码逻辑,仅在 webpack 配置文件中处理这些工作

    12 条回复    2020-01-12 14:52:16 +08:00
    ceet
        1
    ceet  
       2020-01-11 15:05:00 +08:00
    webpack 可以配置打包环境和开发环境 根据不同的环境加载不同的 js
    xiaoming1992
        2
    xiaoming1992  
    OP
       2020-01-11 15:13:13 +08:00
    自问自答,好像可以直接用 external
    (为什么我不能编辑问题了。。。)
    joe237
        3
    joe237  
       2020-01-11 16:04:57 +08:00
    不是好像,是确实该这么用。

    常见的场景就是一些老的第三方库,对象都是直接挂载在 window 对象上的,这时候直接在 html 模板中通过 script 标签引入,完了在 webpack 的 external 中将对应的对象暴露出去,这样就可以在组件中直接通过 import 引用了
    YuTengjing
        4
    YuTengjing  
       2020-01-11 16:27:56 +08:00
    [webpack 官方文档 externals]( https://www.webpackjs.com/configuration/externals/)
    xiaoming1992
        5
    xiaoming1992  
    OP
       2020-01-11 17:19:54 +08:00
    @joe237 我是引用的自己的文件,开发完了之后,发现有一个文件修改特别频繁,修改一次就要全部重新构建,而且我的 output file name 采用了 hash,等于说用户需要全部重新加载一遍,感觉不合理,就想把那个文件单独挂到 html 的 inline
    script 里面,导出到 window,其他文件去 window 里面引用。
    codeduan
        6
    codeduan  
       2020-01-11 21:26:54 +08:00
    @xiaoming1992 把你那个文件单独作为一个 entry,然后配置 externals 就好了。
    codeduan
        7
    codeduan  
       2020-01-11 21:27:40 +08:00
    @xiaoming1992 一个 entry 是 fileZ,另外一个 entry 是 index 配置 externals 忽略 fileZ。
    SoloCompany
        8
    SoloCompany  
       2020-01-11 23:52:22 +08:00
    mockFileZ.js

    module.exports = window

    alias {
    fileZ : mockFileZ
    }
    PainAndLove
        9
    PainAndLove  
       2020-01-12 02:22:55 +08:00
    externals 原来是这么用的。。
    xiaoming1992
        10
    xiaoming1992  
    OP
       2020-01-12 03:10:11 +08:00 via Android
    @codeduan 对,我另外开了一个 webpack.config,并设置 output.libraryTarget 为 window,然后用一个 inline-script-webpack-plugin 将之打包到 html 里面,但是其实还是很丑,不优雅,我可能还得想想其他办法重新搞一下。
    xiaoming1992
        11
    xiaoming1992  
    OP
       2020-01-12 03:12:17 +08:00 via Android
    两个 entry 不能在同一个 webpackConfig 里面,否则这个频繁修改的文件会影响其他文件的 hash
    azh7138m
        12
    azh7138m  
       2020-01-12 14:52:16 +08:00 via Android
    hash 可以用 content hash
    文件内容不变,hash 就不变
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1312 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 17:23 · PVG 01:23 · LAX 09:23 · JFK 12:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.