Webpack 2沒有以正確的順序編譯文件

當我運行webpack時，我的javascript資源沒有按照正確的順序編譯。正確的順序應該是Webpack 2沒有以正確的順序編譯文件

jQuery的
引導

然而，遵守包文件包含自舉第一則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';

來源

2017-01-03 Erkan Demir

中的模塊存在於的WebPack輸出的順序並不一定意味着是訂單在其中加載它們。在代碼中需要/導入之前，webpack不會加載（執行）jQuery模塊。實際上，你會看到執行順序仍然是正確的。

來源

2017-01-03 14:37:22 Ambroos

感謝您的評論。但是，當頁面加載時，我得到的錯誤控制檯中沒有定義jQuery。 Bootstrap依賴於Jquery。 –

@ErkanDemir，你有沒有得到答案呢？ – icfantv

您可能需要設置

global.jQuery = require('jquery');

在使用引導js文件。我在使用另一個js庫時遇到了這個問題，這個js庫依賴於jQuery，我通過npm安裝了它，並將其安裝到了我的js文件中，但是它沒有找到jQuery。

原因是很多使用jQuery的js圖書館已經移植到npm，似乎沒有使用require（）ing jQuery的CommonJS方法，他們只是在全局命名空間中尋找jQuery定義。

來源

2017-02-16 14:14:55

Webpack 2沒有以正確的順序編譯文件

回答

相關問題