Webpack 셋팅하기 2

css 설치

$ npm i -D style-loader css-loader

// webpack.config.js

const path = require("path"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 

module.exports = {
	entry : './src/index.js',
    output : { 
    	filename : "main.js",
        path : path.resolve(__dirname, "dist"),
    },
    // 추가내용
    module : {
    	reles : [{
            test : /\.css$/,
            use : ["style-loader", "css-loader"], // use의 배열은 뒤에서부터 적용됨
        }]
    },
    plugins : [
    	new HtmlWebpackPlugin({
    		template : "./index.html",
    	}),
    ],
    devServer : {
    	static : {
        	directory : path.resolve(__dirname, 'dist')
        },
        port : 8080
    }
};

이후 작업 중인 js 파일에 css 파일을 import해준다.

$ npm i -D mini-css-extract-plugin

// webpack.config.js

const path = require("path"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	entry : './src/index.js',
    output : { 
    	filename : "main.js",
        path : path.resolve(__dirname, "dist"),
    },
    module : {
    	reles : [{
            test : /\.css$/,
            // use : ["style-loader", "css-loader"], // html 내에 style 태그로 css 생성
            use : [MiniCssExtractPlugin.loader, "css-loader"], 
            // css파일이 생성되고 html에 link 태그로 불러오기, 
        }]
    },
    plugins : [
    	new HtmlWebpackPlugin({
    		template : "./index.html",
    	}),
        new MiniCssExtractPlugin({
        	filename : "common.css", // 만들어질 css 파일이름
        }),
    ],
    devServer : {
    	static : {
        	directory : path.resolve(__dirname, 'dist')
        },
        port : 8080
    }
};

이미지 파일 불러오기

$ npm i -D file-loader

// webpack.config.js

const path = require("path"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	entry : './src/index.js',
    output : { 
    	filename : "main.js",
        path : path.resolve(__dirname, "dist"),
    },
    module : {
    	reles : [
            {
                test : /\.css$/,
                use : [MiniCssExtractPlugin.loader, "css-loader"],
            },
            { // 추가내용
            	test : /\.jpg$/,
                use : ["file.loader"]
            }
        ]
    },
    plugins : [
    	new HtmlWebpackPlugin({
    		template : "./index.html",
    	}),
        new MiniCssExtractPlugin({
        	filename : "common.css",
        }),
    ],
    devServer : {
    	static : {
        	directory : path.resolve(__dirname, 'dist')
        },
        port : 8080
    }
};

사용하지 않는 파일 정리해주는 플러그인

$ npm i -D clean-webpack-plugin

// webpack.config.js

const path = require("path"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
	entry : './src/index.js',
    output : { 
    	filename : "main.js",
        path : path.resolve(__dirname, "dist"),
    },
    module : {
    	reles : [
            {
                test : /\.css$/,
                use : [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
            	test : /\.jpg$/,
                use : ["file.loader"]
            }
        ]
    },
    plugins : [
    	new HtmlWebpackPlugin({
    		template : "./index.html",
    	}),
        new MiniCssExtractPlugin({
        	filename : "common.css",
        }),
        new CleanWebpackPlugin
    ],
    devServer : {
    	static : {
        	directory : path.resolve(__dirname, 'dist')
        },
        port : 8080
    }
};