https://webpack.docschina.org/loaders/url-loader/
图片处理：rul loader
ES6->ES5
https://webpack.docschina.org/loaders/babel-loader/
new Vue({
el:'#app',
data:{
message:'123'
},
template:`
<div>
<div>
test
</div>
<button class="test">123</button></div>
`
})
<body>
<div id="app">
</div>
<script src="./dist/bundle.js"></script>
//导入必须放在app后面不然识别不到
</body>
const app = {
template: `
<div>
<div>
test
</div>
<button class="test">123</button></div>
`,
data() {
return { message: '123' }
}
}
new Vue({
el: '#app',
template: '<app/>',
components: {
app
}
})
export default {
template: `
<div>
<div>
test
</div>
<button class="test">123</button></div>
`,
data() {
return { message: '123' }
}
}
new Vue({
el: '#app',
template: '<app/>',
components: {
app
}
})
npm install vue-loader vue-template-compiler --save-dev
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
}
]
}
在package.json中查看自己webcpack版本是不是 ^ 4.x，如果是，安装[email protected]即可。
npm install [email protected]
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。