Как мне интегрировать WebPack с VS?

Question

Я несколько дней безуспешно пытался заставить WebPack автоматически создать мое Vue.js приложение SPA.Как мне нажать [F5] в VS и заставить веб-пакет автоматически делать сборку?

Startup.cs

using MyApp.Domain.Repositories;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SpaServices.Webpack;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

namespace MyApp.Api {
  public class Startup {
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices (IServiceCollection services) {
      services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
      services.AddSpaStaticFiles(config => {
        config.RootPath = "Client/dist";
      });

      services.AddSingleton<IUserRepository, InMemoryUserRepository>();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure (IApplicationBuilder app, IHostingEnvironment env, ILogger<Startup> logger) {
      if (env.IsDevelopment()) {
        app.UseDeveloperExceptionPage();
        app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
          HotModuleReplacement = true
        });
      }
      else {
        app.UseHsts();
      }

      app.UseHttpsRedirection();
      app.UseStaticFiles();
      app.UseSpaStaticFiles();
      app.UseMvc();
      app.UseSpa(spa => {});
    }
  }
}

Webpack Config

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: 'development',
  entry: { 'main': './Client/src/main.js' },
  output: {
    path: path.resolve(__dirname, 'Client/dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.html/,
        loader: 'file-loader?name=[name].[ext]'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // this will apply to both plain `.js` files
      // AND `<script>` blocks in `.vue` files
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader?cacheDirectory=true',
        options: {
          presets: ['@babel/preset-env']
        }
      },
      // this will apply to both plain `.css` files
      // AND `<style>` blocks in `.vue` files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  optimization: {
    minimizer: [new UglifyJsPlugin()]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin(),
    new UglifyJsPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

main.js(vue)

import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './site.css';
import './index.html';

import Vue from 'vue';
import App from './App.vue';

import router from './router';

new Vue({
  render: v => v(App),
  router
}).$mount('#app');

В настоящее время у меня есть расширение в VS, которое я запускаю вручную для запуска веб-пакета.Я попробовал старый шаблон Vue.js (для .NET core 2), но после большого взлома я не смог заставить его работать без MVC «Views», я хочу использовать только «Index.html» (файл по умолчанию)потому что я делаю SPA.

Также попробовал Vue-CLI, который отлично работал сам по себе, но внутри VS я столкнулся с той же проблемой.

Также попробовал https://github.com/soukoku/aspnetcore-vue это звучало многообещающе, но даже не открывало домашнюю страницу.

Answer 1

В частности, я не уверен насчет веб-пакета, но для таких вещей, как gulp и grunt, задачи будут заполняться в обозревателе задач в Visual Studio.Если у вас еще нет этого окна, перейдите в «Просмотр»> «Другие окна»> «Проводник задач».

Внутри окна в раскрывающемся списке слева перечислены различные проекты со сценариями сборки.После выбора проекта будут найдены найденные задачи.Вы можете щелкнуть правой кнопкой мыши по любому из них и перейти к «Привязкам», где у вас будут варианты: «Перед сборкой», «После сборки», «Чистая сборка» и «Открытие проекта».Просто выберите тип привязки, который вы предпочитаете, и тогда эта задача будет автоматически запускаться для этого события.

Если ваши задачи веб-пакета не включены, вам может потребоваться расширение Webpack Task Runner изМадс Кристенсен.В нем говорится, что он поддерживает VS 2015 и 2017, поэтому я предполагаю, что поддержка не является встроенной, и вам нужно будет установить ее.После этого процедура, описанная выше, должна работать без проблем.