从Vue.js开始,我已经使用此配置建立了基本的Webpack构建:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
devServer: {
hot: true,
contentBase: path.join(__dirname, 'dist'),
host: '0.0.0.0',
port: 9000
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new webpack.HotModuleReplacementPlugin()
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
}
}
到目前为止很好,但是当我在唯一的index.js
中创建第一个组件时,在浏览器中出现此错误:
Uncaught Error: Module parse failed: Unexpected token (33:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| Vue.component('weather-display', {
| props: ['name', 'results', 'images']
> data: function () {
| return {
| name: 'My Entry',
at eval (webpack:///./src/index.js?:1)
at Object../src/index.js (main.js:1188)
at __webpack_require__ (main.js:727)
at fn (main.js:101)
at eval (webpack:///multi_(:9000/webpack)-dev-server/client?:3:18)
at Object.0 (main.js:1199)
at __webpack_require__ (main.js:727)
at main.js:794
at main.js:797
到目前为止,在文档中,关于此加载器的内容未提及,因此我有些困惑。我是否正确理解了这一点,即从上至下阅读文档时,这是我不使用任何构建系统的基本假设,而是将所有内容都放在一个HTML文件中才能正常工作?我也不想立即创建单个文件组件,现在可以使用单个Javascript文件了。是否有一种简单的方法可以在不使用vue-cli的情况下将此加载程序添加到我的Webpack中,这是我想避免的?
UPDATE:将vue-loader添加到我的Webpack配置中后,我仍然遇到相同的错误。
您需要vue-loader
插件-https://github.com/vuejs/vue-loader
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
...
module: {
...
},
plugins: [
new VueLoaderPlugin()
]
}
您可能还需要vue-template-compiler
和vue-style-loader
。