Vue.js 빌드 환경 구축 시 기본적으로 webpack 빌드를 사용하고 webpack.config.js 설정이 필요하다.
기본적인 모습은 다음과 같다.
module.exports = {
mode: 'development',
resolve: {
extensions: ['.js', '.vue']
},
module: {
rules: [
{
test: /\.vue?$/,
loader: 'vue-loader'
},
{
test: /\.js?$/,
loader: 'babel-loader'
}
]
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'@': path.resolve(__dirname, 'src/'),
}
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' })
],
devServer: {
historyApiFallback: true
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:4000'
})
}
}
HtmlWebpackPlugin
html 파일을 템플릿으로 생성할 수 있게 도와주는 플러그인이다.
plugins: [
new HtmlWebpackPlugin({
template:'./source/index.html',
filename:'./index.html'
})
]그러면 우리가 지정한 index.html 을 기준으로 html 이 생성된다.
index.html 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js - Role Based Authorization Tutorial & Example</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/4.2.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
a { cursor: pointer; }
</style>
</head>
<body>
<div id="app"></div>
<!-- credits -->
<div class="text-center">
<p>
<a href="http://jasonwatmore.com/post/2019/03/08/vuejs-role-based-authorization-tutorial-with-example" target="_top">Vue.js - Role Based Authorization Tutorial & Example</a>
</p>
<p>
<a href="http://jasonwatmore.com" target="_top">JasonWatmore.com</a>
</p>
</div>
</body>
</html>
index.js 예제
import Vue from 'vue';
import Vuelidate from 'vuelidate';
import { router } from './_helpers';
import App from './app/App';
// setup fake backend
import { configureFakeBackend } from './_helpers';
configureFakeBackend();
Vue.use(Vuelidate);
new Vue({
el: '#app',
router,
render: h => h(App)
});=> new Vue에 el: '#app' element가 위에서 지정한 index.html의 <div id="app"></div> 에 맵핑 된다.
- chunks
이 옵션은 자동으로 생성된 index.html 이 특정 bundle.js 만 로드할 수 있게 지정할 수 있다.
템플릿에 여러개의 bundle.js 가 로드되어 있더라도, chunks 을 통해 특정 bundle.js 만 로드할 수 있다.
plugins: [
new HtmlWebpackPlugin({
template:'./source/index.html',
filename:'./index.html',
chunks:['index']
}),
new HtmlWebpackPlugin({
template:'./source/about.html',
filename:'./about.html',
chunks:['about']
})
]'Frontend Development > Vue.js' 카테고리의 다른 글
| [Vue.js] 자식 component height 알아내기, method 호출하기 (0) | 2022.04.01 |
|---|---|
| [Vue.js] vue-router hash 모드 vs history 모드 (0) | 2022.03.17 |
| [Vue.js] Storybook custom webpack, preview 추가 (0) | 2022.02.21 |
| [Vue.js] Karma로 Unit 테스트 시 특정 폴더 제외 하기 (0) | 2022.02.14 |
| [Vue.js] vue 용 Storyboard 설치하기 (0) | 2022.02.14 |
