(React)与webpack同构的webapp的服务器部分,包括CSS的样式加载器

我正在尝试使我正在开发的React应用程序是同构的。 这样做的一个已知的问题是,webpack加载器允许import/require非JavaScript资产,如CSS文件。 例如

 // ExampleComponent.jsx import Select from 'react-select'; import 'react-select/dist/react-select.css'; 

如果使用Express构build应用程序,则节点将获取到此导入,并因为无法处理CSS文件而失败,因此仅期望JavaScript(并且感谢babel-register JSX)。

其中一个解决方法是在构build服务器端应用程序(包括所有通用部分,如组件,因为它是一个同构应用程序)时,使用webpack中的target: 'node'选项来构build服务器端代码。 这应该会导致server.js被构build,然后可以由节点运行。

注:我知道还有其他的方法来解决这个问题(比如不使用import/require来包含任何不是javascript的东西,但是在这个应用程序开发的这个阶段是不实际的。

 // webpack.config.js var webpack = require('webpack'); var path = require('path'); module.exports = [ // Client build { entry: { 'bundle.min': [ 'bootstrap-webpack!./bootstrap.config.js', 'babel-polyfill', './client/index.jsx' ], 'bundle': [ 'bootstrap-webpack!./bootstrap.config.js', 'babel-polyfill', './client/index.jsx' ] }, output: { path: './dist', filename: '[name].js' }, plugins: [ new webpack.optimize.UglifyJsPlugin({ include: /\.min\.js$/, minimize: true }) ], module: { loaders: [ { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/, query: { plugins: ['transform-runtime'], presets: ['react', 'es2015', 'stage-0'] } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { plugins: ['transform-runtime'], presets: ['es2015', 'stage-0'] } }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.png$/, loader: "url-loader?limit=100000" }, // Bootstrap { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' }, { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' } ] }, resolve: { extensions: ['', '.js', '.jsx', '.json'] } }, // Server build { entry: './server/server.jsx', target: 'node', node: { console: false, global: false, process: false, Buffer: false, __filename: false, __dirname: false, }, output: { path: './dist', filename: 'server.js', }, module: { loaders: [ { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/, query: { plugins: ['transform-runtime'], presets: ['react', 'es2015', 'stage-0'] } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { plugins: ['transform-runtime'], presets: ['es2015', 'stage-0'] } }, { test: /\.json$/, loader: 'json-loader' }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.png$/, loader: "url-loader?limit=100000" }, // Bootstrap { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' }, { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' } ] }, resolve: { extensions: ['', '.js', '.jsx', '.json'] } } ]; 

问题在于,样式加载器使用了在节点环境中显然不存在的window

 $ node dist/server.js /Users/dpwrussell/Checkout/ExampleApp/dist/server.js:25925 return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase()); ^ ReferenceError: window is not defined 

从这里风格加载器。

感觉就像我非常接近做这个工作,所以任何想法都会受到欢迎。

Solutions Collecting From Web of "(React)与webpack同构的webapp的服务器部分,包括CSS的样式加载器"

答案并不是在你的服务器构build中使用style-loader :它的唯一目的是把CSS变成一个<style>元素,并把它插入到DOM中。 大多数人似乎使用ExtractTextPlugin来收集他们的CSS包含在服务器端。