3

当我尝试通过 JS 导入一些资产（不是样式，它们可以正常工作）图像或字体时

import Logo from 'img/logo.png'

我收到奇怪的JSON.stringified字符串

module.exports = __webpack_public_path__ + "img/logo.png";

当我将 publicPath 设置为/我收到这个：

module.exports = "img/logo.png";

这是我的 Webpack 配置。我究竟做错了什么？

const isDevelopment = process.env.NODE_ENV !== 'production';

const CONTEXT = 'frontend';
const alias = ['img', 'img/icons', '/scss', '/src', '/src/_common', '/src/_common/functions'];

const PLUGINS = [
  new ExtractTextPlugin({
    filename: (isDevelopment) ? '[name].css' : '[hash:12].css',
    disable: isDevelopment && !process.env.CSS
  }),
  new webpack.DefinePlugin({
    NODE_ENV: JSON.stringify(process.env.NODE_ENV)
  }),
  new HtmlWebpackPlugin({
    template: './index.html'
    // favicon: './favicon.ico'
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: Infinity
  })
];

if (isDevelopment) {
  PLUGINS.push(new webpack.NamedModulesPlugin());
} else {
  PLUGINS.push(new webpack.optimize.UglifyJsPlugin());
  PLUGINS.push(new webpack.BannerPlugin({
    banner: `
    /* ${packageJSON.name} app v${packageJSON.version}.
    * Under ${packageJSON.license} protection.
    * Made by: ${packageJSON.author}.
    * ================================================================== */`,
    entryOnly: true,
    raw: true
  }));
}

const jsLoader = {
  test: /\.jsx?$/,
  exclude: /node_modules/,
  use: 'babel-loader'
};


const imageLoader = {
  test: /\.(png|jpe?g|gif|svg)?$/,
  exclude: /node_modules/,
  use: [{
    loader: 'file-loader',
    options: {
      publicPath: '',
      outputPath: '',
      name: (isDevelopment) ? '[path][name].[ext]' : '[hash:12].[ext]'
    }
  }]
};
if (!isDevelopment) {
  imageLoader.use.push({
    loader: 'image-webpack-loader',
    options: {

    }
  });
}

const fontLoader = {
  test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9#=&.]+)?$/,
  include: /font/,
  exclude: /(node_modules|img)/,
  use: {
    loader: 'file-loader',
    options: {
      name: (isDevelopment) ? '[path][name].[ext]' : '[hash:12].[ext]'
    }
  }
};

module.exports = {
  devtool: (isDevelopment) ? 'source-map' : false,
  context: path.resolve(__dirname, CONTEXT),
  entry: {
    vendor: Object.keys(packageJSON.dependencies),
    app: ['babel-polyfill', './src/app.js']
  },
  output: {
    path: path.resolve(__dirname, (isDevelopment) ? CONTEXT : 'build'),
    publicPath: '',
    filename: (isDevelopment) ? '[name].js' : '[chunkhash:12].js'
  },
  resolve: {
    alias: Array.prototype.reduce.call(alias, (acc, v) => {
      acc[v.split(/\/_?/).pop()] = path.join(__dirname, CONTEXT, v);
      return acc;
    }, {}),
    extensions: ['.js', '.jsx']
  },
  plugins: PLUGINS,
  module: {
    loaders: [jsLoader, sassLoader, svgLoader, imageLoader, fontLoader]
  }
};
4

0 回答 0