React + webpack dev環境設定 - ファイルパスが間違っています

Question

私はReactの開発環境を設定しようとしていますが、webpackのパスに関する問題が発生しています。通常、クイックグーグルはこれらのような問題を解決しますが、私は同じ問題を抱えている人は見ていません。これはおそらく私がばかだと思って何かを台無しにしていることを意味します。

私はチュートリアルに続き、dev -folderとoutput -folderを持っています。 outputで私はoutput.jsを持っています。ここでwebpackはすべてのものを出力します。だから、ガイドによると、私は./node_modules/.bin/webpackを実行する必要があり、それは私が持っている設定で動作するはずですが、それは間違ったファイルパスを示しています。私はreact-test/output/output.jsに行きたいですが、それは/devに投げ込み、react-test/dev/output/output.jsとなっています。私webpack.config.jsは、次のようになります。devを追加取得した場合、私は見ることができない

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

var DEV = path.resolve(__dirname, "dev"); 
var OUTPUT = path.resolve(__dirname, "output"); 

var config = { 
    entry: DEV + "/index.jsx", 
    output: { 
    path: OUTPUT, 
    filename: "output.js" 
    }, 
    module: { 
    loaders: [{ 
     include: DEV, 
     loader: "babel-loader" 
    }] 
    } 
}; 

module.exports = config; 

。

var path = require('path'); 

module.exports = { 
    entry: path.join(__dirname, '/dev/index.js'), 
    output: { 
    path: path.join(__dirname, '/output'), 
    filename: 'output.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015'] 
     } 
     } 
    ] 
    } 
}; 

あなたはこのファイルでのWebPACKを要求する必要はありませんが、あなたは何をテストするためのモジュールローダを伝える必要があります：

Answer 1

は、私は次のようにファイルを変更します。 ReactJSとES6を使用していることを前提としたプリセットは、必要に応じて変更する必要があります。

Answer 2

webpack.config

var path = require("path"); 
var HtmlWebpackPlugin = require("html-webpack-plugin"); 
module.exports = { 
    entry: './dev/index.js', 
    output: { 
     path: path.resolve(__dirname, 'output'), 
     filename: 'output.js', 
     publicPath: '/' 
    }, 
    module: { 
     rules: [ 
      { test: /\.(js)$/, use: 'babel-loader' }, 
      { test: /\.css$/, use: ['style-loader', 'css-loader'] } 
     ] 
    }, 
    devServer: { 
     historyApiFallback: true 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: 'app/Index.html' // Copy Index.html with script tag refrencing output.js in Output folder 
     }) 
    ] 
} 

Answer 3

はreact-testディレクトリへcontextオプションを設定してください。ファイルパスに追加された `/ dev` -

var DEV = path.resolve(__dirname, "./dev"); 
var OUTPUT = path.resolve(__dirname, "./output"); 

var config = { 
    context: path.resolve(__dirname, './'), 
    entry: DEV + "/index.jsx", 
    output: { 
    path: OUTPUT, 
    filename: "output.js" 
    }, 
    ...