Webpack configuration

本文关键字：configuration Webpack 更新时间：2023-09-26

问题是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大小，包括所有依赖的源代码，但没有错误发生。请帮我配置一下这个东西

所以最后的webpack。配置文件看起来像这样:

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

我已经为'vendor'添加了另一个入口点，使其成为一个块，稍后简单地添加为脚本。

谢谢。