Question

尽管我的知识付出了很多努力，但我无法得到：

ReactDebugTool.js:14 Uncaught ReferenceError: require is not defined(…)

我写了一个webpack配置如下：

// webpack.config.babel.js

import path from 'path';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';

const sharedConfiguration = {
  cache: true,
  context: __dirname,
  entry: {
    app: ["./example/example.js"],
    styles: ["./example/example.scss"]
  },
  devtool: "source-map",
  resolve: {
    extensions: ["", ".js"]
  },
  module: {
    preLoaders: [
      { test: /\.js$/, loaders: ["eslint", "eslint-loader"] }
    ],
    loaders: [
      { test: /\.js$/, loader: "babel-loader", exclude: /node_modules/, query: { presets: ["es2015", "stage-0", "react"], plugins: ['transform-runtime'] } },
      { test: /\.(scss|sass)$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap") },
      { test: /\.html$/, loaders: ["html-loader"] },
      { test: /\.(jpg|png|woff|woff2|eot|ttf|svg|ico)$/, loader: "file-loader?name=[name]-[hash].[ext]" },
      { test: /\.(json|geojson)$/, loader: "json-loader" }
    ],
    noParse: /ol\.js/
  },
  eslint: {
    configFile: './.eslintrc'
  }
};

const developmentConfiguration = {
  watch: true,
  output: {
    pathinfo: true,
    filename: "[name]-[chunkhash].js",
    path: path.resolve("./.tmp")
  },
  devServer: {
    port: 8081
  },
  plugins: [
    new ExtractTextPlugin("[name]-[chunkhash].css"),
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor"
    }),
    new HtmlWebpackPlugin({
      template: "./example/example.ejs",
      inject: false
    })
  ]
};

let environmentConfiguration = developmentConfiguration;

const configuration = {
  ...sharedConfiguration,
  ...environmentConfiguration
};

export default configuration;

我的项目包含folder structure like this。

// example.ejs
<!DOCTYPE html>
<html>
  <head>
    <title>Editor</title>
    <script src="<%= htmlWebpackPlugin.files.chunks.vendor.entry %>"></script>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.chunks.styles.css[0] %>">
  </head>
  <body>
    <div id="root"></div>
    <script src="<%= htmlWebpackPlugin.files.chunks.app.entry %>"></script>
  </body>
</html>

// example.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from '../source/index';

ReactDOM.render(<Hello />, document.getElementById('root'));

// source/index.js
import React, {Component} from 'react';

export default class Hello extends Component {
  render () {
    return (
      <div>
        Hello
      </div>
    );
  }
}

我提到的大多数文章，都是CommonsChunkPlugin向我提出的，我试图纠正它，但是徒劳无功。任何帮助将不胜感激。

Babel Webpack ES6 React：require未定义

0 个答案: