Я использую веб-пакет для создания простого проекта в main.js
. Если я использую import
для импорта app.js
, результат работает хорошо. Однако, если я использую require
, шаблон vue не будет отображаться на странице.
Я думал, что Babel компилирует import
в require
; если да, то почему require
здесь не работает?
Результат использования require:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--function(e,n,r,o){return Fe(t,e,n,r,o,!0)}-->
<h1>123</h1>
</body>
</html>
index. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<h1>123</h1>
</body>
</html>
main. js
const Vue = require("vue");
const router = require('vue-router')
// const app = require('./app.vue')
import app from './app.vue'
new Vue({
el: "#app",
data: {},
render: el => el(app),
// router
})
webpack.config. js
const htmlPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.join(__dirname, "./src/main.js"),
output: {
path: path.join(__dirname, "./dist"),
filename: "bundle.js"
},
module: {
rules: [
{ test: /\.js$/, use: "babel-loader", exclude: /node_modules/ },
{ test: /\.vue$/, use: "vue-loader" }
]
},
plugins: [
new htmlPlugin({
minify: {
removeAttributeQuotes: true
},
hash: true,
template: "./src/index.html"
})
],
resolve: {
// extensions: [ '.vue'],
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
};
app. js
<template>
<div class="app-contianer">
<h1>test</h1>
</div>
</template>
<script>
export default {
data () {
return {
};
}
}
</script>
<style lang="css" scoped>
</style>