Question

我使用Node.js，React和Webpack设置了一个环境，但是它不起作用。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import "../style/index.less"


class Demo extends Component {
  render() {
    return (
      <div className="box">
        {this.props.text}
      </div>
    )
  }
}

ReactDOM.render(
  <Demo text="this is a test" />,
  document.querySelector('.container')
)

Webpack之后，生成的代码为：

__ WEBPACK_IMPORTED_MODULE_1_react_dom ___ default.a.render（dom（Demo，{ 文字：“这是一个测试” }），document.querySelector（'。container'））;

当我编写一个用于处理此js的HTML文件时，它会告诉我

未捕获的ReferenceError：dom未定义

我也在所有文件中搜索此dom定义，但找不到。

index.html非常简单：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../build/style/index.css">
</head>

<body>
  <div class="container"></div>
  <script src="../build/script/runtime.js"></script>
  <script src="../build/script/vendor.js"></script>
  <script src="../build/script/index.js"></script>
</body>

</html>

和webpack.config.js如下：

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

const extractless = new ExtractTextPlugin({
  filename: '../style/[name].css',
})

module.exports = {
  entry: {
    index: './src/script/index.js',
    vendor: ['react', 'react-dom']
  },
  output: {
    path: path.resolve(__dirname, 'build/script'),
    filename: '[name].js'
  },
  module: {
    rules: [{
        test: /\.js$/,
        include: [
          path.resolve(__dirname, "src/script")
        ],
        loader: "babel-loader",
      },
      {
        test: /\.less$/,
        use: extractless.extract({
          use: [{
              loader: 'css-loader', // translates CSS into CommonJS
            },
            {
              loader: 'less-loader', // compiles Less to CSS
            },
          ],
          fallback: 'style-loader', // creates style nodes from JS strings                      
        })

      },
    ]
  },
  plugins: [
    extractless,
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'runtime']
    })
  ],

}

起初我使用webpack4，但出现此错误，因此我切换到webpack3，错误仍然存在。

未捕获的ReferenceError：未定义dom

0 个答案: