이전 포스팅에서 ASP.NET Core 프로젝트에 NPM을 올리는 작업을 했습니다.
이 프로젝트에서 이것을 제대로 쓰려면 결국 js파일과 css(여기서는 sass)를 빌드(혹은 미니마이징)해서 웹페이지에서 사용해야 합니다.
이 포스팅은 webpack와 sass를 이용하여 js,css파일을 출력하고 MVC를 통해 이 파일을 사용하도록 하겠습니다.
[ASP.NET Core 6] ASP.NET에 NPM 세팅하기 (feat. Task Runner)
[ASP.NET Core 6] ASP.NET MVC + NPM (feat. webpack, sass)
1. 프로젝트 생성
ASP.NET Core MVC로 프로젝트를 생성한 후 이전 포스팅에서처럼 npm을 설정합니다.
package.json 설정은 다음과 같습니다.
|
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
|
{
"version": "1.0.0",
"name": "asp.net",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --progress --profile",
"watch": "webpack --progress --profile --watch",
"production": "webpack --progress --profile --mode production"
},
"devDependencies": {
"clean-webpack-plugin": "4.0.0",
"css-loader": "6.7.1",
"cssnano": "5.1.7",
"mini-css-extract-plugin": "2.6.0",
"node-sass": "7.0.1",
"postcss-loader": "6.2.1",
"sass-loader": "12.6.0",
"style-loader": "3.3.1",
"webpack": "5.72.0",
"webpack-cli": "4.9.2"
},
"dependencies": {
"lodash": "4.17.21"
}
}
|
cs |
8번 줄에 --mode production은 프로더션 빌드할 때 사용하는 설정입니다.
2. 웹 소스 만들기
테스트에 사용할 웹 소스들을 만들 겁니다.
프로젝트에 wwwroot 폴더와 src 폴더를 만듭니다.
wwwroot는 웹 소스가 들어가는 폴더고
src는 웹 소스로 만들어질 소스 파일들을 넣어둘 곳입니다.
2-1. index.js
src 폴더에 'index.js'파일을 생성하고 다음과 같이 작성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
import _ from 'lodash';
import Test01 from "./Test01.js";
function createChild()
{
var element = document.createElement('div');
let aa = _.join(['Hello', 'Webpack'], ' ');
let tempTest01 = new Test01();
aa = aa + " " + tempTest01.Msg();
element.innerHTML = aa;
return element;
}
document.body.appendChild(createChild());
|
cs |
2-2. Test01.js
테스트용 'Test01.js'를 생성합니다.
임의로 추가하 js가 잘 되는지 확인하기 위한 파일입니다.
|
1
2
3
4
5
6
7
8
|
export default function Test01()
{
}
Test01.prototype.Msg = function ()
{
return " - 테스트 입니다!!";
};
|
cs |
2-3. sass
src 폴더에 sass폴더를 만들고 'common.scss'파일을 생성합니다.
내용은 아래와 같습니다.
|
1
|
$color: #f22;
|
cs |
src/sass에 'index.scss'파일을 생성하고 아래와 같이 작성합니다.
|
1
2
3
4
|
@import 'common.scss';
body {
color: $color;
}
|
cs |
빌드를 하게 되면 'common.scss'을 임포트하고 'common.scss'에 선언된 '$color'을 가져다 쓸것이라는 것을 예상할 수 있습니다.
src/sass 'postcss.config.js'파일을 생성하고 아래와 같이 넣습니다.
|
1
2
3
4
5
6
7
|
module.exports = ({ options }) => {
const plugins = [];
if (options.env === 'production') plugins.push(require('cssnano'));
return {
plugins: plugins
};
};
|
cs |
프로덕션일때만 cssnano를 사용하겠다는 설정입니다.
2-4. webpack.config.js
웹팩 설정 'webpack.config.js'
프로젝트 루트에 '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
|
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const bundleFileName = 'bundle';
const dirName = 'wwwroot/dist';
module.exports = (env, argv) => {
return {
mode: argv.mode === "production" ? "production" : "development",
entry: ['./src/index.js', './src/sass/index.scss'],
output: {
filename: bundleFileName + '.js',
path: path.resolve(__dirname, dirName)
},
module: {
rules: [
{
test: /\.s[c|a]ss$/,
use:
[
{ loader: 'style-loader' },
{
loader: MiniCssExtractPlugin.loader,
options: { esModule: false }
},
{ loader: 'css-loader' },
{ loader: 'postcss-loader' },
{ loader: 'sass-loader' }
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: bundleFileName + '.css'
})
],
devtool: "inline-source-map",
};
};
|
cs |
이렇게 설정을 하면
development일 때는 원본을 사용하고
production일 때는 번들링 된 파일을 사용하게 됩니다.
5번 줄에서 출력할 파일이름
6번 줄에서 출력할 폴더를 설정합니다.
3. 빌드해 보기
이제 작업 러너(NPM Task Runner)를 열어서 빌드해봅시다.
경고는....일단 무시합시다 ㅎㅎㅎㅎ
에러가 나지 않았다면 'wwwroot' 폴더에 'dist'폴더가 생성되고 'bundle.css', 'bundle.js'파일이 생성됩니다.
4. 'View'에 추가하기
이제 MVC의 공통부분인 '_Layout.cshtml'을 열고 생성된 번들을 사용할 수 있도록 넣어 줍니다.
css는 다음과 같이 추가하고
|
1
|
<link rel="stylesheet" href="~/dist/bundle.css" asp-append-version="true"/>
|
cs |
자바스크립트는 다음과 같이 추가합니다.
|
1
|
<script src="~/dist/bundle.js" asp-append-version="true"></script>
|
cs |
5. 테스트해 보기
이제 실행해보면 다음과 같이 되는 것을 볼 수 있습니다.
프로덕션으로 빌드해 보기
프로덕션으로 빌드하면 출력물이 미니마이징 돼서 나옵니다.
출력이 똑같다면 잘 빌드가 된 것입니다.
마무리
예제 :
github - dang-gun/AspDotNetSamples/AspNetCoreNpmMvc/
github - dang-gun/AspDotNetSamples/AspNetCoreNpmApi/
평상시대로 백엔드 프론트엔드로 나누지 않고 MVC로 한 건.....
여기서 바로 'index.html' 만들어서 작업하면 되기 때문입니다.
예제는 둘 다 있습니다 ㅋ
