npm i -D @babel/cli @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin core-js cross-env html-webpack-plugin source-map-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server webpack-merge
npm i -d @types/node @types/three ts-loader
webpack common & dev & prd 분기
// path : /etc/webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './src/main.ts', // 실행 파일을 main.ts로 설정
module: {
rules: [
{
test: /\\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
alias: {
three: path.resolve('./node_modules/three')
},
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve('./dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: process.env.NODE_ENV === 'production' ? {
collapseWhitespace: true,
removeComments: true,
} : false
}),
new CopyWebpackPlugin({
patterns: [
{ from: "./src/main.css", to: "./main.css" },
// { from: "./src/images", to: "./images" },
// { from: "./src/models", to: "./models" },
// { from: "./src/sounds", to: "./sounds" }
],
})
]
};
// path : /etc/webpack.dev.js
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const path = require('path');
module.exports = merge(common, {
mode: 'development',
devtool: 'eval-source-map',
devServer: {
static: {
directory: path.join(__dirname, '../dist'),
},
hot: true,
},
})
// path: ./tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"moduleResolution": "node",
"strict": true,
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*.ts"] // ts파일 위치
}