从webpack 2.1.0升级到Webpack 4.12.0破坏了我们的构建,为什么?

时间:2018-08-01 08:32:50

标签: javascript html webpack webpack-4

我首先要说我是一个webpack菜鸟,所以对您的帮助非常感谢。

所以

我对Js捆绑包的布局是我们有两个捆绑包:

bundle.js
tablesbundle.js

bundle.js包含我们所有页面的标准javascript。 tablebundle.js包含datatables.net库。

现在在我们的旧项目中,我们使用的是webpack 2.1.0,我们要做的就是在布局文件上引用bundle.js,在任何需要使用datatables.net的页面上引用tablebundle.js,然后在我们的bundle.js任何调用创建数据表的页面都可以正常工作。

但是,在移至webpack 4.12.0之后,此方法不再起作用,它无法使用在tablebundle.js中找到的datatables初始化程序方法,tablebundle.js中唯一的代码是:

require("datatables.net");

现在,如果我将该行移动到bundle.js中,则可以正常工作,但我们不希望每个页面上都有数据表,看来我们的捆绑js文件无法跨捆绑通信,但是它们在以前的版本中可以通信。

如果有人可以解释或提供帮助,那就太好了。

-配置文件-

 module.exports = {
    entry: {
        bundle: "./Scripts/index.js",
        libraries: './Scripts/libraries.js',
        datatablesbundle: "./Scripts/tablesBundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ],
            },
            {
                test: /\.sass$|\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {},
                    },
                    { loader: 'postcss-loader' },
                    { loader: 'sass-loader' },
                ],
            },
            {
                test: /\.(jpg|png)$/,
                use: 'file-loader?name=[path][name].[hash].[ext]'
            }
        ],
    },


    plugins: getPlugins(),
    output: {
        path: BUILD_DIR,
        filename: '[name].js'
    },
    //optimization: {
    //    splitChunks: {
    //        chunks: 'all'
    //    }
    //},

    resolve: {
        modules: ["web_modules", "node_modules"],
        alias: {
            jquery: "jquery/src/jquery",
            'picker': 'pickadate/lib/picker'
        }
    }
}

    function getPlugins() {

        var isProd = (process.env.NODE_ENV === 'production');

        var plugins =
            [
                new MiniCssExtractPlugin({
                    filename: "[name].css"
                }),

                new webpack.ProvidePlugin({
                    "window.$": "jquery",
                    $: "jquery",
                    jQuery: "jquery",
                    Popper: "popper.js"
                })
            ];

        if (isProd) {
            plugins.push(
                new UglifyJSPlugin({
                    output: {
                        comments: false,
                        beautify: true,
                        sourceMap: true
                    }
                }));

            plugins.push(
                new OptimizeCssAssetsPlugin({
                    assetNameRegExp: /\.(css|scss|sass)$/,
                    cssProcessorOptions: { discardComments: { removeAll: true } }
                }));

        }

        return plugins;
    }

0 个答案:

没有答案