npm init
-> package name 설정 후 나머자 엔터npm i vue
-> vue 설치npm i webpack webpack-cli -D
-> webpack 설치 "-D" 옵션을 통해 개발할 때만 사용webpack.config.js
파일 생성module.exports = {
entry:{
app: './main.js',
},
output: {
filename: "main.js",
path: path.resolve(__dirname, "./dist"),
},
module: {
rules: [{
}],
},
plugins: [],
output: {
filename: 'app.js',
path: './dist',
},
};
Mode
종류:production
, developement
, none
Entry
의존성 그래프의 시작파일을 설정
기본값:./src/index.js
Output
의존성을 가진 모듈로 생성한 bundle의 결과물 위치를 지정
기본값:./dist/main.js
Loader
로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성
Plugins
플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const webpack = require("webpack");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "./dist"),
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
},
{ test: /\.vue$/, use: "vue-loader" },
{ test: /\.css$/, use: ["vue-style-loader", "css-loader"] },
{
test: /\.scss$/,
use: ["vue-style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: "file-loader",
options: {
name: "[name].[ext]?[hash]",
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
new VueLoaderPlugin(),
new webpack.ProgressPlugin(),
new MiniCssExtractPlugin({
filename: "style.css",
}),
],
devServer: {
open: true,
hot: true,
noInfo: true,
overlay: true,
historyApiFallback: true,
},
devtool: "#eval-source-map",
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js",
},
extensions: ["*", ".js", ".vue", ".json"],
},
};
웹팩을 한땀한땀 정확히 뜻을 찾아가며 만드셨군요 !!