min*_*ism 5 javascript webpack vue.js vuejs2
我注意到vue-cli webpack project-name模板加载了这些代码。
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>
....
两者链接在一起。但是，它们如何链接？它似乎是build.js的结果，但是我无法理解代码，因为它已被编译，缩小，丑化等等。
我的webpack.config.js设置是默认模板。
小智 0
您的项目使用Webpack作为模块打包器 - 它将 app.js 注入到 index.html 中
要获得非丑化的包，请像这样编辑 Webpack 设置：
在build/webpack.prod.conf.js中注释调用插件uglifyjs-webpack-plugin
前
...
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.html 名称更改为 foo.html，您可以在此处执行此操作：
build/webpack.prod.conf.js中的第 68 行更改为
template: 'foo.html',
| 归档时间： |
|
| 查看次数： |
2903 次 |
| 最近记录： |