Startup.cs

Question

我已经尝试了几天没有成功使WebPack自动构建我的Vue.js SPA应用程序。如何在VS中按[F5]并让Webpack自动进行构建？

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配置

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中有一个扩展程序，可以手动运行该扩展程序以运行Webpack。我尝试了一个旧的Vue.js模板（用于.NET Core 2），但是经过大量黑客攻击，如果没有MVC“视图”，我将无法使其正常工作，我只想使用“ Index.html”（默认文件）因为我正在制作SPA。

还尝试了Vue-CLI，它本身可以很好地工作，但是在VS内部，我遇到了同样的问题。

还尝试了https://github.com/soukoku/aspnetcore-vue，听起来不错，但甚至没有启动主页。

Answer 1

我不确定Webpack，但是对于gulp和grunt这样的任务，这些任务将在Visual Studio的Task Runner Explorer中填写。如果您还没有此窗口，请转到查看>其他Windows> Task Runner Explorer。

在窗口内，左侧的下拉列表列出了带有构建脚本的各种项目。选择项目后，将列出找到的任务。您可以右键单击其中任何一个，然后转到Bindings，在这里您可以选择：Build Before，Build After，Clean Build和Project Open。只需选择您喜欢的绑定类型，然后该任务将在该事件上自动运行。

如果不包括Webpack任务，则可能需要Mads Kristensen的Webpack Task Runner extension。它说它支持VS 2015和2017，所以我的假设是该支持不是内置的，您需要安装它。完成此操作后，上面概述的步骤应该可以正常工作。

如何将WebPack与VS集成？

Startup.cs

Webpack配置

main.js（vue）

1 个答案: