将 webpack 资产提供给 ASP.NET 应用程序

你可以看看我正在研究的这个来源

// webpack.config.js
var webpack = require('webpack');
var extractTextPlugin = require('extract-text-webpack-plugin');
var clean = require('clean-webpack-plugin');
var webpackStrip = require('strip-loader');
var path = require('path');
var IS_DEBUG = process.env.NODE_ENV !== 'production';
var webpackConfig = {
  entry: {
    home: [
      './src/entries/home',
      './src/styles/entries/home'
    ],
    vendor: [
      // Styles
      'bootstrap/dist/css/bootstrap',
      './src/styles/core',
      // Scripts
      'bootstrap',
      'jquery'
    ],
  },
  output: {
    path: __dirname + '/bundles',
    filename: '[name].js',
    publicPath: '/Content/bundles/'
  },
  resolve: {
    extensions: ['', '.js', '.css', '.scss']
  },
  module: {
    loaders: [
      {
        test: /'.js$/,
        loader: 'babel',
        exclude: /(node_modules|bower_components)/,
        cacheable: true,
        query: {
          presets: ['es2015'],
          retainLines: true,
          cacheDirectory: true
        }
      },
      { test: /'.js$/, loader: 'eslint-loader', exclude: /(node_modules|bower_components)/ },
      { test: /'.css$/, loaders: ['style', 'css'] },
      {
        test: /'.scss$/,
        loaders: ['style', 'css', 'sass'],
      },
      { test: /'.woff2?('?v='d+'.'d+'.'d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /'.ttf('?v='d+'.'d+'.'d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /'.eot('?v='d+'.'d+'.'d+)?$/, loader: "file" },
      { test: /'.svg('?v='d+'.'d+'.'d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
    ]
  },
  sassLoader: {
    includePaths: ['./src/styles'],
  },
  devtool: IS_DEBUG ? 'cheap-source-map' : 'source-map',
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      'window.jQuery': 'jquery'
    }),
    new webpack.optimize.CommonsChunkPlugin(
      'vendor', '[name].js'
    )
  ]
};
if (IS_DEBUG) {
  webpackConfig.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  );
  Object.keys(webpackConfig.entry).forEach(function(item) {
    if (item === 'vendor') {
      webpackConfig.entry[item].unshift('webpack/hot/dev-server');
    } else {
      webpackConfig.entry[item].unshift('webpack-hot-middleware/client');
    }
  });
}
// Production
if (!IS_DEBUG) {
  webpackConfig.plugins.push(
    new clean(['bundles']),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new extractTextPlugin("[name].css")
  );
  webpackConfig.module.loaders.forEach(function(item) {
    if (item.test.test('.scss')) {
      delete item.loaders;
      item.loader = extractTextPlugin.extract('css!sass');
    }
    if (item.test.test('.css')) {
      delete item.loaders;
      item.loader = extractTextPlugin.extract('css')
    }
  });
  webpackConfig.module.loaders.unshift(
    { test: /'.js$/, loader: webpackStrip.loader('debug', 'console.log') }
  );
}
module.exports = webpackConfig;

我正在创建一个带有hapijs的服务器来为资产提供服务并使其与HRM插件一起工作。此外，还有一个代理供 ASP.NET 获取 HTML 和控制器响应。

// webpack-dev-server.js
import { Server } from 'hapi';
import H2o2 from 'h2o2';
import yargs from 'yargs';
import Webpack from 'webpack';
import WebpackPlugin from 'hapi-webpack-plugin';
import webpackConfig from './webpack.config';
const argv = yargs.argv;
const isNumeric = n => !isNaN(parseFloat(n)) && isFinite(n);
if (!isNumeric(argv.port)) {
  console.log(`Port must be numeric`);
  process.exit(-1);
}
const compiler = new Webpack(webpackConfig);
const server = new Server();
server.connection({ host: 'localhost', port: 6789, labels: 'proxy-server' });
const assets = {
  publicPath: webpackConfig.output.publicPath,
  hot: true,
  noInfo: true,
  quiet: false,
  host: 'localhost',
  port: 6790,
  stats: {
    colors: true,
  },
};
const hot = {
  log: console.log,
  path: '/__webpack_hmr',
  heartbeat: 10 * 1000,
};
server.register([
  {
    register: H2o2,
  },
  {
    register: WebpackPlugin,
    options: { compiler, assets, hot },
  },
], error => {
  if (error) {
    return console.error(error);
  }
  server.route({
    method: ['GET', 'POST'],
    path: '/{path*}',
    handler: (request, reply) => {
      if (/^Content'/bundles'/[A-Za-z0-9'-]+'.css/.test(request.params.path)) {
        const response = reply('// This is a fake CSS content... :)');
        response.type('text/css');
        return response;
      }
      return reply.proxy({
        host: 'localhost',
        port: argv.port,
        passThrough: true,
      });
    },
  });
  server.start(() => console.log(`Server running on ${server.info.uri}`));
});

这是该项目的存储库，它尚未完成，但代理功能运行良好。

若要在开发模式下启动服务器，请使用 npm run build 运行npm start -- --port=[asp-net-project-port]并生成用于生产

所有输出文件都将放在Content/bundles文件夹中，因此文件home.js、vendor.js和依赖资产将在那里。然后在 razor 中，您可以将 javascript 或样式链接到该文件。