복습
1
2
npm init -y
npm i -D webpack webpack-cli webpack-dev-server@next
-package.json 수정
1
2
3
4
"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
-
main.js 생성
-
webpack.config.js 생성
1
2
3
4
5
6
7
8
9
10
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
clean: true
},
}
1
npm i -D html-webpack-plugin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
clean: true
},
plugins: [
new HtmlPlugin({
template: './index.html'
}),
],
devServer: {
host:'localhost',
port: 8089,
hot: true
}
}
- favicon 추가
1
npm i -D copy-webpack-plugin
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
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
clean: true
},
plugins: [
new HtmlPlugin({
template: './index.html'
}),
new CopyPlugin({
patterns: [
{ from: 'static' }
]
}),
],
devServer: {
host:'localhost',
port: 8089,
hot: true
}
}
- css 가져오기
- main.js
1
import '../css/main.css'
- 웹팩은 가져온 css를 못 읽음
1
npm i -D css-loader style-loader
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
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
clean: true
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
},
]
},
plugins: [
new HtmlPlugin({
template: './index.html'
}),
new CopyPlugin({
patterns: [
{ from: 'static' }
]
}),
],
devServer: {
host:'localhost',
port: 8089,
hot: true
}
}
- scss를 추가로 사용하면
1
npm i -D sass-loader sass
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
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
clean: true
},
module: {
rules: [
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
},
]
},
plugins: [
new HtmlPlugin({
template: './index.html'
}),
new CopyPlugin({
patterns: [
{ from: 'static' }
]
}),
],
devServer: {
host:'localhost',
port: 8089,
hot: true
}
}
- autoprefixer(post CSS)
1
npm i -D postcss autoprefixer postcss-loader
- package.json
1
2
3
4
"browserslist": [
"> 1%",
"last 2 versions"
],
- 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
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
clean: true
},
module: {
rules: [
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader',
]
},
]
},
plugins: [
new HtmlPlugin({
template: './index.html'
}),
new CopyPlugin({
patterns: [
{ from: 'static' }
]
}),
],
devServer: {
host:'localhost',
port: 8089,
hot: true
}
}
- .postcssrc.js 생성
1
2
3
4
5
module.exports = {
Plugins: [
require('autoprefixer')
]
}
- babel 설정
1
npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime
- .babelrc.js 생성
1
2
3
4
5
6
module.exports = {
presets: ['@babel/preset-env'],
plugins: [
['@babel/plugin-transform-runtime']
]
}
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
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
clean: true
},
module: {
rules: [
{
test: /\.s?css$/,
use: [
'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' }
]
}),
],
devServer: {
host:'localhost',
port: 8089,
hot: true
}
}
1
npm i -D babel-loader