在构建 webpack ReactJS 后不起作用答案

【问题标题】：After build in webpack ReactJS does't work在构建 webpack ReactJS 后不起作用
【发布时间】：2017-09-04 01:42:20
【问题描述】：

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 在正文中有一个带有 id="app" 的 <div> 和带有 src="app.js" 的脚本。

【问题讨论】：

标签： javascript reactjs webpack webpack-2

【解决方案1】：

将您的 package.json 中的 react 和 react-dom 移动到 dependencies 而不是 devDependecies，然后尝试再次构建。

查看此答案以获得解释： Bower and devDependencies vs dependencies

【讨论】：

没什么。但是我发现一些奇怪的想法：在“body”标签中构建html文件后没有
，只有脚本标签
@Mikhail 这是您正在使用的插件的默认输出。 github.com/jantimon/html-webpack-plugin 尝试在<body> 中添加带有<div id="root"></div> 的模板文件

【解决方案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 文件，因为一切都已就绪。

【讨论】：