Question

我利用webpack在我的一个应用程序中构建了js（我真的很后悔，但是那是另一回事了），我需要在webpack配置中定义2个切入点，因为webpack不适用于gulp（gulp是我的任务）跑步者）并做自己的事。

我知道了

app.js
map.js

我想对此进行拆分，因为并不是首页上所有地图功能都需要，而且我认为异步加载它会很好。

因此我将其拆分，并避免通过不要求/导入它们而多次导入相同的依赖项。

但是出于某些原因，webpacks认为自己更聪明，并且无论如何都会导入jquery。

我想出了避免这种情况的正确方法，这将是webpack配置中的“外部”部分，但是我如何将其配置为仅将jquery定义为map.js的外部对象，而不是app.js的外部

这是我的webpack配置

const webpack = require('webpack');
const path = require('path');

var config = {
    entry: {
        app: './src/js/app.js',
        map: './src/js/map.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/public/static/js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules\/easy-autocomplete/,
                query: {
                    presets: [
                        'es2015',
                        'react',
                        'flow',
                    ],
                    'cacheDirectory': true
                }
            }
        ]
    },
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // @see https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.$": "jquery",
            "window.jQuery": "jquery"
        }),
    ],
    resolve: {
        modules: [
            'node_modules',
            path.resolve(__dirname, 'src/js'),
        ],
        alias: {
            'react': 'preact-compat',
            'react-dom': 'preact-compat',
        }
    }
};

module.exports = config;

webpack多个条目文件，将jquery定义为一个条目的外部

0 个答案: