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”时，我看到了错误

未捕获的ReferenceError：require未定义

万一我删除

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

我为“供应商”添加了另一个入口点，使其成为一个大块，随后将其简单地添加为脚本。

谢谢。