Question

我的网站包构建有2个条目 vendor.js =＆gt; vendor.js 文件和 index.js =＆gt; bundle.js

显然，vendor.js是所有第三方库所在的文件，而index.js是我的代码。

我遇到了一些问题，我包含的许多第三方库（在vendor.js中）都没有从 bundle.js 执行。那是为什么？

我的网络包配置：

import path from 'path';

var webpack = require('webpack');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');

var precss = require('precss');
var autoprefixer = require('autoprefixer');

module.exports = {
    entry: {
        bundle: './dev/index.js',
        vendor: './dev/vendor.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        // publicPath: 'http://localhost:3000/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].bundle.js'
    },
    externals: [
        {
            "./dev/assets/Paraxify/paraxify.js": "paraxify",
        }
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                // exclude: path.resolve(__dirname, "node_modules"),
                loader: 'babel-loader',
                // exclude: [
                //  path.resolve(__dirname, "node_modules"),
                // ],
                query: { 
                    compact: true,
                    plugins: ["transform-es2015-modules-commonjs"],
                    presets: ['es2015', 'stage-0'] 
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract(
                    "style",
                    "css!postcss-loader!sass")
            },
            // { test: /jquery/, loader: 'expose?$!expose?jQuery' },
            { test: /\.jpg$/, loader: "file-loader?name=./assets/imgs/[name].jpg" },
            { test: /\.png$/, loader: "file-loader?name=./assets/imgs/[name].png" },
            { test: /\.(gif|woff|woff2|eot|ttf|svg)$/, loader: "url-loader" },
            // { test: /\grabbing.gif$/, loader: "url-loader" },
            // { test: /\preloader.gif$/, loader: "url-loader" },
            // { test: /\default-skin.svg$/, loader: "url-loader" },
            // { test: /\/default-skin.png$/, loader: "url-loader" }

            // { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
        ]
    },

    postcss: function () {
        return [precss, autoprefixer];
    },


    plugins: [
        new CopyWebpackPlugin([
            { from: './dev/assets', to: 'assets' }
        ]),
        new CopyWebpackPlugin([
            { from: './dev/bootstrap3', to: 'bootstrap3' }
        ]),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['bundle', 'vendor']
        }),
        new HtmlWebpackPlugin({
            hash: false,
            template: 'ejs!./dev/index.html',
            inject: 'body'
        }),
        new ExtractTextPlugin("styles.[hash].css"),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        // new webpack.ProvidePlugin({
        //  twentytwenty: "frontend/dev/assets/twentytwenty/js/jquery.twentytwenty"
        // })
    ]

};

问题示例：

Vendor.js：导入Scrollreveal（https://scrollrevealjs.org/）

import $ from 'jquery';
// import 'eqcss';

// import Rx from 'rx';

import * as ScrollReveal from 'scrollreveal';

当我执行：window.sr = ScrollReveal({ reset: true });以使变量全局可用时，我在浏览器的控制台中收到错误：Uncaught TypeError: ScrollReveal is not a function

有人可以解释我的错误吗？感谢

Webpack供应商第三方模块和babel-loader

0 个答案: