0
どのように私はコンソールにあるエラーを解決することができます。なにか提案を？私のWebPACKの設定で反応ホットローダー/パッチを解決できません
ERROR in multi (webpack)-dev-server/client? http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./app/index.jsx dev Module not found: Error: Can't resolve 'dev' in '/Users/saorabh/Documents/react/reactExamples/youtube_video_api' @ multi (webpack)-dev-server/client? http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./app/index.jsx dev
.bablelrcで
"use strict";
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "8888";
loaders.push({
test: /\.css$/,
loaders: ['style-loader', 'css-loader?importLoaders=1'],
exclude: ['node_modules']
});
loaders.push({
test: /\.scss$/,
loaders: ['style-loader', 'css-loader?importLoaders=1', 'sass-loader'],
exclude: ['node_modules']
});
module.exports = {
entry: [
'react-hot-loader/patch',
'./app/index.jsx', // your app's entry point
],
devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map',
output: {
publicPath: '/',
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders
},
devServer: {
contentBase: "./public",
// do not print bundle build stats
noInfo: true,
// enable HMR
hot: true,
// embed the webpack-dev-server runtime into the bundle
inline: true,
// serve index.html in place of 404 responses to allow HTML5 history
historyApiFallback: true,
port: PORT,
host: HOST
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin({
filename: 'style.css',
allChunks: true
}),
new DashboardPlugin(),
new HtmlWebpackPlugin({
template: './app/index.html',
files: {
css: ['style.css'],
js: [ "bundle.js"],
}
})
]
};
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["react-html-attrs","transform-runtime", "transform-decorators-legacy", "transform-class-properties", "react-hot-loader/babel"]
}
アプリケーションのエントリポイント
import 'react-hot-loader/patch';
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader'
import Application from './components/app';
render((
<AppContainer>
<Application />
</AppContainer>
), document.getElementById('app'));
私は反応が新しく、いくつかの例を試していたときに、私はこの問題を助けや提案のために考えていました。
WebPACKのローダーで
module.exports = [
{
test: /\.es6\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components|public\/)/,
loader: "babel-loader"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
exclude: /(node_modules|bower_components)/,
loader: "file-loader"
},
{
test: /\.(woff|woff2)$/,
exclude: /(node_modules|bower_components)/,
loader: "url-loader?prefix=font/&limit=5000"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
exclude: /(node_modules|bower_components)/,
loader: "url-loader?limit=10000&mimetype=application/octet-stream"
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
exclude: /(node_modules|bower_components)/,
loader: "url-loader?limit=10000&mimetype=image/svg+xml"
},
{
test: /\.gif/,
exclude: /(node_modules|bower_components)/,
loader: "url-loader?limit=10000&mimetype=image/gif"
},
{
test: /\.jpg/,
exclude: /(node_modules|bower_components)/,
loader: "url-loader?limit=10000&mimetype=image/jpg"
},
{
test: /\.png/,
exclude: /(node_modules|bower_components)/,
loader: "url-loader?limit=10000&mimetype=image/png"
}
];