同じディレクトリにあるjsファイルとjsxファイルをすべて含んでいない

Question

WebPackを使用して構築するReact.jsアプリケーションをアップグレードしようとしています。私たちのアップグレードでは、Webpack 1.0から2.0に移行しており、アップグレードに「必要な」変更を加えました。しかし、ビルドとコンパイルは、含まれているファイルを見ると、これまでに含まれていたファイルのサイズが非常に小さくなっています。

たとえば、React Flux Actionsディレクトリには34個のファイルがあります。ファイルの中には.js拡張子を持つものもあります。しかし、34個のファイルのうち、1個だけがビルドに表示されています。何が他の33に起こった。これは.jsの拡張子を持っていますが、そのディレクトリにも.jsファイルがあります。

私には何が欠けていますか？

これはメインの設定ファイルです。

var path = require('path'); 
var webpack = require('webpack'); 
var StringReplacePlugin = require("string-replace-webpack-plugin"); 
var Environment = require('./js/environment'); 

module.exports = { 
    entry: [ 
    './js' 
    ], 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'bundle.js', 
    }, 
    plugins: [ 
    new StringReplacePlugin(), 
    new webpack.LoaderOptionsPlugin({ 
     options: { 
     tslint: { 
      emitErrors: true, 
      failOnHint: true 
     } 
     } 
    }) 
    ], 
    resolve: { 
    extensions: ['*', '.js', '.jsx'], 
    modules: [ 
     path.join(__dirname, 'node_modules'), 
     path.join(__dirname, 'js'), 
     path.join(__dirname, 'jsx') 
    ] 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loaders: ['react-hot-loader/webpack', 'babel-loader' ] 
    }, 
    { 
     test: /js\/constants.js$/, 
     loader: StringReplacePlugin.replace({ 
     replacements: [{ 
      pattern: /localhost/g, 
      replacement: Environment.getBackendURL 
     }] 
     }) 
    }] 
    } 
}; 

これはホットリロードのローカルバージョンです。両方のファイルが使用されていると思います。しかし、私は唯一、その後

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

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/only-dev-server', 
    './js/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'build-hot'), 
    filename: 'bundle.js', 
    publicPath: '/build/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    // new webpack.NoErrorsPlugin() 
    new webpack.LoaderOptionsPlugin({ 
     options: { 
     tslint: { 
      emitErrors: true, 
      failOnHint: true 
     } 
     } 
    }) 
    ], 

    resolve: { 
    extensions: ['*', '.js', '.jsx'], 
    modules: [ 
     path.join(__dirname, 'node_modules'), 
     path.join(__dirname, 'js'), 
     path.join(__dirname, 'jsx') 
    ] 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loaders: ['react-hot-loader/webpack', 'babel-loader' ] 
    }] 
    } 
}; 

以下のマイケルの回答に基づいて、「NPMは、ローカル実行」で実行、今すぐ「NPM実行ビルド」コマンドをやって、そこに私はそれが異なっている見つけた一つであり、その理由かもしれないように感じていますしかし、私はプリローダーのためにWebpack2で何も見ませんでした。はい、これ。

preLoaders: [ 
    { 
    test: /\.jsx?$/, 
    loader: "source-map-loader" 
    } 
], 

Answer 1

WebPACKのは、あなたのエントリポイント（複数可）を見て開始され、のみインポートされるファイルが含まれて、それだけで（公式ドキュメントのConcepts - Entryで説明したように）、プロジェクト内のすべてのファイルが含まれていません。あなたのエントリポイントとして

は、あなたがそのディレクトリ内のすべてのファイルを含めていないので、それは、（つまり、Node.jsのため、がFolders as ModulesをインポートハンドルをWebPACKの方法です）./js/index.js始まります./jsです。 ./js/index.jsまたはその依存関係にインポートしない場合、ファイルはまったく含まれません。おそらくあなたはそうしていないので、この1つのファイルだけがバンドルに含まれているのです。

この動作はwebpack 1からwebpack 2に変更されていません。webpack 1とは多少の違いはありましたが、あなたが気づいていない移行プロセスで何か変更されたことは驚くべきことです。