我正在使用webpack（3.6.0）作为同构反应应用程序，并且除了我的css文件中的背景图像之外，一切都正常工作。所有其他样式都工作，图像正在我的本地机器上按预期输出到我的/ dist文件夹，如果我检查，我在浏览器中看到正确的文件路径...但如果我去dev-tools中的源代码缺少这些静态文件的/ dist / client下的整个目录。我试图弄清楚同构渲染，所以老实说，我只是对服务器与客户端渲染舞蹈的内容有一点了解，最重要的是我完全没有完全围绕webpack配置。到目前为止能够解决我的方式，但这让我真正难过，任何见解将不胜感激！
computer / dist文件夹：
/dist
---- /client // client bundled
---- ---- /media // where webpack moved static stuff
---- ---- ---- image.hash.jpg // where webpack ouput img
---- ---- app.bundle.js // webpack js bundle
---- ---- style.css // webpack bundled+extracted css
---- /media // server-side webpacked media
---- index-main.html // index file
---- server.js // server-side webpack js bundle
---- style.css // server-side webpack bundled+ext css
浏览器来源（使用chrome测试）：
/localhost:port
---- /dist/client
---- ---- app.bundle.js
---- ---- style.css
目标DOM元素背景样式：
background: url(./client/media/bg.58dfa049.jpg) no-repeat center center;
webpack.config.js（客户端）：
const path = require('path'),
autoprefixer = require('autoprefixer'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
webpack = require('webpack');
module.exports = {
context: path.resolve(__dirname, './src'),
entry: {
app: './client/index.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, './dist/client/'),
publicPath: './client/',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: [/node_modules/],
use: [{
loader: 'babel-loader',
options: { presets: ['es2015', 'react'], plugins: ['transform-object-rest-spread', 'async-to-promises'] }
}],
},
//loaders for other file types can go here
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: 'file-loader',
options: {
name: 'media/[name].[hash:8].[ext]',
},
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[hash:8].[ext]',
},
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use:[
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]_[local]--[hash:base64:8]',
importLoaders: 1
},
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
}],
}),
},
]
},
plugins: [
new ExtractTextPlugin('style.css'),
new webpack.HotModuleReplacementPlugin(),
],
};
webpack.config.server.js（服务器）：
const nodeExternals = require('webpack-node-externals'),
autoprefixer = require('autoprefixer'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
path = require('path');
module.exports = {
context: path.resolve(__dirname, './src'),
entry: './server/server.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'server.js',
libraryTarget: 'commonjs',
publicPath: './server/'
},
target: 'node',
node: {
__dirname: false,
__filename: false
},
externals: nodeExternals({
modulesFromFile: true,
}),
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: [/node_modules/],
use: [{
loader: 'babel-loader',
options: { presets: ['es2015', 'react'], plugins: ['transform-object-rest-spread'] }
}],
},
//loaders for other file types can go here
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: 'file-loader',
options: {
name: 'media/[name].[hash:8].[ext]',
},
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[hash:8].[ext]',
},
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use:[
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]_[local]--[hash:base64:8]',
importLoaders: 1
},
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
}],
}),
},
]
},
plugins: [
new ExtractTextPlugin('style.css'),
],
};
css文件：
.adoptly {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.header {
background-color: #30627E;
}
.container {
/*max-width: 940px;*/
margin: 0 auto;
padding: 0;
}
.header ul {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.header .main {
font-size: 28px;
background-color: #e52364;
}
.header li {
color: #fff;
display: inline-block;
font-size: 20px;
text-align: center;
padding: 20px 30px;
margin: 0;
}
.header li a:link {
color:white;
text-decoration: none;
}
.header li a:visited {
color:white;
text-decoration: none;
}
.header li a:hover {
color:blue;
text-decoration: none;
}
.jumbotron {
background: url('../img/bg.jpg') no-repeat center center;
background-size: cover;
height: 500px;
text-align: center;
margin-bottom: 0;
}
.jumbotron .container {
max-width: 100%;
}
.jumbotron h1 {
color: #e52364;
font-weight: 700;
}
.supporting {
text-align: center;
padding: 60px 30px 80px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.supporting p {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
min-height: 80px;
}
.btn {
font-size: 16px;
border-radius: 0px;
margin: 20px auto 60px;
padding: 10px 20px;
color: #30627E;
width: 200px;
border: 1px solid #30627E;
text-transform: uppercase;
}
.footer {
color: #fff;
background-color: #e52364;
padding: 20px;
}
.copy {
padding-top: 10px;
}
.pull-right {
float: right!important;
}
.nav-pills>li {
float: left;
}
.nav li a {
color: #fff;
}
.nav-pills>li>a {
border-radius: 4px;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
@media (min-width: 992px) {
.col-md-4 {
width: 33.33333333%;
}
}
@media (max-width: 500px) {
ul li {
width: 100%;
}
}