Vanila Javascript Webpack Setting

조건

• 순수 자바스크립트만 사용
• webpack 환경설정
• 라우팅 구현
• webpack-dev-server 환경구성
• hot-loading 구성
• start, build 스크립트 구성
• build 시 /public 폴더에 리소스 생성

Install

 

	npm init -y
	npm i webpack webpack-cli -D
	npm i style-loader css-loader sass sass-loader -D
	npm i html-webpack-plugin -D
	npm i webpack-dev-middleware -D
	npm i webpack-dev-server -D
	npm i mini-css-extract-plugin -D
	npm i cross-env -D
	npm i webpack-hot-middleware -D
	npm i express -D

view raw Install hosted with ❤ by GitHub

 

package.json

 

	"scripts": {
	"start": "cross-env NODE_ENV=development node server.js",
	"build": "cross-env NODE_ENV=production webpack",
	}

view raw package.json hosted with ❤ by GitHub

 

webpack.config.js

 

	const path = require('path');
	const MiniCssExtractPlugin = require('mini-css-extract-plugin');
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const webpack = require("webpack");
	const isDev = process.env.NODE_ENV === "development"
	module.exports = {
	mode: isDev ? "development" : "production",
	entry: isDev ? ["webpack-hot-middleware/client", "./entry.js"] : './entry.js',
	devtool: 'inline-source-map',
	devServer: {
	static: './dist',
	},
	output: {
	filename: '[name].bundle.js',
	path: path.resolve(__dirname, 'public'),
	clean: true,
	publicPath: '/',
	},
	module: {
	rules: [
	{
	test: /\.s[ac]ss$/i,
	use: [
	"style-loader",
	"css-loader",
	{
	loader: "sass-loader",
	options: {
	sourceMap: true,
	},
	},
	],
	}
	]
	},
	plugins: [
	new HtmlWebpackPlugin({
	template: './index.html'
	}),
	new MiniCssExtractPlugin({
	filename: "[name].css",
	chunkFilename: "[id].css"
	}),
	new webpack.HotModuleReplacementPlugin(),
	]
	}

view raw webpack.config.js hosted with ❤ by GitHub

 

server.js

 

	const path = require('path');
	const express = require('express');
	const webpack = require('webpack');
	const webpackDevMiddleware = require('webpack-dev-middleware');
	const webpackHotMiddleware = require('webpack-hot-middleware');
	const app = express();
	const config = require('./webpack.config.js');
	const compiler = webpack(config);
	app.use(
	webpackDevMiddleware(compiler, {
	publicPath: config.output.publicPath,
	})
	)
	app.use(webpackHotMiddleware(compiler));
	app.get('/', function(req, res) {
	res.sendFile(path.join(__dirname + '/public/index.html'))
	})
	app.get('/test', function(req, res) {
	res.sendFile(path.join(__dirname + '/public/index.html'))
	})
	app.listen(5000, function () {
	console.log('http://localhost:3000');
	})

view raw server.js hosted with ❤ by GitHub