Webpack 2 не компилирует файлы в правильном порядке

Question

Когда я запускаю webpack, мои активы javascript не выполняются в правильном порядке. Правильный порядок должен быть

1. Jquery
2. Bootstrap

Однако выполнил файл содержит пакет Bootstrap первую затем Jquery. Пожалуйста, смотрите ниже

webpack.config

var path = require('path'); 
var webpack = require('webpack'); 
var extractTextPlugin = require('extract-text-webpack-plugin'); 
var cleanWebpackPlugin = require('clean-webpack-plugin'); 

var jsDestPath = './wwwroot/'; 

const config = { 
    entry: { 
    css: './Assets/scss/app.scss', 
    app: './Assets/js/app.js', 
    vendor: './Assets/js/vendor.js' 
}, 
output: { 
    path: path.resolve(__dirname, 'wwwroot/js'), 
    filename: '[chunkhash].[name].js' 
}, 
module: { 
    rules: [ 
     { 
      test: /\.js$/, 
      use: 'babel-loader' 
     }, 
     { 
      test: /\.scss$/, 
      loader: extractTextPlugin.extract({ 
       loader: 'css-loader!sass-loader' 
      }) 
     } 
    ] 
}, 
plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     names: ['vendor', 'manifest'] //Specify the common bundle's name. 
    }), 

    new extractTextPlugin({ filename: 'bundle.css', disable: false, allChunks: true}), 

    new webpack.LoaderOptionsPlugin({ 
     debug: true, 
     minimize: true, 
    }), 

    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
      warnings: true, 
     } 
    }), 

    new cleanWebpackPlugin(['js'], { 
     root: jsDestPath, 
     verbose: true, 
     dry: false 
    })  
], 
} 

module.exports = config; 

vendor.js

import 'jquery/dist/jquery.js'; 
import 'bootstrap/dist/js/bootstrap.js'; 

Answer 1

Порядок, в котором модули присутствуют в выходном WebPack не обязательно означает, что есть порядок в котором они загружены. webpack не будет загружать (исполнять) модуль jQuery до того, как он будет необходим/импортирован в код. В действительности вы увидите, что порядок выполнения все равно будет правильным.

Answer 2

Вам может понадобиться установить

global.jQuery = require('jquery'); 

В файле JS, который использует Bootstrap. Я столкнулся с этой проблемой при использовании другой js-библиотеки, которая зависела от jQuery, которую я установил через npm и потребовался в файл js, но он говорил, что jQuery не найден.

Причина в том, что много js-библиотек, которые используют jQuery, которые были перенесены в npm, похоже, не используют надлежащий метод CommonJS require() ing jQuery, они просто ищут определение jQuery в глобальном пространстве имен.