webpack inline loader 打包 worker

原创
10/19 23:46
阅读数 25

https://www.webpackjs.com/loaders/url-loader/

https://webpack.js.org/concepts/loaders/#inline

几种常见写法, 可以通过?设置参数

It's possible to specify loaders in an import statement, or any equivalent "importing" method. Separate loaders from the resource with !. Each part is resolved relative to the current directory.

import Styles from 'style-loader!css-loader?modules!./styles.css';

It's possible to override any loaders, preLoaders and postLoaders from the configuration by prefixing the inline import statement:

  • Prefixing with ! will disable all configured normal loaders
import Styles from '!style-loader!css-loader?modules!./styles.css';
  • Prefixing with !! will disable all configured loaders (preLoaders, loaders, postLoaders)
import Styles from '!!style-loader!css-loader?modules!./styles.css';
  • Prefixing with -! will disable all configured preLoaders and loaders but not postLoaders
import Styles from '-!style-loader!css-loader?modules!./styles.css';

Options can be passed with a query parameter, e.g. ?key=value&foo=bar, or a JSON object, e.g. ?{"key":"value","foo":"bar"}.

Use module.rules whenever possible, as this will reduce boilerplate in your source code and allow you to debug or locate a loader faster if something goes south.

 

通过inline 的写法将worker文件打包为js, 返回的是一个url, 我们设置必须打包为文件, 而不是base64字符串, 是为了方便使用

这样就能使用url初始化worker了

import SyncWorkerURL from "url-loader?limit=0!./sync.shared.worker.js"

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部