Webpack 未检测到文件更改

Question

我正在使用带有 .vue.html/.ts/.scss 模式的 Vue。每个文件夹包含一个 .ts、一个 .vue.html 和一个成为 Vue 组件的 .scss 文件。与此同时，我正在使用 Webpack。

今天，当我开始工作时，Webpack 停止检测 .vue.html 文件。它现在仅 似乎检测到 .ts 文件。这是我的 webpack 配置：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';

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

    return [{
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts', '.d.ts' ] },
        entry: {
            'main': './ClientApp/boot.ts'
        },
        module: {
            rules: [
                { test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },
                { 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: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]},
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        output: {
            path: path.join(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: 'dist/'
        },
        plugins: [
            new CheckerPlugin(),
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
                }
            }),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/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')
        ])
    }];
};

我尝试过手动运行node node_modules/webpack/bin/webpack.js --watch --progress，它似乎可以正确检测 .ts 文件中的更改，但不能正确检测 .vue.html 文件中的更改。

有人知道可能是什么原因造成的吗？

这是我的 boot.ts：

import Vue from 'vue';
import VueRouter from 'vue-router';
import CategoriesListComponent from './components/categories-list/categories-list';
import DetailsItemComponent from './components/details-item/details-item';
import ListItemComponent from './components/list-item/list-item';
import MultiViewComponent from './components/multi-view/multi-view';
import ToolsListComponent from './components/tools-list/tools-list';
import TopMenuComponent from './components/top-menu/top-menu';
import './css/site.css';
import CategoriesListViewComponent from './views/categories-list-view/categories-list-view';
import ScanView from './views/scan-view/scan-view';
import SettingsViewComponent from './views/settings-view/settings-view';
import ToolsListViewComponent from './views/tools-list-view/tools-list-view';
import ActionButtonComponent from './components/action-button/action-button';
import InputFieldComponent from './components/input-field/input-field';
import DropDownComponent from './components/drop-down/drop-down';
import NavBarComponent from './components/nav-bar/nav-bar';
import Cookies from './data/cookies';
import ActionFieldComponent from './components/action-field/action-field';
import PushTokenHandler from './native/push-token-handler';

require('devextreme/dist/css/dx.common.css')

Vue.use(VueRouter);

Vue.component('top-menu', TopMenuComponent);
Vue.component('list-item', ListItemComponent);
Vue.component('action-button', ActionButtonComponent)
Vue.component('multi-view', MultiViewComponent);
Vue.component('tools-list', ToolsListComponent);
Vue.component('tools-list-view', ToolsListViewComponent);
Vue.component('details-item', DetailsItemComponent);
Vue.component('categories-list', CategoriesListComponent);
Vue.component('categories-list-view', CategoriesListViewComponent);
Vue.component('scan-view', ScanView);
Vue.component('settings-view', SettingsViewComponent);
Vue.component('input-field', InputFieldComponent);
Vue.component('drop-down', DropDownComponent);
Vue.component('nav-bar', NavBarComponent);
Vue.component('action-field', ActionFieldComponent);

const routes = [
    { path: '/', component: require('./pages/toolbox/toolbox-page.vue.html') },
    { path: '/scan', component: require('./pages/scan/scan-page.vue.html') },
    { path: '/toolbox', component: require('./pages/toolbox/toolbox-page.vue.html') },
    { path: '/allTools', component: require('./pages/all-tools/all-tools-page.vue.html') },
    { path: '/settings', component: require('./pages/settings/settings-page.vue.html')}
];

let router = new VueRouter({
    mode: 'history',
    routes: routes,
});

router.beforeEach((to, _, next) => {
    if (to.path !== '/settings' && Cookies.getUser() === null)
        next('/settings')
    else
        next()
});

new Vue({
    el: '#app-root',
    router: router,
    render: h => h(require('./components/app/app.vue.html'))
});

PushTokenHandler.init();

这是一个示例输出：

node node_modules/webpack/bin/webpack.js --watch --progress                       0% [0] compiling
Webpack is watching the files…

[0] Hash: 4f88618dc0bfb21f1877
Version: webpack 2.7.0
Child
    Hash: 4f88618dc0bfb21f1877
    Time: 6788ms
          Asset     Size  Chunks                    Chunk Names
        main.js  1.78 MB       0  [emitted]  [big]  main
    main.js.map  2.25 MB       0  [emitted]         main
[0] Hash: f94764ec275203bd08fe
Version: webpack 2.7.0
Child
    Hash: f94764ec275203bd08fe
    Time: 877ms
          Asset     Size  Chunks                    Chunk Names
        main.js  1.78 MB       0  [emitted]  [big]  main
    main.js.map  2.25 MB       0  [emitted]         main

    ERROR in [at-loader] ./ClientApp/components/details-item/details-item.ts:5:39
        TS1005: ',' expected.

    ERROR in [at-loader] ./ClientApp/components/details-item/details-item.ts:5:5
        TS2345: Argument of type '{ props: string[]; d: any; }' is not assignable to parameter of type 'VueClass'.
      Object literal may only specify known properties, and 'props' does not exist in type 'VueClass'.

    ERROR in [at-loader] ./ClientApp/components/details-item/details-item.ts:5:39
        TS2304: Cannot find name 'd'.

    ERROR in [at-loader] ./ClientApp/components/modal/modal.ts:1:45
        TS2686: 'Vue' refers to a UMD global, but the current file is a module. Consider adding an import instead.

    ERROR in [at-loader] ./ClientApp/components/modal/modal.ts:2:4
        TS2377: Constructors for derived classes must contain a 'super' call.

当我编辑 .ts 文件时，您可以看到它更新。当我编辑任何其他文件时，什么都没有发生。

在这里您可以看到“旧”（今天未添加）.vue.html 文件显示在 Chrome 中的 Sources 中：

您可以在 Visual Studio 中看到它们：

Answer 1

您似乎需要根据documentation 将'.vue.html', '.scss' 添加到您的resolve.extensions 列表中。
摘录：

[resolve.extensions] 允许用户在导入时取消扩展：

import File from '../path/to/file';

使用它会覆盖默认数组，这意味着 webpack 将不再尝试使用默认扩展名解析模块。

确保在组件中使用 .scss 和 .vue.html 文件的扩展名，或者将它们添加到 resolve。如果你希望 import CategoriesListComponent from './components/categories-list/categories-list'; 导入一个 Vue 组件，webpack 需要这个设置。