webpack文件加载器选项无法识别

时间:2017-01-04 14:24:33

标签: reactjs webpack loader webpack-style-loader

作为webpack的新手,答案可能是盯着我,但我没有看到它。无论我如何尝试传递它们,都找不到文件加载器选项。

我正在使用文件加载器,我正在尝试传递一个publicPath(或者最初的任何东西)作为选项。我进入了文件加载器源代码并为它检测到的所有选项添加了一个日志,但它们总是空着。

webpack.config.prod.js

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'idlink-1.1.1.js',
    publicPath: ''
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.DefinePlugin({'process.env.NODE_ENV': '"production"'})
  ],
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel',
        query: { presets: ['react', 'es2015', 'stage-1'] }
      },
      {test: /\.css$/, loader: "style-loader!css-loader" },
      {test: /\.scss$/, loaders: ["style", "css", "sass"]},
      {test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
      {
        test: /\.(jpe?g|png|gif|svg|pdf)$/i,
        loader: "file",
        options: { publicPath: 'https://apps.ixordocs.be/'}
      },
      {test: /\.gif$/, loader: "url-loader?mimetype=image/png" }
    ]
  },
}

我也试过了 loader: "file-loader"

以及将选项添加为像这样的一个字符串

loader: "file?name=[name].[ext]&publicPath=https://apps.ixordocs.be/"

一些上下文信息: 我不想在我的output: {}中定义一个硬编码的PublicPath,我想从我插件加载到div上的参数中动态获取它。

我已尝试使用__webpack_public_path__变量,但它可以正常工作,但不适用于图像。公共路径从参数中获取,设置并用于获取块。但不知何故它对图像没有影响。如果我在输出下硬编码一个publicPath,它就可以用于图像。这让我相信加载器与变量的通信存在问题,因此我们的想法是让选项工作并最终尝试在那里传递动态的publicPath。

1 个答案:

答案 0 :(得分:0)

根据加载程序GitHub repowebpack docs上的加载程序文档,您的问题完全有效。问题是publicPathoutputPath功能是在pull request中实现的,它已合并但尚未发布到新版本的加载程序,并且README on npm doesn&# 39;出于同样的原因提及这些特征 您仍然可以通过使用npm install webpack/file-loader --save-dev从GitHub仓库安装来使用这些功能,并且您的选项应该可以使用。如果没有,请尝试将options替换为query

{
    test: /\.(jpe?g|png|gif|svg|pdf)$/i,
    loader: "file-loader",
    query: { publicPath: 'https://apps.ixordocs.be/'}
}

使用publicPath的网址也是有效的,因为您经常需要从CDN或其他服务器加载资源。