javascript - 将 webpack Assets 提供给 ASP.NET 应用程序？

Question

我为这个 ASP.NET 4 项目做前端(我对 .NET 几乎一无所知)，当我按 F5 或 Ctrl-F5 时，应用服务是 http://localhot:52724 上的 Index.cshtml|但是我的 webpack 配置在 http://localhost:8000 上提供 Assets 当我运行 npm start 时。它是一个 React 前端。

在 index.cshtml 文件中，如果我使用以下内容引用我的 JS，一切都很好。

<script src="http://localhost:8000/assets/app.js"></script>

但我更愿意把它当作

<script src="assets/app.js"></script>

如果可能，在同一个端口上。或者也许有更好的方法？

这是 base.js(在 webpack.config.js 中导入)

'use strict';

var path = require('path');
var port = 8000;
var srcPath = path.join(__dirname, '/../src');
var publicPath = '/assets/';

var additionalPaths = [];

module.exports = {
    additionalPaths: additionalPaths,
    port: port,
    debug: true,
    output: {
        path: path.join(__dirname, '/../dist/assets'),
        filename: 'app.js',
        publicPath: publicPath
    },
    devServer: {
        contentBase: './src/',
        historyApiFallback: true,
        hot: true,
        inline: true,
        port: port,
        publicPath: publicPath,
        noInfo: false
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
        alias: {
            actions: srcPath + '/actions/',
            components: srcPath + '/components/',
            sources: srcPath + '/sources/',
            stores: srcPath + '/stores/',
            styles: srcPath + '/styles/',
            config: srcPath + '/config/' + process.env.REACT_WEBPACK_ENV
        }
    },
    module: {
        preLoaders: [{
            test: /\.(js|jsx)$/,
            include: srcPath,
            loader: 'eslint-loader'
        }],
        loaders: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }, {
            test: /\.sass/,
            loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
        }, {
            test: /\.scss/,
            loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
        }, {
            test: /\.less/,
            loader: 'style-loader!css-loader!less-loader'
        }, {
            test: /\.styl/,
            loader: 'style-loader!css-loader!stylus-loader'
        }, {
            test: /\.(png|jpg|gif)$/,
            loader: 'url-loader?limit=8192'
        }, {
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'url-loader?limit=10000&mimetype=application/font-woff'
        }, {
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'file-loader'
        }]
    }
};

这是 dev.js(在 webpack.config.js 中导入)

'use strict';

var path = require('path');
var webpack = require('webpack');
var _ = require('lodash');

var baseConfig = require('./base');

// Add needed plugins here
var BowerWebpackPlugin = require('bower-webpack-plugin');

var config = _.merge({
  entry: [
    'webpack-dev-server/client?http://localhost:8000',
    'webpack/hot/only-dev-server',
    './UI/src/index'
  ],
  cache: true,
  devtool: 'eval',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new BowerWebpackPlugin({
      searchResolveModulesDirectories: false
    }),
    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    })
  ]
}, baseConfig);

// Add needed loaders
config.module.loaders.push({
  test: /\.(js|jsx)$/,
  loader: 'react-hot!babel-loader',
  include: [].concat(
    config.additionalPaths,
    [ path.join(__dirname, '/../src') ]
  )
});

module.exports = config;

和 server.js 文件

/*eslint no-console:0 */
require('core-js/fn/object/assign');
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
var open = require('open');

new WebpackDevServer(webpack(config), config.devServer)
.listen(config.port, 'localhost', function(err) {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:' + config.port);
  //console.log('Opening your system browser...');
  //open('http://localhost:' + config.port);
});

Answer 1

你可以看看我正在处理的这个来源

// 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 创建一个服务器来为 Assets 提供服务并使其与 HRM 插件一起工作。还有一个 ASP.NET 的代理来获取 HTML 和 Controller 响应。

// 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}`));
});

这是 repo该项目尚未完成，但代理功能运行良好。

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

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