[英]webpack-dev-middleware does not compile output into folder
I'm using webpack-dev-middleware in my server to compile javascript like this:我在我的服务器中使用 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
}
}));
}
Everything works fine in development, I can include the bundles in my views.在开发中一切正常,我可以在我的视图中包含这些包。 But in production I cannot include them, because they are not build into 'dist'.
但是在生产中我不能包括它们,因为它们没有构建到“dist”中。 This folder is always empty.
此文件夹始终为空。 What do I do wrong?
我做错了什么? Does somebody has an idea?
有人有想法吗?
Best Regards Jan最好的问候简
webpack-dev-middleware
doesn't output any file. webpack-dev-middleware
不输出任何文件。 If you want to output real files, you need to use the webpack
command outside of express.如果要输出真实文件,需要在
webpack
之外使用webpack
命令。 You can put your webpack config into a seperate file, and refer to that with both your webpack
command and require it in your express script to access it.您可以将您的 webpack 配置放入一个单独的文件中,并使用您的
webpack
命令引用该文件,并在您的快速脚本中使用它来访问它。
if you want to use the in-memory bundle, you can use the streamed file like this:如果你想使用内存包,你可以像这样使用流文件:
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);
There is an available option in webpack-dev-middleware
. webpack-dev-middleware
有一个可用选项。
writeToFile
can be a boolean or a function that receives the file path and outputs an boolean. writeToFile
可以是一个布尔值或一个接收文件路径并输出一个布尔值的函数。 See the documentation here请参阅此处的文档
Here, I'm using a function so all the intermediate bundles don't get written to disk, only the whole bundle:在这里,我使用了一个函数,所以所有中间包都不会写入磁盘,只有整个包:
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.