Node.js 如何使用网页包开发服务器设置节点?
我想将所有/捆绑URL代理到webpack dev服务器 我听从了这家公司的建议,它也做了同样的事情 但是,我仍然看不到本地主机提供的公共文件:8081/bundle?愚蠢的是,我有另一个项目不是基于react的,它工作得很好,但它只是说: 无法获取/绑定/ 访问本地主机时:8081/捆绑 如果你能指出我遗漏了什么,我将非常感激。这一定是件傻事,因为我知道这一定会奏效。 以开发模式工作 这是我的网页配置Node.js 如何使用网页包开发服务器设置节点?,node.js,webpack,webpack-dev-server,Node.js,Webpack,Webpack Dev Server,我想将所有/捆绑URL代理到webpack dev服务器 我听从了这家公司的建议,它也做了同样的事情 但是,我仍然看不到本地主机提供的公共文件:8081/bundle?愚蠢的是,我有另一个项目不是基于react的,它工作得很好,但它只是说: 无法获取/绑定/ 访问本地主机时:8081/捆绑 如果你能指出我遗漏了什么,我将非常感激。这一定是件傻事,因为我知道这一定会奏效。 以开发模式工作 这是我的网页配置 'use strict'; var webpack = require('webpack')
'use strict';
var webpack = require('webpack');
const autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CompressionPlugin = require('compression-webpack-plugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
let getPlugins;
var isProd = (process.env.NODE_ENV === 'production');
console.log("Production: " + isProd);
let entryFill = null;
let publicPathFill = null;
if (isProd) {
entryFill = {
bootstrap: ['bootstrap/dist/css/bootstrap.css', 'bootstrap/dist/js/bootstrap.js'],
index: ['./src/bundle/index.tsx'],
vendor: ['react', 'react-dom', 'jquery', 'jquery-ui-bundle', "redux-thunk", 'redux', 'react-redux']
}
publicPathFill = "./dist/assets/bundle";
getPlugins = function () {
return [
new SWPrecacheWebpackPlugin(
{
cacheId: 'cleaning-website',
filename: 'service-worker.js',
maximumFileSizeToCacheInBytes: 4194304,
runtimeCaching: [{
handler: 'cacheFirst',
urlPattern: /[.]js$/
}],
}
),
new ExtractTextPlugin("site.css"),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
//new webpack.optimize.DedupePlugin(),
//new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
//new webpack.optimize.AggressiveMergingPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
//new CompressionPlugin({
// asset: "[path].gz[query]",
// algorithm: "gzip",
// test: /\.js$|\.css$|\.tsx$/,
// threshold: 10240,
// minRatio: 0.8
//})
]
}
} else {
entryFill = {
bootstrap: ['bootstrap/dist/css/bootstrap.css', 'bootstrap/dist/js/bootstrap.js', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8081'],
index: ['./src/bundle/index.tsx', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8081'],
vendor: ['react', 'react-dom', 'jquery', 'jquery-ui-bundle', "redux-thunk", 'redux', 'react-redux', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8081']
}
publicPathFill = "http://localhost:8081/bundle/",
//publicPathFill = "/",
getPlugins = function () {
return [
new ExtractTextPlugin("site.css"),
new webpack.HotModuleReplacementPlugin()
]
}
}
module.exports = {
/**
* Entry for all client side code.
* @var {object} entry
*/
entry: entryFill,
plugins: getPlugins(),
output: {
path: publicPathFill,
filename: '[name].js',
libraryTarget: 'umd'
publicPath: 'http://localhost:8081/bundle/'
},
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
//alias: {
// 'react': 'preact-compat',
// 'react-dom': 'preact-compat',
// 'react-router': 'preact-compat'
//}
},
module: {
loaders: [
// { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url?limit=10000!img?progressive=true'},
{ test: /\.css$/, loader: "style-loader!css-loader" },
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
//Need:?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5] to set the right name for each css!
"style",
"css!postcss-loader!sass")
},
// { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
{ test: /\.tsx?$/, loader: "ts-loader" },
{
test: /\.(pug|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader'
}
]
},
postcss: function () {
return [autoprefixer(
// { browsers: ['ie 10', 'firefox 20', 'safari 9.1','Chrome ] }
{ browsers: ['> 0%'] }
)];
}
};
在节点中运行的Web包开发服务器如下所示:
import * as express from 'express';
import * as path from 'path'
let webpack = require('webpack');
let WebpackDevServer = require('webpack-dev-server');
let proxy = require('proxy-middleware');
let url = require('url');
let config = require('../../../webpack.config.js');
import { post } from "./post";
import { pages } from "./pages";
module.exports = function (app: any, passport: any) {
var router = express.Router();
post(router, passport);
pages(router);
if (process.env.NODE_ENV === 'development') {
let base = path.join(__dirname, "..", "..", "assets");
console.log("Base : " + base);
//console.log(__dirname);
let server = new WebpackDevServer(webpack(config), {
//contentBase: base,
hot: true,
quiet: false,
noInfo: false,
publicPath: "/bundle/",
stats: { colors: true }
});
server.listen(8081, "localhost", function () { });
app.use('/bundle', proxy(url.parse('http://localhost:8081/bundle')));
}
app.use('/', router);
};
我为html页面提供如下服务:
import { createStore, bindActionCreators, applyMiddleware } from 'redux';
import { routerReducer } from 'react-router-redux'
import thunkMiddleware from 'redux-thunk'
import * as path from 'path'
import * as fs from "fs";
import { Routes, Navigation, RootReducer } from "../../client/index";
export function pages(router) {
router.get('/*', function (req: any, res: any, next) {
let initial = {};
const store = createStore(RootReducer, initial, applyMiddleware(thunkMiddleware))
const body = ReactDOMServer.renderToString(
<Provider store={store}>
<StaticRouter location={req.url}>
<Routes/>
</StaticRouter>
</Provider>
)
//const nav = ReactDOMServer.renderToString(
// <Navigation/>
//)
const nav = ReactDOMServer.renderToString(
<div> Nav</div>
)
console.log("Body:");
console.log(body);
//const state = store.getState()
const state = {};
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clement Cleaning</title>
<meta name="description" content="A cleaning business">
<meta name="author" content="Mortonproductions">
<script src="/bundle/bootstrap.js"></script>
<link rel="stylesheet" href="/bundle/site.css">
</head>
<body>
<header>
<h1>
Clement Cleaning
</h1>
<h2>
A cleaning business based in Loch Lomond
</h2>
</header>
<nav>
<div id="react-nav">${nav}</div>
</nav>
<section>
<div id="react-router">${body}</div>
</section>
<footer>
Progressive web app produced my morton productions
</footer>
<script>window.__REDUX_STATE__ = ${JSON.stringify(state)}</script>
<script src="/bundle/vendor.bundle.js"></script>
<script src="/bundle/index.js"></script>
</body>
</html>`
)
});
}
从'redux'导入{createStore,bindActionCreators,applyMiddleware};
从“react router redux”导入{routerReducer}
从“redux thunk”导入thunk中间件
从“路径”导入*作为路径
从“fs”导入*作为fs;
从“./../client/index”导入{Routes,Navigation,RootReducer}”;
导出功能页(路由器){
get('/*',函数(req:any,res:any,next){
让initial={};
const store=createStore(RootReducer、initial、applyMiddleware(thunkMiddleware))
const body=ReactDOMServer.renderToString(
)
//const nav=ReactDOMServer.renderToString(
//
//)
const nav=ReactDOMServer.renderToString(
导航
)
控制台日志(“正文:”);
控制台日志(主体);
//const state=store.getState()
const state={};
res.send(`
清洁剂
清洁剂
一家位于洛蒙湖的清洁企业
${nav}
${body}
渐进式网络应用制作了我的莫顿作品
窗口。\uuuu REDUX\u STATE\uuuuu=${JSON.stringify(STATE)}
`
)
});
}