leecade / koa-webpack-middleware Goto Github PK
View Code? Open in Web Editor NEWwebpack dev&hot middleware for koa2
webpack dev&hot middleware for koa2
Looks like someone forgot to put examples in the examples directories.
If you are not going to support it? waste of space.
Getting:
/[..]/node_modules/koa-webpack-middleware/lib/devMiddleware.js:18
var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee(ctx, next) {
^
ReferenceError: regeneratorRuntime is not defined
at /[..]/node_modules/koa-webpack-middleware/lib/devMiddleware.js:18:34
at Object.exports.default [as devMiddleware] (/[..]/node_modules/koa-webpack-middleware/lib/devMiddleware.js:44:4)
at Object.<anonymous> (/[..]/server/app.js:20:28)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:425:7)
"koa-webpack-middleware": "^1.0.3",
Using require
as babel is not set up (yet) on the backend. Would that cause the issue?
const webpackMiddleware = require('koa-webpack-middleware');
app = app
.use(webpackMiddleware.devMiddleware(cfg, options))
.use(webpackMiddleware.hotMiddleware(cfg));
The browser gets a Not Found
response, the server crashes with
Error: Can't set headers after they are sent.
at validateHeader (_http_outgoing.js:504:11)
at ServerResponse.setHeader (_http_outgoing.js:511:3)
at Object.set (./node_modules/koa/lib/response.js:440:16)
at Object.proto.(anonymous function) [as set] (./node_modules/delegates/index.js:40:31)
at Object.setHeader (./node_modules/koa-webpack-middleware/lib/devMiddleware.js:29:23)
at Object.handleRangeHeaders (./node_modules/webpack-dev-middleware/lib/Shared.js:61:8)
at processRequest (./node_modules/webpack-dev-middleware/middleware.js:63:21)
at continueBecauseBundleAvailable (./node_modules/webpack-dev-middleware/lib/Shared.js:122:6)
at Array.forEach (native)
at ./node_modules/webpack-dev-middleware/lib/Shared.js:121:9
at _combinedTickCallback (internal/process/next_tick.js:95:7)
at process._tickDomainCallback (internal/process/next_tick.js:198:9)
Even though webpack says webpack: wait until bundle finished: /
I've included the middleware as follows:
app.use(devMiddleware(webpack([config]), {
watchOptions: {
aggregateTimeout: 300,
poll: true
},
historyApiFallback: true
}));
I'm using
koa-webpack-middleware@^1.0.5:
version "1.0.5"
I'd like to request refactoring to combine all of the setup between dev-middleware and hot-middleware. I've never seen an example where they aren't app.use'd in succession, and given that their options are distinct this should be a trivial refactor:
import packWare from 'koa-webpack-middleware';
app.use(packWare({
dev: // dev options,
hot: // hot options,
compiler: // optional webpack instance,
config: // optional webpack config. should look for webpack.config.js in root by default
]);
webpack
can be imported via a peerDependency entry for the webpack module in package.json
, or provided as part of the config of the middleware. This negates the need to set that portion up manually for each use of koa-webpack-middleware.
If you're open to this change, I'll put together a pull request. I'd also be happy to provide an example for Vue.js.
So I tried to convert this app to Koa2. I ran into a couple of issues.
My setup was basically 3 middleware - dev, hot and my catch all route to send the isomorphic code.
The issues I experienced was that I would either get 404 or it would dump my final html to the desktop instead of displaying it. I ended up having to modify this middleware to only accept routes that match the path (just like they have in the express module).
Unfortunately I then ran into another issue of headers being sent - I tracked it down to the script tags in my catch all route html code that call the webpack bundle.
I eventually gave up and am using the webpack dev server CLI but I would love to see a working example of what I am talking about. I could not find any examples in the wild of a single hmr/isomorphic server - everyone seems to do two servers.
Right now it is using [email protected].
[email protected] is available which has the webpack 3 support.
So need to update the webpack-dev-middleware to support webpack 3 peer dependency in koa-webpack-middleware.
if set serverSideRender to true then will be crash here
`
TypeError: Cannot set property "webpackStats" of undefined
at D:\e\goswami-site\node_modules\webpack-dev-middleware\middleware.js:196:29
at continueBecauseBundleAvailable (D:\e\goswami-site\node_modules\webpack-dev-middleware\middleware.js:94:5)
at Array.forEach (native)
at D:\e\goswami-site\node_modules\webpack-dev-middleware\middleware.js:93:8
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
`
Branch | Build failing π¨ |
---|---|
Dependency | koa |
Current Version | 2.0.0 |
Type | peerDependency |
This version is covered by your current version range and after updating it in your project the build failed.
As koa is βonlyβ a peerDependency of this project it might not break production or downstream projects, but βonlyβ your build or test tools β preventing new deploys or publishes.
I recommend you give this issue a high priority. Iβm sure you can resolve this πͺ
The new version differs by 43 commits (ahead by 43, behind by 1).
6c6aa4d
2.0.1
4e5deae
history++
6506108
package: remove publish tag
d4b3223
docs++
f191c0d
package: oops re-add babel-eslint
a7c4236
fix: add named arrow function for request and response handlers (#805)
cd02834
travis: only test node v7.6.0+
9671add
test: remove babel tests as they are no longer needed in node v7.6
df7b4ff
docs: replace the reference to co
00156df
remove unused app.name (#899)
152b6d7
Fix response.status default value documentation (#889)
8435268
Upgrade mocha (#900)
d48291f
Release 2.0.0-alpha.8
7ae9c3e
Fix malformed content-type header causing exception on charset get (#898)
2db3b1b
Fix typo for accepts(). (#863)
There are 43 commits in total. See the full diff.
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot π΄
I found it throw out an Error which shows it can't find "regenerator-runtime" when I have installed this package.
Then I found it was listed in the devDependencies.
So why not put it into the dependencies list instead?
Latest v1.0.4 published to NPM is broken and is breaking dependent projects.
The published package is missing the lib/
folder, where the main entry point is declared (lib/index.js
).
This is causing failures when importing/requiring the module.
Could you please publish a fixed version?
I want to use fileSystem like
const htmlBuffer = devMiddleware.fileSystem.readFileSync(`${config.output.path}/index.html`)
for now, I get a error like
TypeError: Cannot read property 'readFileSync' of undefined
I know that devMiddleware from koa-webpack-middleware is a wrapper function of webpack-dev-middleware, has no fileSystem property.
So could you can add this feature ? thanks.
I configured webpack middleware, when I go to index page /
all works fine, otherwise page Not Found
, how to make work dev server for all paths ?
server.js
const Koa = require('koa');
const webpack = require('webpack');
const koaWebpack = require('koa-webpack-middleware');
const path = require('path');
const fs = require('fs');
const PORT = 3000;
const app = new Koa();
const config = require('./webpack.config');
const compiler = webpack(config);
app.use(koaWebpack.devMiddleware(compiler, {
publicPath: config.output.publicPath,
historyApiFallback: true,
stats: { colors: true },
}));
app.listen(PORT, function () {
console.log(`Dev Server port: "${PORT}"`);
});
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
},
devtool: 'inline-source-map',
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif|woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader',
{
loader: 'url-loader',
options: { limit: 40000 },
},
'image-webpack-loader',
],
},
],
},
};
Fixed by adding require('babel-polyfill')
to the top of the dev server. Is it possible to add the runtime to the release version so this isn't necessary for people who don't transpile their server code?
May i ask how close to a stable release? Milestones?
I'm asking because this would be awesome to include in my http://github.com/uptownhr/hackable project but trying to get a feel for how stable it is.
thanks.
Occurs when the page is requested before the webpack finishes compiling.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.