在webpack中构建后,ReactJS无法正常工作

时间:2017-09-04 01:42:21

标签: javascript reactjs webpack webpack-2

webpack命令webpack捕获所有文件并在dist文件夹中完成构建后,但反应组件不起作用。我不明白为什么。我的配置附件:

的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"

2 个答案:

答案 0 :(得分:1)

/profile 中将reactreact-dom移至dependencies而不是devDependecies,然后再次尝试构建。

检查此答案以获得解释: Bower and devDependencies vs dependencies

答案 1 :(得分:0)

您的reactreact-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文件,因为一切都已到位。