为什么 vue-loader 和 webpack-4 不起作用？

Question

I'm trying to run my own webpack-4 + vue app. with this package.json. I hope if I achieve this I can integrate it with an existing ASP.Net-Core app

{
  "name": "client-app",
  "version": "1.0.0",
  "description": "Proyecto con WebPack 4 y Vue 2",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --config webpack.config.vendor.js --mode development",
    "prod": "webpack --mode production"
  },
  "keywords": [
    "webpack-4",
    "vue-2",
    "vuetify"
  ],
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.1.5",
    "awesome-typescript-loader": "^5.2.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "base64-font-loader": "0.0.4",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "i": "^0.3.6",
    "material-design-icons-iconfont": "^3.0.3",
    "mini-css-extract-plugin": "^0.4.2",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "typescript": "^2.7.2",
    "url-loader": "^1.1.1",
    "vue-loader": "^15.4.1",
    "vue-class-component": "^6.2.0",
    "vue-style-loader": "^4.1.2",
    "style-loader": "^0.23.0",
    "vue-template-compiler": "^2.5.17",
    "webpack-md5-hash": "0.0.6",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.7",
    "webpack-hot-middleware": "^2.23.1"
  },
  "dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuetify": "^1.2.3",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.1"
  }
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const bundleOutputDir = 'dist';
const { VueLoaderPlugin } = require('vue-loader')

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);

    return [{
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: ['.js'] },
        entry: { 'main': './src/index.js' },
        module: {
            rules: [
                { test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true', loader: "unicode-loader" } } },
                // { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                { test: /\.(png|jpg|jpeg|gif|svg|woff2|woff)$/, include: /ClientApp/, use: 'url-loader?limit=25000' }
            ]
        },
        output: {
            path: path.join(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: 'dist/'
        },
        plugins: [
            new VueLoaderPlugin(),
            // new CheckerPlugin(),
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: (isDevBuild ? 'development' : 'production')
                }
            })/* ,
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./dist/vendor-manifest.json')
            }) */
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin(),
                new ExtractTextPlugin('site.css')
            ])
    }];
};

App.vue

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

I'm getting the following error:

ERROR in ./src/components/App.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <template>
|   <div class="example">{{ msg }}</div>
| </template>
@ ./src/index.js 2:0-47 11:18-30

Running this command node_modules\\.bin\\webpack --config webpack.config.js --mode development it should be able to work but it doesn't.

These are specifications:

1. node: v8.11.2
2. webpack 4.17.2
3. vuejs 2.5.17

Anything else you want to know, please tell me.

Answer 1

For anyone else that runs into this issue, newer versions of vue-loader need to be loaded in the webpack plugins section:

// Required for vue-loader v15
const VueLoaderPlugin = require('vue-loader/lib/plugin')
environment.plugins.append(
  'VueLoaderPlugin',
  new VueLoaderPlugin()
)

From https://github.com/rails/webpacker/issues/1453#issuecomment-412291197

Answer 2

It looks like you don't have a rule configured for .vue files: you have one for .vue.html files but not for just .vue files. You can just change your existing rule by removing the \\.html in order to make it work.