Question

以下是我的index.js文件的代码，该文件包含我使用节点startegy导入的react组件和react dom：

let React = require('react');
let ReactDom = require('react-dom');

class App extends React.Component
{
    render()
    {
        return <div>Hello , welcome to react</div>
    }
}

ReactDom.render(<App/>, document.getElementById('appRoot'));

module.exports = App;

以下是我的index.html文件，在该文件中我将以id为根的div内的组件呈现出来：

<html>
<head>
    <title>
        React App
    </title>
</head>
<body>
<div id="appRoot">

</div>
</body>
<script src="/public/bundle.js"></script>
</html>

Package.json文件，其中包含我安装的所有入门脚本和依赖项：

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build":"webpack --config webpack.config.js --mode development"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  }
}

以下是我的webpack配置文件，其中包含用于捆绑的所有配置：

module.exports = {
    entry :
    {
        entry : __dirname + '/index.js'
    },
    output : 
    {
        path : __dirname + '/public',
        filename : 'bundle.js',
        publicPath : '/'
    },
    module : {
        rules :[
            {
                test : /\.(js|jsx)$/,
                exclude : /node_modules/,
                use :
                {
                    loader: 'babel-loader',
                    query: {
                        presets : ['babel-preset-es2015','babel-preset-react']
                    }
                }
            }
        ]
    },
    resolve :
    {
        extensions : ['.js','.jsx']
    },
    devServer :
    {
        port : 5000
    }
}

Webpack正在编译我的文件并创建bundle.js，但是index.js文件代码不在其中。请帮忙。预先感谢。

Webpack捆绑文件不包含index.js文件内容

0 个答案: