我使用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
有人在这帮助我吗？我刚刚做出反应。提前谢谢。
答案 0 :(得分：0)
我认为，您正在使用webpack 3，但使用的是webpack 1的配置。 请看这里：https://webpack.js.org/guides/migrating/
例如，模块 - ＆gt;加载器现在是模块 - ＆gt;规则，等等。