import ThreeMinifierResolver for webpack

Question

import ThreeMinifierResolver for webpack

Closed this issue 5 years ago · 6 comments

get some problem on testing with webpack

i tryed

const ThreeMinifierResolver = require('@yushijinhun/three-minifier-webpack');
const threeMinifier = new ThreeMinifierResolver({/* options */});

but i get this error

    at Object.isThreeSource (/home/arpu/Work/projects/vrland_app/node_modules/@yushijinhun/three-minifier-webpack/build/plugin.js:337:25)
    at /home/arpu/Work/projects/vrland_app/node_modules/@yushijinhun/three-minifier-webpack/build/plugin.js:430:35
    at SyncHook.eval [as call] (eval at create (/home/arpu/Work/projects/vrland_app/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/home/arpu/Work/projects/vrland_app/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.buildModule (/home/arpu/Work/projects/vrland_app/node_modules/webpack/lib/Compilation.js:738:26)
    at /home/arpu/Work/projects/vrland_app/node_modules/webpack/lib/Compilation.js:1111:12
    at MultiModuleFactory.create (/home/arpu/Work/projects/vrland_app/node_modules/webpack/lib/MultiModuleFactory.js:18:3)
    at /home/arpu/Work/projects/vrland_app/node_modules/webpack/lib/Compilation.js:1063:18
    at Semaphore.acquire (/home/arpu/Work/projects/vrland_app/node_modules/webpack/lib/util/Semaphore.js:29:4)
    at Compilation._addModuleChain (/home/arpu/Work/projects/vrland_app/node_modules/webpack/lib/Compilation.js:1062:18)
error Command failed with exit code 1.

Answer 1 · 2020-01-26T17:32:45.000Z

Could you please provide your webpack.conf.js?

Answer 2 · 2020-01-26T17:33:43.000Z

sure

const ThreeMinifierResolver = require('@yushijinhun/three-minifier-webpack');
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
const  PrettierPlugin = require("prettier-webpack-plugin");
const threeMinifier = new ThreeMinifierResolver({/* options */});
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const build = require('yargs').argv.env === 'build';

let htmlPlugin;

if (process.env.DOMAIN) {
  htmlPlugin = new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html",
    title: "captic.io",
    favicon: "./public/assets_capticio/icons/favicon.ico"
  });
}else {

htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html",
  title: "vrland.io",
  favicon: "./public/favicon.ico"
});

}
const fs = require("fs");
const path = require("path");


function matchRegex({ include, exclude }) {
  return (module, chunks) => {
    if (
      module.nameForCondition &&
      include.test(module.nameForCondition()) &&
      !exclude.test(module.nameForCondition())
    ) {
      return true;
    }
    for (const chunk of chunks) {
      if (chunk.name && include.test(chunk.name) && !exclude.test(chunk.name)) {
        return true;
      }
    }
    return false;
  };
}

module.exports = (env, argv) => ({
//entry: './src/index.js',
mode: "production", 
 node: {
  fs: 'empty'
 },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.scss$/,
         use: ["style-loader", "css-loader","sass-loader"]

      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      
      { test: /\.(glsl|frag|vert)$/,
      use: ["raw-loader"  , "glslify-loader" ]
      },
    
      {
        test: /\.(png|jpg|gif|glb|ogg|mp3|mp4|wav|woff2|svg|webm)$/,
        use: {
          loader: "file-loader",
          options: {
            // move required assets to output dir and add a hash for cache busting
            name: "[path][name]-[hash].[ext]",
            // Make asset paths relative to /src
            context: path.join(__dirname, "src")
          }
        }
      },
       {
          test: /\.worker\.js$/,
          include: path.join(__dirname, "src"),
          loader: "worker-loader"
        },
        {
          test: /\.wasm$/,
          type: "javascript/auto",
          use: {
            loader: "file-loader",
            options: {
              outputPath: "assets/js/wasm",
              name: "[name]-[hash].[ext]"
            }
          }
        }
    ]
  },
  plugins: [
    htmlPlugin,
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['**/*.bundle.js*', '!rooms*', '**/*.worker.js*'],
    }),

/*
new PrettierPlugin({
      printWidth: 160,               // Specify the length of line that the printer will wrap on.
      tabWidth: 2,                  // Specify the number of spaces per indentation-level.
      useTabs: false,               // Indent lines with tabs instead of spaces.
      semi: true,                   // Print semicolons at the ends of statements.
      encoding: 'utf-8',            // Which encoding scheme to use on files
      extensions: [ ".js", ".ts" ]  // Which file extensions to process
    }),
  */  
    
    new webpack.DefinePlugin({
      "process.env": JSON.stringify({
        NODE_ENV: argv.mode,
        DOMAIN: process.env.DOMAIN,
      })
    }),
    threeMinifier 
  ],
  devServer: {
    contentBase: './public',
    historyApiFallback: true,
    host: "0.0.0.0",
    useLocalIp: true,
//    public: "vrland.local:8080",
   
  },
   output: {
    path: __dirname + '/public',
    publicPath: '/',
    filename: "[name].[hash].bundle.js"
  },
  
  optimization: {
    mergeDuplicateChunks: true,
//    flagIncludedChunks: true,
    removeEmptyChunks: true,
//    namedModules: true,
//    namedChunks: true,
//    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: true,
        cache: true,
        parallel: true,
        sourceMap: false, // Must be set to true if using source-maps in production
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
           extractComments: 'all',
           compress: {
               drop_console: true,
             //  passes: 3,
             //  keep_infinity: true
           },
        }
      }),
    ],
 /*   splitChunks: {
      cacheGroups: {
        engine: {
          test: /([\\/]src[\\/]workers|[\\/]node_modules[\\/](aframe|cannon|three))/,
          priority: 100,
          name: "engine",
          chunks: "all"
        },
        vendors: {
          test: matchRegex({
            include: /([\\/]node_modules[\\/]|[\\/]vendor[\\/])/,
            exclude: /[\\/]node_modules[\\/]markdown-it[\\/]/
          }),
          priority: 50,
          name: "vendor",
          chunks: "all"
        }
      }

    }*/
  }
})

if (process.env.NODE_ENV == 'production') {
/*  module.exports.plugins(
    new PrettierPlugin({
      printWidth: 160,               // Specify the length of line that the printer will wrap on.
      tabWidth: 2,                  // Specify the number of spaces per indentation-level.
      useTabs: false,               // Indent lines with tabs instead of spaces.
      semi: true,                   // Print semicolons at the ends of statements.
      encoding: 'utf-8',            // Which encoding scheme to use on files
      extensions: [ ".js", ".ts" ]  // Which file extensions to process
    }),
  );
*/
}

Answer 3 · 2020-01-26T17:40:41.000Z

Could you please change line 337 of /home/arpu/Work/projects/vrland_app/node_modules/@yushijinhun/three-minifier-webpack/build/plugin.js to:

return file && file.includes(threeSrcDirPart);

and then try again?

BTW, you didn't configure the resolver (see readme)

Answer 4 · 2020-01-26T17:51:12.000Z

ok have done this changed and add the resolve

now i get this:

home/arpu/Work/projects/vrland_app/node_modules/@yushijinhun/three-minifier-webpack/build/plugin.js:352
            if (file.endsWith(threeBundleSuffix)) {
                     ^

TypeError: file.endsWith is not a function
    at Object.transformModule (/home/arpu/Work/projects/vrland_app/node_modules/@yushijinhun/three-minifier-webpack/build/plugin.js:352:22)
    at /home/arpu/Work/projects/vrland_app/node_modules/@yushijinhun/three-minifier-webpack/build/plugin.js:393:62
    at /home/arpu/Work/projects/vrland_app/node_modules/enhanced-resolve/lib/Resolver.js:237:23
    at eval (eval at create (/home/arpu/Work/projects/vrland_app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /home/arpu/Work/projects/vrland_app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:43:6
    at /home/arpu/Work/projects/vrland_app/node_modules/enhanced-resolve/lib/Resolver.js:237:23
    at eval (eval at create (/home/arpu/Work/projects/vrland_app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:642:1)
    at /home/arpu/Work/projects/vrland_app/node_modules/enhanced-resolve/lib/AliasFieldPlugin.js:37:12
    at AsyncSeriesBailHook.eval [as callAsync] (eval at create (/home/arpu/Work/projects/vrland_app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:637:1)
    at Resolver.doResolve (/home/arpu/Work/projects/vrland_app/node_modules/enhanced-resolve/lib/Resolver.js:235:16)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Answer 5 · 2020-01-26T17:59:00.000Z

Could you check if this is fixed in v0.1.2?

Answer 6 · 2020-01-26T18:05:44.000Z

ok errors are gone!