Question

无论当前的应用程序网址如何，我都无法弄清楚如何配置webpack来生成带有效网址的css。这是我的项目结构：

/theme
    /assets
        /css
        /fonts
        /images
        /js
/dist
    bundle.js
    index.html
/node_modules
/src
/test
package.json
webpack.config.js

/theme目录是一个引导主题。 css中的网址是相对的。例如：

/* /theme/assets/css/ace-fonts.css */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(../fonts/OpenSans-300.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../fonts/OpenSans-400.woff) format('woff');
}

当我访问我的应用程序时，根网址（http://localhost:8080/）或带有单个细分的网址（http://localhost:8080/about）一切正常。那些相对网址被解析为基本网址。但是，如果我在2+段网址（http://localhost:8080/some/thing）上刷新浏览器，浏览器最终会请求以下网址：

http://localhost:8080/some/db812d8a70a4e88e888744c1c9a27e89.woff

React路由器最终为url构建了正确的标记，但样式表中的url是相对的，因此破坏了。我是webpack的新手，不知道如何解决这个问题。

这是我的webpack配置：

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

var prodPlugins = [
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.optimize.UglifyJsPlugin()
];

var defaultPlugins = [
  new webpack.ProvidePlugin({
    $: "jquery", 
    jQuery: "jquery",
    "window.$": "jquery",
    "window.jQuery": "jquery"
  }),
  new webpack.HotModuleReplacementPlugin()
];

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  output: { 
    path: 'dist',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    hot: true
  },
  resolve: {
    root: path.resolve('./')
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'react-hot!babel'
      },
      { 
        test: /\.css$/, 
        loader: 'style!css!resolve-url'
      },
      { test: /\.less$/, loader: "style!css!less"},
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      { test: /\.(png|jpg)$/, loader: 'url?limit=8192' }
    ]
  },
  resolveUrlLoader: {
    absolute: true
  },
    plugins: process.env.NODE_ENV === 'production' ? prodPlugins.concat(defaultPlugins) : defaultPlugins,
};

非常感谢任何帮助。

Answer 1

我最终使用extract-text-webpack-plugin将我的css文件放在根路径上。这修复了我的css文件问题中的相对路径，但后来我注意到我的组件中引用的图像路径不正确所以根据@ lux的建议我将publicPath设置为{{1} }。这是我更新的webpack.config.js

因为我将css提取到var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var prodPlugins = [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin() ]; var defaultPlugins = [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.$": "jquery", "window.jQuery": "jquery" }), new webpack.HotModuleReplacementPlugin(), new ExtractTextPlugin('styles.css') ]; module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './src/index.js' ], output: { path: 'dist', publicPath: '/', filename: 'bundle.js' }, devServer: { contentBase: './dist', hot: true }, resolve: { root: path.resolve('./') }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'react-hot!babel' }, { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, { test: /\.less$/, loader: "style!css!less"}, { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff" }, { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }, { test: /\.(png|jpg)$/, loader: 'url?limit=8192' } ] }, resolveUrlLoader: { absolute: true }, plugins: process.env.NODE_ENV === 'production' ? prodPlugins.concat(defaultPlugins) : defaultPlugins, };文件，所以我不得不更新我的styles.css文件。

dist/index.html

使用css-loader和react-router修复相对路径

1 个答案: