1

webpack ドキュメントから webpack-dev-server + エクスプレス設定をコピーして貼り付けただけですが、サーバーが提供するファイルを見つけることができないため、機能しません。この設定の何が問題になっていますか?

サーバー.js

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('../webpack.config.js');
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
})); 
/*app.use('/',express.static('public')) it works when used insted of webpack dev middleware */
// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

webpack.config.js

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

const scssRules = {
    test:/\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader']
};

const jsRules = {
    test: /\.js$/,
    use: [
        {loader: 'babel-loader'}
    ]
};

module.exports = {
    entry: './js/App.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public'),
        publicPath: '/'
    },
    module: {
        rules: [
            jsRules,
            scssRules
        ]
    },
    devServer: {
        contentBase: './public'
    },  
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ],
  devtool: 'inline-source-map'
}

ファイル構造: ここに画像の説明を入力

私が見るもの： ここに画像の説明を入力

4

1 に答える 1

1

私もこの問題に遭遇しました。

webpack-dev-middleware はファイルを出力せず、代わりにメモリから提供することが判明しました。高速サーバーが物理ファイルを期待している間。

ここで、このプラグインが役立つかもしれません: https://github.com/gajus/write-file-webpack-plugin

于 2018-01-02T21:43:58.607 に答える