Question

我正在将一个小的reactjs项目迁移到Babel v6，但它拒绝正确构建。运行webpack会产生输出：

Version: webpack 1.12.8
Time: 737ms
    Asset    Size  Chunks             Chunk Names
bundle.js  663 kB       0  [emitted]  main
   [0] multi main 52 bytes {0} [built] [1 error]
  [61] ./index.js 0 bytes [built] [failed]
    + 60 hidden modules

ERROR in Browser history needs a DOM
 @ multi main

我已经找到了有关错误本身的信息，但Webpack没有告诉我错误发生的位置 - 没有堆栈跟踪，没有。

有什么想法吗？

编辑 - 我的网络包配置：

import webpack from 'webpack';
import path from 'path';

export default {
    devtool: '#inline-source-map',

    entry: [
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        './index.js'
    ],

    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: [{
                loader: 'react-hot'
            },{
                loader: 'babel',
                query: {
                    // https://github.com/babel/babel-loader#options
                    cacheDirectory: true,
                    presets: ['es2015', 'stage-0', 'react']
                }
            }]
        },{
            test: /\.scss$/,
            exclude: /node_modules/,
            loaders: ['style', 'css?sourceMap', 'sass?sourceMap', 'autoprefixer?browsers=last 2 version']
        }]
    },

    resolve: {
        extensions: ['', '.js']
    },

    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },

    devServer: {
        contentBase: './public',
        hot: true
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

编辑2：我的入口点（index.js）：

import React from 'react';
import ReactDom from 'react-dom';
import {Provider} from 'react-redux';
import {ReduxRouter} from 'redux-router';

import store from './store';
import routes from './routes';

import './style/main.scss';

ReactDom.render(
    <Provider store={store}>
        <ReduxRouter>
            {routes}
        </ReduxRouter>
    </Provider>,
    document.getElementById('react-mount')
);

Answer 1

这是一个有效的基本设置。我建议你把你的东西打到最不需要的地方，然后再添加额外的东西。

var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

const ROOT_PATH = path.resolve(__dirname);
const SRC_PATH = path.resolve(ROOT_PATH, 'ui-src', 'app.js');
const DIST_PATH = path.resolve(ROOT_PATH, 'ui-dist');

module.exports = {

  entry: SRC_PATH,

  output: {
    path: DIST_PATH,
    filename: "app.js"
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {presets:[ 'es2015', 'react', 'stage-0' ]}
      },
      {test: /\.css$/, loader: ExtractTextPlugin.extract("css-loader")},
      {test: /\.(png|jpg|ico)$/, loader: 'file-loader?name=img/[name].[ext]'},
      {test: /\.(html)$/, loader: 'file-loader?name=[name].[ext]'}
    ]
  },
  plugins: [new ExtractTextPlugin('app.css', {allChunks: true})],
  resolve: {extensions: [ '', '.js' ]}
};

{
  "name": "ReactPatterns.14.Webpack-BasicStarter",
  "version": "1.0.0",
  "description": "A collection of simple react projects providing reusable components, startup and test examples.",
  "license": "MIT",
  "author": {
    "name": "Janaka Stevens",
    "email": "jmstevens@calitek.com"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/calitek/ReactPatterns.git"
  },
  "scripts": {
    "start": "node js/server.js",
    "wp": "webpack --progress --profile --colors --watch",
    "nw": "webpack --progress --profile --colors",
    "dist": "NODE_ENV=production webpack --progress --profile --colors"
  },
  "dependencies": {
    "express": "latest",
    "react": "^0.14",
    "react-dom": "^0.14",
    "serve-favicon": "latest"
  },
  "devDependencies": {
    "babel-core": "latest",
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "latest",
    "babel-preset-react": "latest",
    "babel-preset-stage-0": "latest",
    "css-loader": "latest",
    "extract-text-webpack-plugin": "latest",
    "file-loader": "latest",
    "webpack": "latest"
  }
}

'use strict';

require("./index.html");
require("./css/index.css");
require("./img/favicon.ico");

import React from 'react';
import ReactDom  from 'react-dom';

import AppCtrl from './components/app.ctrl';

window.ReactDom = ReactDom;

ReactDom.render( <AppCtrl />, document.getElementById('react') );

构建webpack应用程序时会出现什么错误？

1 个答案: