webpack在react.js中無法正常工作

Question

我已經使用create-react-app命令創建了一個“ hello-world” react應用，然后我嘗試使用webpack運行相同的文件，但是它無法正常工作，例如.ico ， .css文件not rendering到屏幕上..請幫助我解決此問題。

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    },
    {
      test: /\.css$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'style-loader'
        },
        {
          loader: 'css-loader',
          options: {
            modules: true,
            // camelCase: true,
            sourceMap: true
          }
        }
      ]
    },
    {
      test: /\.svg$/,
      loaders: [
        'babel-loader',
        {
          loader: 'react-svg-loader',
          query: {
            jsx: true
          }
        },
      ]
    },
    {
      test: /\.json$/,
      loader: 'json-loader',
    },
    {
      test: /\.(jpg|jpeg|gif|png|ico)$/,
      exclude: /node_modules/,
      loader:'file-loader?name=img/[path][name].[ext]&context=./app/images'
   }
  ]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public')
  }
};

的package.json

{
  "name": "indecision-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Andrew Mead",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "json-loader": "^0.5.7",
    "live-server": "^1.2.0",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-svg-loader": "^2.1.0",
    "style-loader": "^0.20.3",
    "validator": "8.0.0"
  },
  "devDependencies": {
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^2.7.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "2.5.1"
  }
}

的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

.babelrc

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

其余文件與創建create-react-app時auto-generated文件相同。 幫我解決這個問題

Answer 1

Git提交所有更改
在cmd上運行此命令：> npm run彈出
轉到生成的文件夾名稱：config> webpack.config.dev.js> line＃166（近似值）CSS編譯器在選項對象上附加代碼
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]',
還要添加config> webpack.config.prod.js> line＃183（近似值）css編譯器在選項對象上附加以上代碼
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]',
然后重新啟動服務器。
現在添加這樣的類。
import classes from './App.css';
<div className={classes.App}>

Answer 2

好了， create-react-app已經有他的webpack配置，babel配置以及它自己的node_module的所有其他內容。

我可以看到您更改了啟動和構建命令。 在此處create-react-app設置的默認命令已經運行了具有正確配置（可處理.ico文件及其他所有內容）的調用webpack的腳本（使用babel等）。

如果您想自己處理它，可以彈出create-react-app 。 這意味着將所有配置文件和腳本放在項目的根目錄下，並刪除為您安裝的create-react-app模塊。 您可以在此處了解更多信息以及在此處為您彈出項目的命令

如果要更改Webpack配置而不彈出，可以使用react-app-rewired 。 （因為我想保持來自create-react-app存儲庫的更新，所以我使用了這種替代方法）

webpack在react.js中無法正常工作

問題描述

2 個解決方案

解決方案1
1 2018-04-16 11:59:17

解決方案2
1 已采納 2018-04-16 12:03:28

webpack在react.js中無法正常工作

問題描述

2 個解決方案

解決方案1 1 2018-04-16 11:59:17

解決方案2 1 已采納 2018-04-16 12:03:28

解決方案1
1 2018-04-16 11:59:17

解決方案2
1 已采納 2018-04-16 12:03:28