How to bundle - using Typescript + Three.js + GLTFLoader?

Questions
4

Sorry if ‘quite simple’ sounds offensive…My English is not very good.:persevere:
I had no difficult to generate bundle from ts code directly by webpack and I am a totally new bee to web development. I wanted to point out that I didn’t compile the code to js by ts command, I let webpack to do that for me like the tutorial teached. There are no js files appear in my source directory in the progress of compiling and packing. Glad that you solved your issue.

If you are interested, this is my webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin  = require("html-webpack-plugin")
const {CleanWebpackPlugin}  = require("clean-webpack-plugin")
module.exports = {
  devtool: 'source-map',
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
	  {
		test: /\.glsl$/,
		use: 'raw-loader'
	  }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js', '.glsl' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
	compress: true,
	port: 9000,
	hot: true,
	inline: true
  },
  plugins:[
	new HtmlWebpackPlugin({
		title: "lib-webgl.html",
	}),
	new CleanWebpackPlugin(),
  ],
  watch: true,
  watchOptions: {
	ignored: /node_modules/,
	aggregateTimeout: 300,
	poll: 100
  }
};

And by webpack --config webpack.config.js, I can get bundle.js from my ts codes directly. By webpack-dev-server --open, I can run the html which webpack-dev-server generated for me from my ts codes.

1 Like