Light

How to use it for webpack? about javascriptsubtitlesoctopus HOT 8 CLOSED

libass commented on September 17, 2024 1

How to use it for webpack?

from javascriptsubtitlesoctopus.

Comments (8)

Dudecake commented on September 17, 2024 2

I don't know if you are still watching this issue, but after experimenting for FAR too long I gave up and just used copy-webpack-plugin to copy the dist directory to / in the target directory with:

const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([{ from: "node_modules/libass-wasm/dist" }])
    ]
  }
}

from javascriptsubtitlesoctopus.

cobarx commented on September 17, 2024 1

For our setup, we don't use webpack for the worker. We have a yarn script that creates the bundle with webpack then copies the worker files to an assets folder. That makes it pretty easy to have a hardcoded path to the worker.

from javascriptsubtitlesoctopus.

Dudecake commented on September 17, 2024

I also struggled with this. In a Vue application I "fixed" it with the javascript below. This worked mostly, except for the .wasm file. I "fixed" that by creating a symlink in the public directory which gets copied as-is, which is less than ideal but it works.

import SubtitlesOctopus from "libass-wasm/dist/subtitles-octopus.js";
// TODO: find a less garbage way to load libass-wasm
// import(
//   "!!file-loader?name=[name].[ext]!libass-wasm/dist/subtitles-octopus-worker.wasm"
// );
import "!!file-loader?name=[name].[ext]!libass-wasm/dist/subtitles-octopus-worker.data";

My webpack configuration might also contribute to this "fix", so below is the content of the configureWebpack object of my vue.config.js. The commented out parts are things I've attempted to copy the subtitles-octopus-worker.wasm file as-is. DISCLAIMER: I only vaguely know what I'm doing with Webpack, so it might not be pretty...

{
  "module": {
    // defaultRules: [
    //   {
    //     test: /subtitles-octopus-worker\.wasm$/,
    //     use: [{
    //       loader: "file-loader",
    //       options: {
    //         name: "[name].[ext]"
    //       }
    //     }],
    //     type: "webassembly/experimental"
    //   },
    //   {
    //     test: /\.wasm$/,
    //     use: [{
    //       loader: "file-loader",
    //       options: {
    //         name: "[name].[ext]"
    //       }
    //     }],
    //     type: "webassembly/experimental"
    //   }
    // ],
    "rules": [
      {
        "test": /\/svg$/,
        "use": [{ "loader": "file-loader" }]
        // },
        // {
        //   test: /subtitles-octopus-worker\.wasm$/,
        //   use: [{
        //     loader: "file-loader",
        //     options: {
        //       name: "[name].[ext]"
        //     }
        //   }],
        //   type: "webassembly/experimental"
        // },
        // {
        //   test: /\.wasm$/,
        //   use: [{
        //     loader: "file-loader",
        //     options: {
        //       name: "[name].[ext]"
        //     }
        //   }],
        //   type: "webassembly/experimental"
      }
    ]
  },
  "optimization": {
    "mangleWasmImports": false,
    "noEmitOnErrors": true,
    "splitChunks": {
      "chunks": "all",
      "maxInitialRequests": Infinity,
      "minSize": 0,
      "cacheGroups": {
        "vendors": {
          "test": /[\\/]node_modules[\\/]/,
          "name": module =>
            module.context.match(/[\\/]node_modules[\\](.*?)([\\/]|$)/)[1]
        }
      }
    }
  }
}

from javascriptsubtitlesoctopus.

jiseopX commented on September 17, 2024

@Dudecake and iam wondering how to connect subtitles-octopus.js and subtitles-otopus-worker.js in webpack. I mean i cannot pass the worker path using workerUrl because of webpack bundler. Could you please explain me?

from javascriptsubtitlesoctopus.

Dudecake commented on September 17, 2024

I forgot about that part because that wasn't the part I had the most trouble with. Sorry about that...

You can actually specify the path of the subtitles-octopus-worker.js file with the below javascript

      const subtitlesOctopusOptions = {
        video: videoElement,
        workerUrl: require("!!file-loader?name=[name].[ext]!libass-wasm/dist/subtitles-octopus-worker.js")
      };
      this.subtitlesOctopus = new SubtitlesOctopus(subtitlesOctopusOptions);

You don't have to specify the name with name=[name].[ext], but I did it for the sake of consistency.

from javascriptsubtitlesoctopus.

ttshivers commented on September 17, 2024

I found looking at Jellyfin's implementation useful to look at.

from javascriptsubtitlesoctopus.

nopol10 commented on September 17, 2024

For NekoCap which is a browser extension, copying it via copy-webpack-plugin works well enough

from javascriptsubtitlesoctopus.

TheOneric commented on September 17, 2024

I'm not familiar with webpacks, but it seems like the question got answered? If someone knowledgeable in this wants to make a solution more visible, I'd suggeset adding a new Webpack page with the info to the wiki (every GitHub-account has write access).

from javascriptsubtitlesoctopus.

Related Issues (20)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.