node.js – Bitte sagen Sie mir, Lehrer, wie können die vom Webpack-Server im Entwicklungsmodus gepackten Dinge vom Express-Server verwendet werden? ? ?

Question

Ich habe gerade einen Technologie-Stack wie Express kennengelernt und möchte etwas mit Blog-ähnlichen Funktionen entwickeln. Bevor ich dies tat, dachte ich, dass im Entwicklungsmodus von Webpack die gepackten Ressourcen standardmäßig unter dem Webpack-Server-Port liegen würden und die von Express benötigten Ressourcen standardmäßig unter dem 3000-Port liegen würden Ich weiß nicht, wie man es im Entwicklungsmodus verpackt. Ressourcen werden von Express-Servern verwendet. . . Wie im Bild unten gezeigt:

Der erste ist der Webpack-Konfigurationsteil:

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

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports={
    devtool: 'eval-source-map',
    entry: {
        index: [
            'webpack-hot-middleware/client',
            './public/javascripts/entry.js'
        ],
        vendor: ['react', 'jquery']
    },
    output:{
        path: path.resolve(__dirname,'./build'),
        filename:'bundle.js',
        publicPath: 'views'  
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets:['es2015', 'stage-0', 'react'],
                    plugins: [
                        ['import', {libraryName: 'antd', style: 'css'}]
                    ]
                }
            },
            {
                test: /\.css$/, 
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            },
            {
                test: /\.scss$/, 
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!sass-loader'
                })
            },
            {
                   test: /\.(png|jpg)$/, 
                loader: 'url-loader?limit=8192'
            }
        ]
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(), 
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin('style.css'),
        new CommonsChunkPlugin({
           name: 'vendor',
           filename: 'vendor.js'
        })
    ]
}

Dann habe ich eine kleine Testfunktion geschrieben, die darin besteht, eine Schaltfläche auf der Seite zu rendern, und nach dem Klicken wird eine Meldung angezeigt. Der Zugriff erfolgt über den Standardport 8080 des Webpack-Servers:

Unter dem Express-Server-Port 8181 gibt es jedoch nichts

Mit anderen Worten, style.css, seller.js und bundle.js befinden sich alle unter dem 8080-Port von Webpack.
Das Folgende ist das Projektverzeichnis, der Serverdateiteil und index.html

Answer 1

咦，我的名字带学长，我也来答答。有人说了解决方案，我来说说为什么。

webpack在开发模式下，打包的资源会默认在webpack服务器端口下

根据你描述的开发模式，应该不是编译打包(build)，估计是npm run dev。这时候并没有真正编译出文件，而是保存在了内存中。所以你的views目录下，其实并没有真正的文件。

这种情况下，你的express压根就找不到文件。

Answer 2

你需要express中间件：
webpack-dev-middleware
如果需要热更新的话，还有另一个：
webpack-hot-middleware