-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
69 lines (64 loc) · 1.81 KB
/
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// import
// node.js 환경에서 사용할 수 있는 path라는 전역모듈을 가지고 와서 path라는 변수에다가 할당함
const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader'); // 3번째
// export
module.exports = {
// 파일을 읽어들이기 시작하는 진입점 설정
entry: './src/main.js',
// 결과물(번들)을 반환하는 설정
output: {
// 주석은 기본값!, `__dirname`은 현재 파일의 위치를 알려주는 NodeJS 전역 변수
// path: path.resolve(__dirname, 'dist'),
// filename: 'main.js',
clean: true
},
// 모듈 처리 방식을 설정
module: {
rules: [
{
// 1번째
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.s?css$/,
use: [
// 순서 중요!
'vue-style-loader', // 2번째
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/, // 제외할 경로
use: [
'babel-loader'
]
}
]
},
// 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
plugins: [
new HtmlPlugin({
template: './index.html',
}),
new CopyPlugin({
patterns: [
{ from: 'static' } // 여기서 static은 우리가 만들어 놓은 파일 이름!
]
}),
new VueLoaderPlugin()
],
// 개발 서버 옵션
devServer: {
host: 'localhost',
// port: 8080,
// hot: true
}
}