돌고 돌아와 드디어 Webpack 설정을 위해 도착하였습니다 !
아직 Webpack을 잘 모르겠다면 여기로 가서 학습하고 돌아오세요.
Webpack을 설치해봅시다
npm i -D webpack webpack-cli webpack-dev-server
Webpack 셋팅 파일은 webpack.config.js
파일을 사용하지만 develop
, production
상황을 맞춰서 빌드해보겠습니다.
필요한 파일
webpack.config.common.js
: dev, prod 에 공통적으로 셋팅해야 하는것webpack.config.dev.js
: develop
환경에서 사용할 설정webpack.config.prod.js
: production
환경에서 사용할 설정pakage.json
: dev, build에 따른 config를 설정한 script를 작성const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.tsx',
output: {
path: path.join(__dirname, '../dist'),
filename: 'bundle.js',
publicPath: '/',
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
alias: {
'@': path.resolve(__dirname, '../src/'),
},
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.(png|jpe?g|gif|woff|woff2|ttf|svg|ico)$/i,
use: [
{
loader: 'file-loader',
},
],
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new CleanWebpackPlugin({
cleanStaleWebpackAssets: false,
}),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
};
...
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
...
...
plugins: [
new CleanWebpackPlugin({
cleanStaleWebpackAssets: false,
}),
...
const { merge } = require('webpack-merge');
const common = require('./webpack.config.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: '../dist',
host: 'localhost',
port: 8080,
open: true,
historyApiFallback: true,
proxy: {
'/api/': {
target: 'http://localhost:3000/api',
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
},
},
},
});
'localhost:8080/login'
const { merge } = require('webpack-merge');
const common = require('./webpack.config.common.js');
module.exports = merge(common, {
mode: 'production',
});
...
"scripts": {
"dev": "webpack serve --config ./config/webpack.config.dev.js",
"build": "webpack --config ./config/webpack.config.prod.js"
},
...
webpack.config.dev.js
를 설정해줬습니다npm run dev
webpack.config.prod.js
를 설정해줬습니다npm run build
감사합니다~