在 express + webpack 服务器中服务 css

Question

我真的很难在 Express + Webpack 中提供静态文件。该文件是一个普通的 css 样式表，但我无法让 html 页面加载它。

这是我当前的配置：

server.js

var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var webpackHotMiddleware = require('webpack-hot-middleware')
var config = require('./webpack.config')
var express = require('express')

var app = new express()
var port = 3005

var compiler = webpack(config)
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
app.use(webpackHotMiddleware(compiler))

// this should tell express that files located under the /public/ folder are static
app.use(express.static(__dirname + '/public'));

app.use(function(req, res) {
  res.sendFile(__dirname + '/index.html')
})

app.listen(port, function(error) {
  if (error) {
    console.error(error)
  } else {
    console.info("==>  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
  }
})

相当标准webpack.config.js:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: [ 'babel' ],
      exclude: /node_modules/,
      include: __dirname
    }]
  }
}

这是 index.html 文件中的 css 内容：

<link ref="stylesheet" type="text/css" href="/styles/style.css">

我的 style.css 文件位于 public/styles/style.css，所以我应该可以看到它，对吗？

事实上，如果我转到 http://localhost:3005/styles/style.css，该文件可用并正确提供，但是尝试通过 index.html 加载它是行不通的。似乎网络请求从未发送过。

知道如何解决这个问题吗？我是否遗漏了关于 express/webpack 的基本信息？

我也在使用 react-router，如果这可能与问题相关的话。

Answer 1

我设法修复了它：

刚刚安装了适当的 npm 包 css-loader 和 style-loader 并将适当的加载器添加到 webpack.config.js:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    alias: {
      'styles': path.join(__dirname, 'styles'),
    },
    extensions: ['', '.js', '.jsx', '.css']
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: [ 'babel' ],
      exclude: /node_modules/,
      include: __dirname
    }, {
      test: /\.css?$/,
      loaders: [ 'style-loader', 'css-loader' ],
      include: __dirname
    }]
  }
}

还值得注意的是，我将 css 文件从 public/styles 移到了 styles。

修复此问题并将适当的 import 'styles/dashboard.css' 添加到 index.js 后一切正常！从 html <link ref="stylesheet" type="text/css" href="/styles/style.css"> 加载文件是无用的，因为它捆绑在主 javascript 文件中。

在 express + webpack 服务器中服务 css

Serving css in express + webpack server

css

webserver

node.js

express

webpack