정리/webpack

webpack 새 Typescript 프로젝트 시작하기

워로디스 2026. 2. 19. 22:38 
mkdir new_app
cd ./new_app
npm init -y
npm install webpack webpack-cli --save-dev
npm install copy-webpack-plugin css-loader sass sass-loader source-map-loader style-loader webpack-dev-server --save-dev
npm install rimraf --save-dev

 

npm install --save-dev typescript ts-loader
npx tsc --init

 

 

package.json 에 실행 스크립트 추가

{
  ...
  "scripts": {
    "build": "rimraf dist && webpack",
    "start": "rimraf dist && webpack-dev-server"
  },
  ...
}

 

 

webpack.config.json

const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");

const dist = path.resolve(__dirname, "dist");

module.exports = {
    experiments: {
        asyncWebAssembly: true,
    },
    mode: "production",
    entry: {
        index: "./src/index.tsx",
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ],
            },
            {enforce: "pre", test: /\.js$/, loader: "source-map-loader"}
        ]
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"],
    },
    output: {
        path: dist,
        filename: "[name].js",
        chunkFilename: `[id].${new Date().getTime()}.js`,
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'),
        },
        open: true,
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, 'public'),
                }
            ]
        }),
    ]
};

 

 

public/index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="google" content="notranslate">
    <meta http-equiv="cache-control" content="max-age=0"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-store"/>
    <meta http-equiv="expires" content="-1"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <title></title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>

 

참고