在webpack中構建后，ReactJS不起作用

Question

使用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/
  • components/
  • fonts/
  • img/
  • sass/
  • app.js
  • index.html

index.html的正文中具有<div>和id="app"和src="app.js"腳本。

Answer 1

將react和react-dom移到package.json dependencies而不是devDependecies中，然后嘗試再次構建。

檢查此答案以獲取解釋： Bower和devDependencies與依賴性

Answer 2

您的react和react-dom軟件包是dependencies嘗試將其移動到那里。
嘗試將您的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,
      },
    })
  ],
};

將所需的其他必要規則添加到rules數組。
不過，有了此配置，您就不需要.babelrc文件了，因為所有內容都就位了。