Webパックを再構成しようとしていますが、CSSファイルを読み込めません。 src> styles> main.cssにスタイルを保持します
次のようなエラーが発生しています
ERROR in ./src/images/NavIcon03.png
Module build failed: SyntaxError: /Users/myname/work/site/src/images/NavIcon03.png: Unexpected character '�' (1:0)
ここに私のウェブパックの設定があります
var webpack = require('webpack')
module.exports = {
entry: [
'./src/main.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/, // Only .css files
loader: 'style!css' // Run both loaders
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
contentBase: './'
}
};
以下はpackage.jsonです
{
"name": "website",
"version": "0.0.1",
"dependencies": {
"ampersand-app": "^1.0.4",
"ampersand-model": "^5.0.3",
"ampersand-react-mixin": "^0.1.3",
"ampersand-rest-collection": "^4.0.0",
"ampersand-router": "^3.0.2",
"asynquence": "^0.8.2",
"autoprefixer": "^5.2.0",
"autoprefixer-core": "^5.2.0",
"autoprefixer-stylus": "^0.7.0",
"axios": "^0.9.1",
"babel": "^5.5.8",
"babel-core": "^5.5.8",
"babel-loader": "^5.1.4",
"bootstrap": "^3.3.6",
"bootstrap-webpack": "0.0.5",
"css-loader": "^0.15.1",
"d3": "^3.5.12",
"file-loader": "^0.8.4",
"font-awesome": "^4.5.0",
"google-map-react": "^0.9.3",
"history": "^1.17.0",
"hjs-webpack": "^2.6.0",
"json-loader": "^0.5.2",
"local-links": "^1.4.0",
"lodash": "^4.3.0",
"lodash.assign": "^3.2.0",
"lodash.has": "^3.2.1",
"lodash.merge": "^3.3.1",
"lodash.pick": "^3.1.0",
"lodash.result": "^3.1.2",
"milliseconds": "^1.0.3",
"moment": "^2.11.1",
"node-libs-browser": "^0.5.2",
"object-assign": "^4.0.1",
"octicons": "^2.2.0",
"postcss-loader": "^0.5.0",
"qs": "^3.1.0",
"react": "^0.14.6",
"react-avatar-editor": "^3.2.0",
"react-bootstrap": "*",
"react-bootstrap-table": "^1.3.3",
"react-bootstrap-validation": "^0.1.11",
"react-cropper": "^0.6.0",
"react-d3-components": "^0.6.0",
"react-dom": "^0.14.6",
"react-dropzone": "^3.3.0",
"react-dropzone-component": "^0.8.1",
"react-facebook-login": "^2.0.3",
"react-fileupload": "^1.1.3",
"react-google-maps": "^4.7.1",
"react-hot-loader": "^1.3.0",
"react-input-slider": "^1.5.0",
"react-redux": "^4.4.0",
"react-router": "^2.0.0",
"react-select": "^1.0.0-beta8",
"react-star-rating-component": "^0.1.0",
"redux": "^3.3.1",
"redux-promise": "^0.5.1",
"slugger": "^1.0.0",
"standard": "^4.3.1",
"style-loader": "^0.12.3",
"stylus-loader": "^1.2.1",
"surge": "^0.14.2",
"url-loader": "^0.5.6",
"webpack": "^1.9.11",
"webpack-dev-server": "^1.9.0",
"xhr": "^2.0.2",
"yeticss": "^6.0.7"
},
"license": "",
"private": true,
"scripts": {
"build": "webpack",
"deploy": "surge -p public -d labelr.surge.sh",
"start": "webpack-dev-server",
"yolo": "git add --all && git commit -am \"$(date)\" && npm version minor && git Push Origin master --tags && npm run build && npm run deploy"
},
"devDependencies": {
"babel-preset-react": "^6.5.0",
"css-loader": "^0.15.6",
"redux-devtools": "^3.1.1",
"style-loader": "^0.12.4"
}
}
あなたのPNGに一致する適切なローダーがありません。これを修正するには、 rl-loader または file-loader を設定して、PNGに一致するようにします。
url-loaderには、便利な制限オプションがあります。 dataurl(インライン)またはパスを出力するかどうかを制御できます(file-loaderを使用し、パスに一致するファイルを出力します)。
Image-webpack-loaderとfile-loaderを使用できます https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/
1)それらをインストールする
$npm install image-webpack-loader file-loader --save-dev
2)新しいセットをbabel-loaderの下のwebpack.config.jsに追加します:image-webpack-loaders and file-loader
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
3).jpgファイルを変数にインポートし(私にとっては 'imgabout'変数です)、この変数をsrcに追加します
import React from 'react';
import imgabout from './img-about.jpg';
export default class Article extends React.Component {
render() {
const { title } = this.props;
return (
<div class="col-md-6">
<img class="img-about" src={imgabout} alt="Logo" />
</div>
);}}
それを修正するパッケージャーを再起動してみてください。