我在用react服务端渲染开发项目,开发环境起了两个服务:一个是webpack,一个是node server;
webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const Webpack_isomorphic_tools_plugin = require('webpack-isomorphic-tools/plugin');
const path = require('path');
const webpack_isomorphic_tools_plugin =
new Webpack_isomorphic_tools_plugin(require('./webpack-isomorphic-tools-configuration'))
.development()
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: `${__dirname}/../client/index.html`,
filename: 'index.html',
inject: true
});
module.exports = {
context: path.join(__dirname,'..'),
entry:[
'webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr',
'./client/index.js'
],
output:{
path: `${__dirname}/../dist`,
publicPath: 'http://localhost:3001/public/',
filename: '[name].[hash].js'
},
module: {
loaders: [
{
test:/\.jsx?$/,
loaders: ["react-hot-loader","babel-loader"],
exclude: /node_modules/
},
{
test:/\.css$/,
loaders: ['style-loader','css-loader']
},
{
test:/\.scss$/,
loaders: ['style-loader','css-loader','sass-loader']
},
/*
{
test:/\.less$/,
loaders: ['style-loader','css-loader','less-loader']
}*/
{
test: webpack_isomorphic_tools_plugin.regular_expression('images'),
loader: 'url-loader?limit=10240', // any image below or equal to 10K will be converted to inline base64 instead
}
]
},
plugins: [
HtmlWebpackPluginConfig,
webpack_isomorphic_tools_plugin,
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.BannerPlugin("This file is created by Luo Xia")
]
}
node server:
const Webpack_isomorphic_tools = require('webpack-isomorphic-tools')
const project_base_path = require('path').join(__dirname, '..')
global.webpack_isomorphic_tools = new Webpack_isomorphic_tools(require('../webpack/webpack-isomorphic-tools-configuration'))
.server(project_base_path)
.then(()=>{
require('./app');
})
这是没问题的,然后最后我想生产了,不知道如何打包才行,我使用 webpack --config webpack/webpack.config.js
打包后,再在服务端渲染中引入,结果总是报错:
p\workspace\redux\node_modules\.npminstall\antd\2.7.0\antd\lib\style\index.css:10
html {
^
SyntaxError: Unexpected token {
整个项目的代码:https://github.com/laoqiren/i...
可以看出,webpack并没有正常引入静态资源问题,请问应该怎么解决呢?谢谢
你的问题解决了吗