webpack-dev-middleware无法将输出编译到文件夹中

Question

我在服务器上使用webpack-dev-middleware来编译JavaScript，像这样：

if (development){                                                          
  app.use(webpackMiddleware(webpack({                                      
     // webpack options                                                   
     // webpackMiddleware takes a Compiler object as first parameter      
     // which is returned by webpack(...) without callback.               
    entry: {                                                               
      dashboard: path.join(__dirname, 'scripts/dashboard.jsx'),            
      tasks: path.join(__dirname, 'scripts/tasks.jsx')                     
    },                                                                     
       output: {                                                            
          path: __dirname + 'dist',                                        
          filename: '[name].bundle.js',                                    
          // no real path is required, just pass "/"                       
          // but it will work with other paths too.                        
      },                                                                   
      resolve: {                                                           
        extensions: ['', '.js', '.jsx']                                    
      },                                                                   
      module: {                                                            
        loaders: [                                                         
           { test: /\.jsx$/, loader: "jsx" }                            
      ]                                                                  
      }                                                                    
  }                                                                        
  ),                                                                       
  {                                                                        
    stats: {                                                               
     colors: true                                                         
    }                                                                      
  }));                                                                     
} 

在开发环境中一切都运行良好，我可以在视图中包含这些bundle。但是在生产环境中，我无法包含它们，因为它们没有构建到“dist”文件夹中。这个文件夹始终是空的。我做错了什么吗？ 有人有想法吗？

最好的问候 Jan

- J Maushagen

Answer 1

webpack-dev-middleware 不会输出任何文件。如果您想输出实际的文件，需要在 express 之外使用 webpack 命令。您可以将 webpack 配置放入一个单独的文件中，并在您的 webpack 命令和 require 中引用它，在您的 express 脚本中访问它。

- Jeff Ling

---

这是一个插件，它强制webpack-dev-server将文件写入文件系统。https://github.com/gajus/write-file-webpack-plugin - Gajus

有一个名为webpack-dev-middleware的选项叫做writeToFile。我已经发布了一个答案，但相关文档在这里：https://webpack.js.org/configuration/dev-server/#devserverwritetodisk- - Nathan Goings

Answer 2

如果您想使用内存捆绑包，可以像这样使用流文件：

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

var compiler = webpack(require('./webpack.config.js'));

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: '/'
}));

app.use('*', function (req, res, next) {
  var filename = path.join(compiler.outputPath,'index.html');
  compiler.outputFileSystem.readFile(filename, function(err, result){
    if (err) {
      return next(err);
    }
    res.set('content-type','text/html');
    res.send(result);
    res.end();
  });
});

app.listen(3000);

- Kornelius

---

这个完美无缺，应该被接受为答案。感谢@kornelus！ - sonemonu

Answer 3

webpack-dev-middleware中有一个可用选项。

writeToFile可以是布尔值或接收文件路径并输出布尔值的函数。请参见此处的文档

在这里，我使用一个函数，以便所有中间包都不会写入磁盘，只有整个包会被写入：

const webpack = require('webpack');
const webpackconfig = require('./webpack.config.js');
const webpackMiddleware = require("webpack-dev-middleware");

function shouldWrite(filePath) {
    if (path.basename(filePath) == 'bundle.js' || path.basename(filePath) == 'bundle.js.map') {
        return true
    }
    else {
        return false;
    }
}

const webpackCompiler = webpack(webpackconfig);
const wpmw = webpackMiddleware(webpackCompiler, {
        noInfo: true,
        publicPath: webpackConfig.output.publicPath,
        writeToDisk: shouldWrite
    });

//express
app.use(wpmw); // dev-middleware

- Nathan Goings