Блог

Я использую Vue с шаблоном .vue.html/.ts /.scss. Каждая папка содержит .ts, a .vue.html и файл .scss, который становится компонентом Vue. Вместе с этим я использую 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 amp;amp; 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' amp;amp; 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:

И здесь вы можете увидеть их в Visual Studio:

Похоже, вам нужно добавить '.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 нуждается в этой настройке.