웹팩 멀티 번들관리
(https://webpack.js.org/guides/output-management/ - 번역)
1. 멀티 번들처리
- 프로젝트 규모가 증가 할 수록 많은 수에 번들파일이 생성된다. 웹팩은 이런 번들 파일을 index.html 에서 관리하는 방법을 제공한다.
2. 멀티 번들 설정
1) project
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
+ |- print.js
|- /node_modules2) print.js
export default function printMe() {
console.log('I get called from print.js!');
}3) index.js
import _ from 'lodash';
+ import printMe from './print.js';
function component() {
var element = document.createElement('div');
+ var btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ btn.innerHTML = 'Click me and check the console!';
+ btn.onclick = printMe;
+
+ element.appendChild(btn);
return element;
}
document.body.appendChild(component());4) index.html
<!doctype html>
<html>
<head>
- <title>Asset Management</title>
+ <title>Output Management</title>
+ <script src="./print.bundle.js"></script>
</head>
<body>
- <script src="./bundle.js"></script>
+ <script src="./app.bundle.js"></script>
</body>
</html>- 엔트리 포인트에 따라 번들해야될 js 가 생성된다. 그리고 이 파일들을 임포트한다.
5) webpack.config.js
const path = require('path');
module.exports = {
- entry: './src/index.js',
+ entry: {
+ app: './src/index.js',
+ print: './src/print.js'
+ },
output: {
- filename: 'bundle.js',
+ filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};- 엔트리 포인트를 설정하여 각각의 번들을 생성하고 관리할 수 있다.
- 문제점: 만약 엔트리 포인트이름을 변경하거나 새로운 엔트리가 생기게 된다면 어떻게 될까?? index.html 파일에는 기존에 있던 파일을 그대로 참조하고 있다. 일일이 수정해야되는 번거로움이 있다.
HtmlWebpackPlugin
1. HtmlWebpackPlugin 이란?
- 위의 문제점보완 하고자 webpack에서 제공하는 플러그인이다.
- 해당 플러그인을 설치하면 변하는 엔트리포인트에 대하여 개발자가 index.html의 js 파일 참조를 수정할 필요 없다
2. 설치
npm install --save-dev html-webpack-plugin3. webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Output Management'
+ })
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
} CleanWebpackPlugin
1. CleanWebpackPlugin
- 프로젝트를 진행하다보면 dist의 사용하지 않는 파일들이 존재한다. 이런 파일들을 자동으로 정리(제거)해준다.
2. 설치
npm install clean-webpack-plugin --save-dev3. webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
+ new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};'Tools > webpack' 카테고리의 다른 글
| [webpack] 웹팩의 로더사용(webpack Loader) (0) | 2018.06.20 |
|---|---|
| [webpack] 웹팩 기본 사용법 - webpack HelloWorld (0) | 2018.05.15 |
리딩리드