Question

我正在尝试将资源路径从某个路径（class App extends React.Component{ constructor(){ super(); this.state = {user: []}; console.log("constructor"); } componentDidMount() { console.log("componentDidMount 1"); $.ajax({ method:'get', crossDomain: true, url: "http://127.0.0.1:8000/product/" }).done((res) => { this.setState({user:res}); console.log("componentDidMount 2"); }) } render(){ var us = this.state.user console.log("render"); return( <div className="container-fluid"> <div className="container"> <div className="row"> {(function (rows, i, len) { while (i <len) { rows.push(<div className="col-sm-3"> <Card user={us[i]}/> </div>) i++ } return rows; })([], 0, us.length)} </div> </div> </div> ); } } render(<App/>,window.document.getElementById("app"));）重写到正确的目录（在我的情况下为~assets/myimage.png）。

我告诉我的webpack将所有图像写入公共文件夹中。图像被正确写入，但构建css中的url没有相应调整。

这是我用于手写笔文件的规则

/assets/

和我用于资产的那个

use: ExtractTextPlugin.extract({
  fallback: {
    loader: require.resolve("style-loader"),
    options: {
      hmr: false
    }
  },
  use: [
    {
      loader: require.resolve("css-loader")
    },
    {
      loader: require.resolve("stylus-loader")
    }
  ]
})

我的别名解析到正确的目录：

{
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
    loader: require.resolve("url-loader"),
    options: {
      limit: 100,
      name: "static/media/[name].[hash:8].[ext]"
    }
},

，公共路径设置为assets: path.resolve(__dirname, "../public")

/assets/

由于我使用ExtractTextPlugin，因此无法使用样式加载器。当使用样式加载器时它只能工作，但在我的用例中我需要一个css文件publicPath: publicPath + "assets/",

有关于此的任何想法吗？

Answer 1

将file-loader用于图片。

test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}  
          }
        ]
      }
    ]

Answer 2

在将CSS传递给file-loader / url-loader之前，可能需要解析相关资产网址。

我从未使用stylus-loader，但我会像其他任何CSS预处理器一样尝试尝试方法并使用resolve-url-loader：

module.exports = {
  module: {
    loaders: [
      {
        test   : /\.css$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
      }, {
        test   : /\.styl$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'stylus-loader?sourceMap']
      }
    ]
  }
};

Answer 3

这只是一个想法，但你的别名可能错了吗？你写了

assets: path.resolve(__dirname, "../public")

但是关于你的项目结构看起来像这样

--project_root/
 |--public
 |--src
 |--webpack.conf.js

应该是

assets: path.resolve(__dirname, "public") //without the "folder up" operator

Webpack不能重写资产网址（手写笔）

3 个答案: