typescript - webpack typescript 配置模板和样式需要一个loader
问题描述
我已经使用 Webpack 和 typescript 从头开始配置了一个 Vue 项目,但不明白为什么<template>
在我的 .vue 文件中添加一个元素和一个<style>
使我的 webpack 观察程序显示错误的元素时出现错误
这是我的 webpack.config.js 文件:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
}
}
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
extensions: ['.ts', '.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
解决方案
如果有人遇到同样的问题,那是因为我使用的版本我使用的vue-loader
是 v15,我需要 14 的
推荐阅读
- ios - OpenGL ES 代码可在 Android 上运行,但 glAttachShader 不能在 iOS 上运行
- javascript - 我可以在 componentDidMount 的 promise 中合法地使用 setState 吗?
- python - scrapy shell中的404响应,浏览器中的不同结果
- spring - 如何在运行时自动装配动态服务类和方法名称
- javascript - 如何将 json 数据从控制器转换为 html 以使用 ajax 数据表查看
- excel - 清除所有工作表中的所有评论
- java - 响应成功时取消调度程序执行器
- vba - 如何将文件夹中的多个文本文件导入一个工作表并固定宽度?
- html - 如何在不影响文本的情况下对 div 类中的图像进行转换?
- php - 为什么我不能写入文件?