Question

这是我的webpack.config.js文件

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const parts = require('./webpack.parts');

const PATHS = {
    scripts: {
        home: path.join(__dirname, 'public', 'app', 'home'),
        upload: path.join(__dirname, 'public', 'app', 'upload')
    },
    styles: {
        home:  path.join(__dirname, 'public', 'app', 'home', 'styles.scss'),
        upload: path.join(__dirname, 'public', 'app', 'upload', 'styles.scss'),
        commons: path.join(__dirname, 'public', 'app', 'commons', 'styles.scss')
    },
    vendor: ['jquery', 'foundation-sites'],
    build: path.join(__dirname, 'public', 'build')
};

const common = {
    entry: {
        home: [PATHS.scripts.home, PATHS.styles.home],
        upload: [PATHS.scripts.upload, PATHS.styles.upload],
        // app's common shared parts, for the moment just styles
        commons: PATHS.styles.commons
    }
    output: {
        path: PATHS.build,
    },
    stats: {
        // Nice colored output
        colors: true
    }
};
module.exports = function(env) {
    if (env === 'production') {
        return merge(
            common,
            {
                devtool: 'source-map',
                output: {
                    // This is used for code splitting. The setup
                    // will work without but this is useful to set.
                    chunkFilename: '[chunkhash].js',
                    publicPath: '/public/',
                    // Production file name
                    filename: '[name].[chunkhash].js'
                }
            },
            parts.clean(PATHS.build),
            parts.setFreeVariable(
                'process.env.NODE_ENV',
                'production'
            ),
            parts.extractBundle({
                entries: PATHS.vendor,
                name: 'vendor'
            }),
            parts.setupStyles(),
            parts.setupScripts()
        );
    }
[...]

在我的wepack.parts.js

中

exports.extractBundle = function(options) {
    const entry = {};
    entry[options.name] = options.entries;

    return {
        // Define an entry point needed for splitting.
        entry: entry,
        plugins: [
            // Extract bundle and manifest files. Manifest is
            // needed for reliable caching.
            new webpack.optimize.CommonsChunkPlugin({
                names: [options.name, 'manifest'],
                minChunks: Infinity,
                // (with more entries, this ensures that no other module
                //  goes into the vendor chunk)
            })
        ]
    };
};

正如您所看到的，我尝试使用我的供应商库生成一个单独的包，在本例中为jquery和foundation，但是当后者加载到捆绑的供应商文件中时，会出现类型错误： ＆＃34; jQuery未定义＆＃34; 被抛出。我可以在供应商包代码中看到所有基础库都包含在(function($){})(jQuery)类型的 IIFE 中，因此它尝试访问全局jQuery对象。

Webpack，解决供应商包中的jQuery依赖关系

0 个答案: