我主要使用 .NET 应用程序来完成此操作。它仍然提供开发文件localhost:8080
但会在开发期间为您修改模板文件并将其调整回生产环境。不确定这样是否能完全解决您的问题,但目前它对我们有用,并且可能对其他人有帮助,所以无论如何我都会把它留在这里。
In package.json
我有一个启动(开发)和构建(产品)脚本:
"start": "webpack --config webpack.dev.js && webpack-dev-server --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
webpack.prod.js
只是设置mode: "production"
并与webpack.config.js
它完成了大部分 webpack 的工作,包括将文件注入到 .net 中_Layout_React.cshtml
文件,包括来自的制作脚本Scripts
文件夹:
const HtmlWebPackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
main: './src/index.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
},
{
test: /\.scss$/,
use: [
'style-loader', // creates style nodes from JS strings
'css-loader', // translates CSS into CommonJS
'sass-loader', // compiles Sass to CSS, using Node Sass by default
],
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: '../../../Views/Shared/_Layout_Template.cshtml',
filename: '../../Views/Shared/_Layout_React.cshtml',
}),
new webpack.HashedModuleIdsPlugin(),
],
output: {
path: path.resolve(__dirname, '../../../Scripts/React/'),
publicPath: '/Scripts/React/',
filename: '[name].[contenthash].production.js',
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
},
},
},
},
};
当我跑步时npm run build
这构建了生产_Layout_React.cshtml
应用程序中使用的模板,包含文件系统中的文件。然而,当我跑步时npm start
它改变了_Layout_React.cshtml
包含文件的模板localhost:8080
这就是webpack-dev-server
正在运行并提供来自以下位置的监视文件:
webpack.dev.js
:
const merge = require('webpack-merge');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
const baseConfig = require('./webpack.config.js');
module.exports = merge(baseConfig, {
mode: "development",
devtool: 'eval-source-map',
devServer: {
open: false,
},
output: {
filename: '[name].development.js',
publicPath: 'http://localhost:8080/dist/',
},
});
现在当我跑步时npm start
然后运行 .NET 应用程序,我得到 .NET 应用程序localhost:33401
但它正在从中获取反应文件localhost:8080
并在保存时自动编译它们,并在需要推送到我运行的存储库时自动编译它们npm run build
并将这些文件构建成 .NET 中的硬文件Scripts
文件夹并更新模板以反映这一点。