How does main.js link to Index.html in Vue-cli webpack template
Question
I noticed vue-cli webpack project-name template loads these codes.
main.js
...
new Vue({
el: '#app',
render: h => h(App),
});
index.html
...
<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>
....
The two are linked together. However, how are they linked? It appears to be a result of build.js but I'm unable to understand the code as it has been compiled and minified, uglified etc...
My webpack.config.js settings is default template.
1 answers
solution1
0 2017-12-04 13:30:10
you project used Webpack as a module bundler - it injects app.js into index.html
to get a non-uglified bundle, edit the Webpack settings like this:
comment call plugin uglifyjs-webpack-plugin in build/webpack.prod.conf.js
before
...
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,
})
...
after
...
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,
}),
...
also if you want to change the name of index.html to foo.html of the input file you can do it here:
line 68 in build/webpack.prod.conf.js change to
template: 'foo.html',
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.