Webpack 2

时间:2017-02-06 20:05:40

标签: javascript webpack

我的树视图:

- app
  - App.js
- assets
  - Linux.png
- render-web.js
- webpack.config.js

我的配置:

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

module.exports = {
  devtool: 'eval',

  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?https://localhost:9000',
    'webpack/hot/only-dev-server',
    './render-web'
  ],

  output: {
    path: path.join(__dirname, 'assets'),
    filename: 'bundle.js',
    publicPath: '/assets/'
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],

  devServer: {
    compress: true,
    https: true,
    historyApiFallback: true,
    inline: false,
    port: 9000,
    hot: true,
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          ast: false,
          babelrc: false,
          comments: false,
          minified: true,
          presets: ['es2015', 'react', 'stage-0'],
          plugins: ['syntax-flow', 'react-hot-loader/babel'],
        }
      },
      {
        test: /node_modules\/react-native/,
        loader: 'ignore-loader',
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'url-loader?limit=9999999',
        ]
      },
    ],
  },
};

我的输入文件:

/* globals document */
import {AppContainer} from 'react-hot-loader';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/App';

const rootElement = document.getElementById('reactors');

ReactDOM.render(
  <AppContainer>
    <App />
  </AppContainer>,
  rootElement
);

if (module.hot) {
  module.hot.accept('./app/App', () => {
    const NextApp = require('./app/App').default;
    ReactDOM.render(
      <AppContainer>
         <NextApp />
      </AppContainer>,
      rootElement
    );
  });
}

然后从app/App.js

import LinuxIcon from '../assets/Linux.png';

<img src={LinuxIcon} />

路径是正确的(如果我更改它,webpack会抱怨它不存在)。

它会生成base64图像:

data:image/png;base64,77+...too long to paste

但它只显示一个空白方块(无图像)。 我做错了什么?谢谢!

BTW使用:

  • file-loader@0.10.0

  • url-loader@0.5.7

  • webpack@2.2.1

  • webpack-dev-server@2.3.0

PS 我试图将assets目录移至App,正如我所见,但没有运气。

0 个答案:

没有答案