Reactjs 如何在项目中配置网页包？

我使用create react app命令行创建了一个react项目。该应用程序中有3个容器屏幕。我渲染了所有屏幕，并注意到一些css被覆盖，并且出现了冲突。我意识到我需要在我的应用程序中配置webpack和loader。我试过了，但是当我用webpack运行我的应用程序时，出现了很多错误

这是我的webpack.conf.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devServer: {
        inline: true,
        contentBase: './public',
        port: 3000
    },
    devtool: 'cheap-module-eval-source-map',
    entry: './src/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ]
    },
    output: {
        path: 'src',
        filename: 'js/bundle.min.js'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
};

这里是我的package.json

{
  "name": "lp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "flux": "^3.1.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "history": "^4.6.3",
    "jquery": "^3.2.1",
    "react-bootstrap": "^0.31.0",
    "react-fb-like": "^0.4.5",
    "react-router": "^3.0.5",
    "react-toasts": "^1.0.6",
    "react-scripts": "1.0.10",
    "redux": "^3.7.2"
  },
  "scripts": {
    "start": "webpack-dev-server --hot --inline",
    "react-start": "set PORT=3005 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "file-loader": "^0.11.2",
    "image-webpack-loader": "^3.3.1",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-hot-loader": "^1.3.1",
    "webpack": "^3.3.0",
    "webpack-dev-server": "^1.16.5"
  },
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).",
  "main": "index.js",
  "author": "",
  "license": "ISC"
}

这就是我犯的错误

ERROR in ./src/components/landing_page/assets/img/logo.png
Module parse failed: D:\jasmel\react\lp\src\components\landing_page\assets\img\logo.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/containers/LandingPage.js 39:12-69
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/components/landing_page/assets/css/landing_style.css
Module parse failed: D:\jasmel\react\lp\src\components\landing_page\assets\css\landing_style.css Unexpected character '@' (12:0)
You may need an appropriate loader to handle this file type.
|  Owl Carousel v2.2.1
| ********************/
| @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
| .owl-carousel,
| .owl-carousel .owl-item {
 @ ./src/containers/LandingPage.js 43:21-87
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/components/landing_page/assets/css/style.css
Module parse failed: D:\jasmel\react\lp\src\components\landing_page\assets\css\style.css Unexpected character '@' (12:0)
You may need an appropriate loader to handle this file type.
|  Owl Carousel v2.2.1
| ********************/
| @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
| .owl-carousel,
| .owl-carousel .owl-item {
 @ ./src/containers/LandingPage.js 47:13-71
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/components/landing_page/assets/css/custom.css
Module parse failed: D:\jasmel\react\lp\src\components\landing_page\assets\css\custom.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .mainBody {
|     font-family: 'sf_ui_displaylight';
|     padding: 0px 0px;
 @ ./src/containers/LandingPage.js 51:14-73
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/css/style.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\style.css Unexpected token (39:0)
You may need an appropriate loader to handle this file type.
| sup,
| tt,
| var,
| b,
| u,
 @ ./src/containers/HomePage.js 23:13-54
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/css/header.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\header.css Unexpected token (1:20)
You may need an appropriate loader to handle this file type.
| header .header-main {
|   display: block;
|   width: 100%;
 @ ./src/containers/HomePage.js 27:14-56
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/css/status.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\status.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .status-main {
|   margin-top: 38px;
| }
 @ ./src/containers/HomePage.js 31:14-56
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/css/post.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\post.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .post-main .post-list .col-md-6 {
|   width: calc(50% - 10px);
|   padding: 0;
 @ ./src/containers/HomePage.js 35:12-52
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/css/comment.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\comment.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .comment-box {
|   padding: 20px;
|   background-color: #f6f7f9;
 @ ./src/containers/HomePage.js 39:15-58
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/css/error-pop.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\error-pop.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .error-msg-container {
|   position: relative;
|   background-color: #ffffff;
 @ ./src/containers/HomePage.js 43:16-61
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/css/share-post.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\share-post.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .share-post-container {
|   width: 800px;
|   margin: 30px auto;
 @ ./src/containers/HomePage.js 47:17-63
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/css/recomendation-pop.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\recomendation-pop.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .recomendation-pop-main {
|   width: 765px;
|   margin: 30px auto;
 @ ./src/containers/HomePage.js 51:24-77
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/css/owl.carousel.min.css
Module parse failed: D:\jasmel\react\lp\src\common_assets\css\owl.carousel.min.css Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
|  * Licensed under  ()
|  */
| .owl-carousel, .owl-carousel .owl-item {
|     -webkit-tap-highlight-color: transparent;
|     position: relative
 @ ./src/containers/HomePage.js 55:22-74
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/components/home_page/assets/css/custom.css
Module parse failed: D:\jasmel\react\lp\src\components\home_page\assets\css\custom.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .main_body {
|     position: relative;
|     background-color: #f2f4f8;
 @ ./src/containers/HomePage.js 59:14-70
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/components/signup_page/assets/img/logo.png
Module parse failed: D:\jasmel\react\lp\src\components\signup_page\assets\img\logo.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/containers/Signup.js 11:12-68
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/components/signup_page/assets/img/icons/signup-left-icon.png
Module parse failed: D:\jasmel\react\lp\src\components\signup_page\assets\img\icons\signup-left-icon.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/containers/Signup.js 15:22-96
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/components/signup_page/assets/css/signup.css
Module parse failed: D:\jasmel\react\lp\src\components\signup_page\assets\css\signup.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .signup-main .signup-left {
|   height: 100vh;
|   min-height: 650px;
 @ ./src/containers/Signup.js 21:0-58
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/components/signup_page/assets/css/custom.css
Module parse failed: D:\jasmel\react\lp\src\components\signup_page\assets\css\custom.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sign-up-content img{
|   width: auto !important;
|   vertical-align: bottom;
 @ ./src/containers/Signup.js 23:0-58
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/components/landing_page/assets/img/play-video.png
Module parse failed: D:\jasmel\react\lp\src\components\landing_page\assets\img\play-video.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/components/landing_page/HomeSection_3.js 11:17-55
 @ ./src/containers/LandingPage.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/img/logo.png
Module parse failed: D:\jasmel\react\lp\src\common_assets\img\logo.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/components/home_page/HeaderSection.js 15:12-55
 @ ./src/containers/HomePage.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/img/post-img.png
Module parse failed: D:\jasmel\react\lp\src\common_assets\img\post-img.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/components/home_page/HeaderSection.js 19:15-62
 @ ./src/containers/HomePage.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/img/header-img.png
Module parse failed: D:\jasmel\react\lp\src\common_assets\img\header-img.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/components/home_page/HeaderSection.js 23:17-66
 @ ./src/containers/HomePage.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/img/amazon.png
Module parse failed: D:\jasmel\react\lp\src\common_assets\img\amazon.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/components/home_page/SinglePost.js 23:14-59
 @ ./src/components/home_page/RightPostSection.js
 @ ./src/containers/HomePage.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/img/IMAGE.png
Module parse failed: D:\jasmel\react\lp\src\common_assets\img\IMAGE.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/components/home_page/SinglePost.js 19:13-57
 @ ./src/components/home_page/RightPostSection.js
 @ ./src/containers/HomePage.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./src/common_assets/img/advertisment.png
Module parse failed: D:\jasmel\react\lp\src\common_assets\img\advertisment.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/components/home_page/AdPost.js 15:20-71
 @ ./src/components/home_page/RightPostSection.js
 @ ./src/containers/HomePage.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./node_modules/react-toasts/animate.css
Module parse failed: D:\jasmel\react\lp\node_modules\react-toasts\animate.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @charset "UTF-8";
|
| .animated {
 @ ./node_modules/react-toasts/index.js 5:0-23
 @ ./src/components/landing_page/Header.js
 @ ./src/containers/LandingPage.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

ERROR in ./node_modules/react-toasts/styles.css
Module parse failed: D:\jasmel\react\lp\node_modules\react-toasts\styles.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .react-toasts-container {
|   position: absolute;
|   z-index: 9999;
 @ ./node_modules/react-toasts/index.js 6:0-22
 @ ./src/components/landing_page/Header.js
 @ ./src/containers/LandingPage.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.js

---

有人来帮我吗？我是新来的。提前谢谢。

我想，您使用的是第3版网页，但使用的是第1版网页的配置。 请看这里：

---

例如，模块->加载程序现在是模块->规则，等等。

您是先“弹出”项目的吗？不是。我该怎么做？执行弹出的目的是什么？使用

npm run eject

。请参阅文档是的，我做到了。现在它使用“start”运行：“set PORT=3005&&node scripts/start.js”，我现在如何使用webpack运行？在项目的根目录中应该是弹出的webpack.conf.js，您现在可以进行调整。