Webpackにファイルをバンドルしないようにする

Question

今はwebpack（.tsxファイルの作成と.htmlファイルのコピー）とwebpack-dev-serverの開発サービスの組み合わせを使用しているプロトタイプで作業しています。あなたが想定しているように、我々はまた、ReactとReactDOMをいくつかのライブラリ依存関係としても使用しています。現在のビルド出力は、次の構造になります。

dist 
    -favicon.ico 
    -index.html 
    -main.js 
    -main.js.map // for source-mapping between tsx/js files 

これは、すべてのモジュール（ライブラリの依存関係を大きなバンドルファイルに含めます）を配置します。私は、最終的な結果は次のようになりたい：

dist 
    -favicon.ico 
    -index.html 
    -appName.js 
    -appName.min.js 
    -react.js 
    -react.min.js 
    -reactDOM.js 
    -reactDOM.min.js 

私はindex.htmlを内と.tsxファイルでimport文における各ライブラリへの参照を持っています。だから私の質問は... この巨大なバンドルされた.jsファイルを個々の.jsファイル（個別に指定する必要なく、ライブラリが含まれています）に変換するwebpackからどうやって行くのですか？ **ボーナス：私はprod/dev環境フラグを実行する方法を知っています。

現在webpack.config：

var webpack = require("webpack"); // Assigning node package of webpack dependency to var for later utilization 
var path = require("path"); // // Assigning node package of path dependency to var for later utilization 

module.exports = { 
    entry: [ 
       "./wwwroot/app/appName.tsx", // Starting point of linking/compiling Typescript and dependencies, will need to add separate entry points in case of not deving SPA 
       "./wwwroot/index.html", // Starting point of including HTML and dependencies, will need to add separate entry points in case of not deving SPA 
       "./wwwroot/favicon.ico" // Input location for favicon 
      ], 
    output: { 
     path: "./dist/", // Where we want to host files in local file directory structure 
     publicPath: "/", // Where we want files to appear in hosting (eventual resolution to: https://localhost:4444/) 
     filename: "appName.js" // What we want end compiled app JS file to be called 
    }, 

    // Enable sourcemaps for debugging webpack's output. 
    devtool: "source-map", 

    devServer: { 
     contentBase: './dist', // Copy and serve files from dist folder 
     port: 4444, // Host on localhost port 4444 
     // https: true, // Enable self-signed https/ssl cert debugging 
     colors: true // Enable color-coding for debugging (VS Code does not currently emit colors, so none will be present there) 
    }, 

    resolve: { 
     // Add '.ts' and '.tsx' as resolvable extensions. 
     extensions: [ 
      "", 
      ".ico", 
      ".js", 
      ".ts", 
      ".tsx", 
      ".web.js", 
      ".webpack.js" 
     ] 
    }, 

    module: { 
     loaders: [ 
      // This loader copies the index.html file & favicon.ico to the output directory. 
      { 
       test: /\.(html|ico)$/, 
       loader: 'file?name=[name].[ext]' 
      }, 
      // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'. 
      { 
       test: /\.tsx?$/, 
       loaders: ["ts-loader"] 
      } 
     ], 

     preLoaders: [ 
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 
      { 
       test: /\.js$/, 
       loader: "source-map-loader" 
      } 
     ] 
    }, 

    // When importing a module whose path matches one of the following, just 
    // assume a corresponding global variable exists and use that instead. 
    // This is important because it allows us to avoid bundling all of our 
    // dependencies, which allows browsers to cache those libraries between builds. 
    // externals: { 
    //  "react": "React", 
    //  "react-dom": "ReactDOM", 
    //  "redux": "Redux" 
    // } 
}; 

更新：、もう一度、そのWebPACKの-Yのように、いくつかの追加設定が必要ですが、 は、私のニーズに合わせてソリューションを見つけることになりました。それはもう少しダイナミックにしたいと思っていますが、後でこれを完璧にするでしょう。私が探していた解決策は共通のモジュールを "チャンク"する能力でしたが、webpackで提供されている "エントリ"ポイントを与えられたファイル名として記述しました。プロジェクトがSPA（シングルページアプリケーション）ではないため、いくつかのファイルが合わさっていて、合理的なところでは、全体的なファイルをコンポーネントレベルにしたいと思っていました。

追加コードはなってしまった：

plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ // This plugin is for extracting and created "chunks" (extracted parts of the code that are common and aren't page specific) 
     // One of these instances of plugins needs to be specified for EACH chunk file output desired 
     filename: "common.js", // Filename for this particular set of chunks to be stored 
     name: "common", // Entry point name given for where to pull all of the chunks 
     minChunks: 3 // Minimum number of chunks to be created 
    }) 
] 

を私も割り当てることができるように反応し、DOMを、反応変数名によって、（例えば、以下を参照）のエントリポイントをパラメータ化しなければならなかった、とReduxのモジュールcommon.jsファイルにコピーします。 名前例えばを駆動するように設定

entry: { 
    main: "./wwwroot/app/appName.tsx", // Starting point of linking/compiling Typescript and dependencies, will need to add separate entry points in case of not deving SPA 
    index: "./wwwroot/index.html", // Starting point of including HTML and dependencies, will need to add separate entry points in case of not deving SPA 
    favicon: "./wwwroot/favicon.ico", // Input location for favicon 
    common: [ "react", "react-dom", "redux" ] // All of the "chunks" to extract and place in common file for faster loading of common libraries between pages 
}, 

Answer 1

変更output

entry: { 
     dash: 'app/dash.ts', 
     home: 'app/home.ts', 
    }, 
    output: { 
     path: './public', 
     filename: 'build/[name].js', 
     sourceMapFilename: 'build/[name].js.map' 
    }, 

Answer 2

モジュールローダーがモジュールローダーに置き換わります。

しかし、モジュールローダーとは対照的に、モジュールバンドラだからあなたは、開発時にモジュールローダの代わりに、モジュールバンドラを使用することができ、ビルド時に

を実行します:)！