JS:为什么Webpack输出未按输入顺序进行编译?

时间:2019-09-03 15:41:17

标签: javascript webpack

我是webpack的新手。我正在尝试按特定顺序编译供应商文件,因为某些脚本依赖于其他脚本。就我而言,是angular和jquery。

但是,webpack不会按照我在条目中定义的数组的顺序编译js

我尝试了Webpack bundles my files in the wrong order (CommonsChunkPlugin)的建议,但是commonschunkplugin已被弃用,替代方法会引发错误并且无法编译。

获得此修复程序的目的是将我的工作代码库从javascript es5转换为打字稿es6,也从css转换为sass。

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

var vendors = [
    './node_modules/jquery/dist/jquery.min.js',
    './node_modules/jquery-ui-dist/jquery-ui.min.js',
    './node_modules/angular/angular.js',
    './node_modules/angular-animate/angular-animate.js',
    './node_modules/angular-cookies/angular-cookies.js',
    './node_modules/angular-loader/angular-loader.js',
    './node_modules/angular-local-storage/dist/angular-local-storage.js',
    './node_modules/angular-mocks/angular-mocks.js',
    './node_modules/angular-resource/angular-resource.js',
    './node_modules/angular-route/angular-route.js',
    './node_modules/angular-sanitize/angular-sanitize.js',
    './node_modules/angular-scenario/angular-scenario.js',
    './node_modules/angular-touch/angular-touch.js',
    './node_modules/angular-file-upload/dist/angular-file-upload.min.js',
    './node_modules/angular-file-upload-shim/dist/angular-file-upload-shim.min.js',
    './node_modules/bootstrap/dist/js/bootstrap.min.js',
    './node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',    
    './node_modules/fileapi/dist/FileAPI.min.js',
    './node_modules/ag-grid/dist/ag-grid.min.js',
    './node_modules/g2-bracket-parser/index.js',
    './node_modules/ui-select/dist/select.min.js',
    './node_modules/selectize/dist/js/selectize.min.js',
    './node_modules/angular-selectize/angular-selectize.js',
    './node_modules/scenejs/dist/scene.min.js',
    './node_modules/sprintf/lib/sprintf.js',
    './node_modules/angular-ui-sortable/dist/sortable.min.js',
    './Scripts/moment-with-locales.min.js',
    './node_modules/underscore/underscore-min.js',
    './node_modules/d3/dist/d3.min.js',
    './node_modules/d3-tip/dist/index.js'
];

module.exports = {
    entry: {
        Vendors: vendors
    },
    output: {
        path: path.resolve(__dirname, './dist/js'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    mode: 'development',
    plugins: [
        new webpack.IgnorePlugin(/\.\/locale$/),
        new webpack.NamedModulesPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'            
        })
    ]
}

期望首先编译jquery,然后编译jquery-ui,然后再编译angular.js,等等。

实际是按时间顺序进行的。min.js首先编译

0 个答案:

没有答案