的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') 
    ] 
}; 

有了这个配置我正在导致75KB包，但是当我加载“main.js”，我看到错误

Uncaught ReferenceError: require is not defined

在情况下，我除去

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

'main.js' 变为1.5MB大小与来自依赖所有来源包括，但没有错误发生。请帮我配置这个东西

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'), 
    ] 
}; 

我已经添加了“供应商”的另一个切入点，使其一大块，后来干脆添加为脚本。

谢谢。