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的结果包，但是当我加载＆＃39; main.js＆＃39;时，我看到错误

  

未捕获的ReferenceError：未定义require

如果我删除

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

＆＃39; main.js＆＃39;变为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'),
    ]
};

我已为“供应商”添加了另一个切入点＆＃39;使它成为一个块，后来只是添加为脚本。

谢谢。