今天用vue，明明都按教程配置好了，但是报错。

ERROR in ./src/login.vue?vue&type=template&id=19e76240& 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.

我去官网查了一下，用了官网的教程配置好了。

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
// …
plugins: [
new VueLoaderPlugin()
]
}

# Loader 推导

现在 Vue Loader v15 使用了一个不一样的策略来推导语言块使用的 loader。

拿 <style lang=“less”> 举例：在 v14 或更低版本中，它会尝试使用 less-loader 加载这个块，并在其后面隐式地链上 css-loader 和 vue-style-loader，这一切都使用内联的 loader 字符串。

在 v15 中，<style lang=“less”> 会完成把它当作一个真实的 *.less 文件来加载。因此，为了这样处理它，你需要在你的主 webpack 配置中显式地提供一条规则：

{

module: {

rules: [

// … 其它规则

{

test: /.lessKaTeX parse error: Expected 'EOF', got '}' at position 488: …n punctuation">}̲</span>
    <sp…/,

loader: ‘babel-loader’,

exclude: file => (

/node_modules/.test(file) &&

!/.vue.js/.test(file)

)

}

# 模板预处理

v14 或更低版本使用 consolidate 来编译 <template lang=“xxx”>。v15 现在取而代之的是使用 webpack loader 为它们应用预处理器。

注意有些模板的 loader 会导出一个编译好的模板函数而不是普通的 HTML，诸如 pug-loader。为了向 Vue 的模板编译器传递正确的内容，你必须换用一个输出普通 HTML 的 loader。例如，为了支持 <template lang=“pug”>，你可以使用 pug-plain-loader ：

{

module: {

rules: [

{

test: /.pugKaTeX parse error: Expected 'EOF', got '}' at position 196: …n punctuation">}̲</span>
    <sp…/,

oneOf: [

// 这条规则应用到 Vue 组件内的 &lt;template lang="pug"&gt;

{

resourceQuery: /^?vue/,

use: [‘pug-plain-loader’]

},

// 这条规则应用到 JavaScript 内的 pug 导入

{

use: [‘raw-loader’, ‘pug-plain-loader’]

}

]

}

]

}

}

# 样式注入

现在客户端的样式注入会在最前面注入所有的样式以确保开发模式和提取模式下行为的一致性。

注意它们注入的顺序是不能保证的，所以你撰写的 CSS 应该避免依赖插入的顺序。

# PostCSS

Vue Loader v15 不再默认应用 PostCSS 变换。想要使用 PostCSS，请像配置普通 CSS 文件那样配置 postcss-loader。

# CSS Modules

CSS Modules 现在需要通过 css-loader 选项显式地配置。<style> 标签上的 module 特性仍然需要用来局部注入到组件中。

好消息是你现在可以在同一处配置 localIdentName 了：

{

module: {

rules: [

{

test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 1157: …n punctuation">}̲</span>
    <sp…/,

oneOf: [

// 这里匹配 &lt;style module&gt;

{

resourceQuery: /module/,

use: [

‘vue-style-loader’,

{

loader: ‘css-loader’,

options: {

modules: true,

localIdentName: ‘[local]_[hash:base64:5]’

}

}

]

},

// 这里匹配普通的 &lt;style&gt; 或 &lt;style scoped&gt;

{

use: [

‘vue-style-loader’,

‘css-loader’

]

}

]

}

# CSS 提取

用法和你为普通 CSS 的配置一样。示例用法在 mini-css-extract-plugin ：

{

module: {

rules: [

{

test: /.vueKaTeX parse error: Expected 'EOF', got '}' at position 187: …n punctuation">}̲</span><span cl…/,

// 或 ExtractTextWebpackPlugin.extract(...)

use: [

MiniCssExtractPlugin.loader,

‘css-loader’

]

}

]

},

plugins: [

new MiniCssExtractPlugin({

filename: ‘output.css’

})

]

}

# 服务端渲染的依赖排除

在服务端渲染中，我们通常使用 webpack-node-externals 来从服务端构建中排除 npm 依赖。如果你需要从一个 npm 依赖导入 CSS，之前的方案是使用像这样的一个白名单：

// webpack 配置

externals: nodeExternals({

whitelist: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 42: …n punctuation">}̲</span><span cl…/, /?vue&type=style/]

})

# 废弃的选项

下列选项已经被废弃了，它们应该使用普通的 webpack 模块的规则来配置：

• loader
• preLoaders
• postLoaders
• postcss
• cssSourceMap
• buble
• extractCSS
• template

下列选项已经被废弃了，它们应该使用新的 compilerOptions 选项来配置：

• preserveWhitespace (使用 compilerOptions.preserveWhitespace)
• compilerModules (使用 compilerOptions.modules)
• compilerDirectives (使用 compilerOptions.directives)

下列选项已经被改名了：

• transformToRequire (现在改名为 transformAssetUrls)