如何在现有的反应项目中配置webpack?

时间:2017-07-21 11:20:39

标签: reactjs webpack css-loader

我使用create-react-app命令行创建了一个react项目。在app中有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

有人在这帮助我吗?我刚刚做出反应。提前谢谢。

1 个答案:

答案 0 :(得分:0)

我认为,您正在使用webpack 3,但使用的是webpack 1的配置。 请看这里:https://webpack.js.org/guides/migrating/

例如,模块 - >加载器现在是模块 - >规则,等等。