Webpackはサーバを再起動せずに一部のファイルの変更をバンドルしません

Question

何か助けてもらえますか？プロジェクトのすべてのファイルが自動的に新しいbundle.jsをトリガーするようにします。 modulesディレクトリにあるファイルがそれを行います。しかし、partialsディレクトリのファイルはそうではありません。

ファイル構造は、以下の画像ファイルに示されています。

These are my files

ファイルへの変更は、新しいバンドルをトリガーHome.js。しかし、Main.jsを変更しても、サーバを再起動する必要はありません。 Home.jsはMain.js

Main.jsの依存

import React, { Component } from 'react' 
import Home from '../Home.js' 
export default class Main extends Component{ 
    render(){ 
    return( 
     '<'Home/'>' 
    ) 
    } 
} 

WebPACKのある設定：あなたはimportを使用する必要があるresolving機能を追加しませんでした

var webpack = require('webpack') 

module.exports = { 
devServer: {  
    port: 8080 
}, 
entry: './index.js', 
output: { 
    path: 'public', 
    filename: 'bundle.js', 
    publicPath: '/' 
}, 
plugins: process.env.NODE_ENV === 'production' ? [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin() ] : [], 
module: { 
    loaders: [ 
    { test: /\.jpg$/, loader: 'file' }, 
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }, 
    { test: /\.css/, loaders: ['style', 'css'], 
    include: __dirname + '/public' } 
] } } 

Answer 1

コード内のrequireの参照そして、私はあなたのローダーに構文ミスがあると思います。それらの2つのものを置き換えて、それは私が思うように動作します。

Resolveは、現在のパスですぐに使用できる ではない "import"および "require"参照を見つけるために使用されます。例： （ "../ homepage"）への呼び出しが（ "../homepage/index.js"） に翻訳されているか、または「react」からのインポート反応がどのように解釈されるかを node_modulesフォルダは何か他の名前です。

resolve: { 
    extensions: ['', '.js', '.jsx'] 
} 

ローダー：あなたの設定に適用される

{ 
    test: /\.js[x]?$/, 
    loaders: ['babel-loader?presets[]=es2015&presets[]=react'], 
    exclude: /(node_modules|bower_components)/ 
} 

：あなたの助けを

var webpack = require('webpack') 

const TARGET = process.env.npm_lifecycle_event; 

module.exports = { 
    devServer: { 
     port: 8080 
    }, 
    context: __dirname, 
    entry: './index.js', 
    output: { 
     path: 'public', 
     filename: 'bundle.js', 
     publicPath: '/' 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    plugins: TARGET === 'production' ? [ 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.OccurrenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin()] : [], 
    module: { 
     loaders: [ 
      {test: /\.jpg$/, loader: 'file'}, 
      { 
       test: /\.js[x]?$/, 
       loaders: ['babel-loader?presets[]=es2015&presets[]=react'], 
       exclude: /(node_modules|bower_components)/ 
      }, 
      { 
       test: /\.css/, loaders: ['style', 'css'], 
       include: __dirname + '/public' 
      } 
     ] 
    } 
};