Webpack：バンドルにJSファイルのフォルダを追加する方法

Question

私は開発中の反応アプリケーションを持っていますが、私はwebpackにあまり慣れていません。私はいくつかのカスタムJavaScriptでブートストラップテーマを実装しました。私のindex.htmlボディにすべてのスクリプトを手動でリンクするとうまくいきます。

ハック方法は非常に乱雑で、後ですべてのスクリプトを小さくすることになります。

私のすべてのスクリプトは、srcにあるvendorという単一のフォルダにあります。 vendorフォルダ内のすべてのファイルを、webpackにバンドルされている他のものとバンドルするにはどうすればよいですか？

は、ここに参照のための私のWebPACKファイルです：

const debug = process.env.NODE_ENV !== "production" 
const webpack = require('webpack') 
const ExtractTextPlugin = require("extract-text-webpack-plugin") 
const path = require('path') 
const loaders = require('./webpack.loaders') 

module.exports = { 
    context: path.resolve(__dirname, "src"), 
    resolve: { 
     root: [ path.resolve(__dirname, "src")], 
     extensions: ['', '.js', '.jsx'] 
    }, 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./js/client.js", 
    module: { 
     loaders: loaders.concat([ 
      { 
       test: /\.js?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['react', 'es2015', 'stage-0'], 
        plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'] 
       } 
      } 
     ]) 
    }, 
    output: { 
     path: __dirname + "/src/", 
     filename: "client.min.js" 
    }, 
    plugins: 
     debug ? [] : [ 
      new webpack.optimize.DedupePlugin(), 
      new webpack.optimize.OccurenceOrderPlugin(), 
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }) 
     ] 
} 

Answer 1

私はあなたがあなたのフォルダ内のすべてのファイルをインポートする方法を紹介します。 importが現在一般的ですが、requireという構文を使用します。 （ちょうどそれがimportによって可能であるかどうか確かめて、誰かが明らかにすることができるかもしれない）。だから、

は：

const req = require.context('./src/vendor/', true, /.js$/); 
req.keys().forEach((filename) => req(filename)); 

それは./src/vendor/」からすべてのJSファイルが必要になります。

requireの構文に精通していれば、すべてのことは明らかです。

module.exports = function theme() { 
    // do some stuff 
    return 'some stuff'; 
} 

そして、あなたはこのようにそれを使用することがあります：

const req = require.context('./src/vendor/', true, /.js$/); 
req.keys().forEach((filename) => { 
    const theme = req(filename); 
    theme(); 
}); 

ない場合は、あなたのJSファイルは、以下のようなものを持っていることを確認してください