반응형
main.js가 Vue-cli 웹 팩 템플릿의 Index.html에 링크되는 방법
저도 알고 있어요.vue-cli webpack project-name이치노
main.discloss.main.discloss.
...
new Vue({
el: '#app',
render: h => h(App),
});
index.displaces를 표시합니다.
...
<head>
...
</head>
<body>
<div id="app"></div> <!-- if I change app to app1, error message states: "Cannot find element app" -->
<script src="./dist/build.js"></script>
</body>
....
그 둘은 서로 연결되어 있다.그런데 어떻게 연결되어 있을까요?build.js의 결과인 것 같습니다만, 컴파일, 미니화, uglimated 등이 되어 있기 때문에 코드를 이해할 수 없습니다.
webpack.config.js 설정은 기본 템플릿입니다.
웹 팩을 모듈 번들러로 사용하여 app.js를 index.html에 주입합니다.
비업그레이드 번들을 가져오려면 다음과 같이 웹 팩 설정을 편집합니다.
comment call plugin uglifyjs-webpack-module in build/webpack.conf.module의 ug
전에
...
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// set the following option to `true` if you want to extract CSS from
// codesplit chunks into this main css file as well.
// This will result in *all* of your app's CSS being loaded upfront.
allChunks: false,
})
...
끝나고
...
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
// new UglifyJsPlugin({
// uglifyOptions: {
// compress: {
// warnings: false
// }
// },
// sourceMap: config.build.productionSourceMap,
// parallel: true
// }),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// set the following option to `true` if you want to extract CSS from
// codesplit chunks into this main css file as well.
// This will result in *all* of your app's CSS being loaded upfront.
allChunks: false,
}),
...
또한 입력 파일의 index.displaces 이름을 foo.displaces로 변경하려면 다음 절차를 수행합니다.
build/webpack.syslog.conf.syslog의 행 68이 변경됨
template: 'foo.html',
언급URL : https://stackoverflow.com/questions/47614787/how-does-main-js-link-to-index-html-in-vue-cli-webpack-template
반응형
'programing' 카테고리의 다른 글
| Nuxt VueJ에서 직접 소품 변환 방지 (0) | 2022.08.13 |
|---|---|
| Java의 경우 super() (0) | 2022.08.13 |
| Mixins Vuejs에서 기능을 찾을 수 없습니다. (0) | 2022.08.13 |
| Vue 어플리케이션에서 Vuex를 사용하여 대용량 데이터셋을 효율적으로 처리 (0) | 2022.08.13 |
| Vuex 모듈에서 관찰자 유형 대신 개체 값 가져오기 (0) | 2022.08.13 |