Question

虽然使用react / webpack / node进行开发，但我使用“import map from the ./map.jsx”引用其他组件;“或类似的陈述。然后我将webpacked转换为一个包并试图在IIS上托管它以及index.html页面和fonts文件夹。但是在控制台中我得到错误：无法找到模块“./map.jsx”，好像它正在尝试引用本地文件，但我认为应该将它们打包到捆绑包中？

如果还有其他任何我可以提供帮助排除故障的信息，请告知我们。

这是我的map.jsx

import React from 'react';
import 'leaflet';

export default class Map extends React.Component {
  componentDidMount() {
    this.map = new L.Map('map', {
        center: new L.LatLng(53.15, 0.54),
        zoom: 8,
        layers: L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        })
    });
    this.layersControl = L.control.layers().addTo(this.map);
  }
  render() {
    return (
      <div id="map-container" className="pure-u-1">
        <div id="map"></div>
      </div>
    );
  }
}

和我的app.jsx

import React from 'react';
import Nav from './nav/nav.jsx';
import NavButton from './nav/navbutton.jsx';
import Map from './map.jsx';

export default class App extends React.Component {
  render() {
    return (
      <div className="pure-g">
        <Nav>
          <NavButton>Test</NavButton>
        </Nav>
        <Map />
      </div>
    );
  }
}

以及webpack.config.js

module.exports = {
  entry: "./src/index.jsx",
  output: {
      path: __dirname,
      filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.png$/, loader: "url-loader", query: { mimetype: "image/png" } },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]"
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "file-loader?name=fonts/[name].[ext]"
      }
    ]
  }
};

找不到模块“./map.jsx”

0 个答案: