바닐라 자바스크립트 시작하기전에...

바닐라 자바스크립트를 시작하기 전에 설정해두면 좋은 것들...
새로운거 만들 때마다 기억안나서 찾아댕기기에 여기에 적어두고 계속 기억해 둬야지...

이 모든 설정은 npm으로 install합니다.

1. package.json

npm init -y

2. webpack

npm i -D webpack
npm i -D webpack-cli
npm i -D clean-webpack-plugin
npm i -D html-webpack-plugin
npm i -D webpack-dev-server
npm i -D style-loader csc-loader

• 기본적으로 다운 받아야 할 것들

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: "development",
    devServer: {
        static : "./dist"
    },
    entry:'./src/main.js',
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, './dist'),
        clean: true,
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                use: ['style-loader' ,'css-loader'],
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({template:'./index.html'})// ./을 안넣으면 auto구만...
    ],
};

new HtmlWebpackPlugin에서 index.html에 ./안붙이니까 마음대로 경로를 찾아버려서 auto?라는 가상의 폴더 속의 index를 가져온다... 저거땜시 1시간날려부럿ㅆ...

3. package.json 수정

• webpack으로 dev server쓰는 김에 사용하기 편하게 수정하기

...
"scripts": {
	"start": "webpack serve",
    "build": "webpack -w"
    },
    ...