WebPACKの構成

Question

問題はWebPACKのである、ここでの設定ファイルです：

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var nodeExternals = require('webpack-node-externals'); 

module.exports = { 
    devtool: 'source-map', 
    target: "node", 
    externals: [nodeExternals()], 
    resolve: { 
     extensions: [ '', '.js', '.jsx' ] 
    }, 
    module: { 
     loaders: [ 
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }, 
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, 
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' } 
     ] 
    }, 
    entry: { 
     main: ['./ReactApp/index.js'] //'./ReactApp/boot-client.jsx' 
    }, 
    output: { 
     path: path.join(__dirname, '/wwwroot/dist'), 
     filename: '[name].js', 
     publicPath: '/dist/' // Tells webpack-dev-middleware where to serve the dynamically compiled content from 
    }, 
    plugins: [ 
     new ExtractTextPlugin('main.css') 
    ] 
}; 

はこの設定で、私は75キロバイトで結果のバンドルを取得していますが、私は「main.js」をロードしていたとき、私はエラー

を参照してください

Uncaught ReferenceError: require is not defined

場合私は

target: "node", 
externals: [nodeExternals()], 

「main.js」を除去依存関係からのすべてのソースが含まれると1.5メガバイトのサイズになるが、エラーは発生しません。

Answer 1

だから、最終的webpack.configファイルは次のようになり、この事のために設定して私を助けてください：

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    devtool: 'source-map', 
    target: "web", 
    resolve: { 
     extensions: [ '', '.js', '.jsx' ] 
    }, 
    module: { 
     loaders: [ 
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }, 
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, 
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, 
      { test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/, loader: 'url'} 
     ] 
    }, 
    entry: { 
     main: ['./ReactApp/index.js'], 
     vendor: [ 
    //"babel-core" //fails to bundle 
    //"font-awesome" //fails to bundle 
    //"domain-task", //fails to bundle stuff 
    "bootstrap", 
    "formsy-react", 
    "formsy-react-components", 
    "griddle-react", 
    "history", 
    "jquery", 
    "memory-fs", 
    "react", 
    "react-bootstrap-typeahead", 
    "react-codemirror", 
    "react-dom", 
    "react-redux", 
    "redux", 
    "require-from-string", 
    "underscore", 
    "webpack-externals-plugin", 
    "redux-thunk", 
    ], 
    }, 
    output: { 
     path: path.join(__dirname, '/wwwroot/dist'), 
     filename: '[name].js', 
     publicPath: '/dist/' // Tells webpack-dev-middleware where to serve the dynamically compiled content from 
    }, 
    plugins: [ 
     new ExtractTextPlugin('main.css'), 
     new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'), 
    ] 
}; 

私はそれチャンクにするために「ベンダー」の他のエントリー・ポイントを追加しました、これ以降の単純スクリプトとして追加されました。

ありがとうございます。