Javascript 内置网页包ReactJS完成后'；行不通

在

webpack

命令之后，webpack捕获所有文件并在dist文件夹中完成构建，但react组件不工作。我不明白为什么。我的配置已附加：

package.json

{
  "name": "name",
  "version": "1.0.0",
  "description": "Example",
  "main": "index.js",
  "scripts": {
    "watch": "webpack --progress --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.3",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.5.3",
    "optimize-css-assets-webpack-plugin": "^3.1.1",
    "postcss-loader": "^2.0.6",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  },
  "browserslist": [
    "last 15 versions",
    "> 1%",
    "ie 8",
    "ie 7"
  ]
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: ['./app/app.js', './app/sass/app.sass'
],
output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist')
},
devServer: {
    contentBase: './dist'
},
module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ["css-loader", "postcss-loader"]
            }),
        },
        {
            test: /\.(sass|scss)$/,
            use: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'sass-loader'])
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[ext]', // check the path
                }
            },
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]', // check the path
                }
            }
        }
    ]
},
plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
        title: 'Build version'
    }),
    new ExtractTextPlugin({
        filename: 'css/app.min.css',
        allChunks: true,
    }),
    new OptimizeCssAssetsPlugin()
]};

babel.rc

{"presets":["es2015", "react"]}

应用程序文件系统：

• app/

  • 组件/

  • font/

  • img/

  • sass/

  • app.js

  • index.html

---

index.html

有一个带有

id=“app”

的

，脚本的主体中有

src=“app.js”

。

移动

react

和

react dom

到

依赖项
而不是
包中的
devdependencies
。json然后尝试重新构建

检查此答案以了解解释：
您的
react
和
react dom
包是
依赖项
请尝试将它们移到那里。

尝试将您的webpack配置文件修改为以下格式：

module.exports = {
  entry: [
    './app/app.js',
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
    publicPath: '/dist',
    sourceMapFilename: 'bundle.map',
  },
  devtool: process.env.NODE_ENV === 'production' ? undefined : 'cheap-module-eval-source-map',
  resolve: {
    modules: ['node_modules', './app/components'],
    extensions: ['.js', '.jsx'],
  },
  module: {
    loaders: [
      {
        test: /(\.js$|\.jsx$)/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['react', 'es2015'],
            },
          },
        ],
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      minimize: true,
      compressor: {
        warnings: false,
      },
    })
  ],
};

将所需的其他必要规则添加到
规则
数组。

不过，通过此配置，您不需要
.babelrc
文件，因为一切都准备就绪。
Nothung。但我发现一些奇怪的想法：在“body”标记中构建html文件后，没有@Mikhail，这是您正在使用的插件的默认输出。尝试在