webpack 引入 bootstrap(一)

　　Bootstrap中是一種事實上的界面標准，標准到現在的網站大量的使用它。如果可以使用webpack引入的bootstrap，就可以一個npm install完成項目的依賴，而不必手工的添加到html內。

　　首先咱們在前端剛興起的時候，是在html頁面通過<script src='./js/bootstrap.js'> <link href='./css/bootstrap.css'>倆個標簽引入bootstrap，在webpack中我們要引入它，也要分這倆個部分。

　　1、 npm install bootstrap --save-dev    或者使用淘寶鏡像   cnpm install bootstrap --save-dev；

　　　　然后咱們在代碼中引入bootstrap.js

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

　　　　打包然后會發現有一個錯誤，沒有找到全局的 jquery，需要我們去包管理器中下載jquery--  npm install jquery--save-dev

　　　　配置plugins插件部分：

    plugins:[
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
        
    ]

　　　　在我們頁面中輸出一行 cosole.log($(document.body)) ; 可以看到輸出內容是一個Jquery對象，說明jquery引入成功，但是bootstrap還是拋出了一個錯誤  “沒有找到全局的 jquery”.其實我們可以換個思路，webpack是一個模塊化打包工具，它打包的第三方模塊是經過處理的，不會在全局創建一個接口，而bootstrap文件依賴於全局jquery，所以報錯。

　　　　首先來介紹我最為推薦的方法：ProvidePlugin + expose-loader，

        plugins:[
		new webpack.ProvidePlugin({
		    $: "jquery",
      		    jQuery: "jquery",
      		    'window.$':'jquery',
      		    'window.jQuery':'jquery'
		})
		
	]    

 

　　

　　　　　　　{
                test:require.resolve('jquery'),
                loader:'expose-loader?$!expose-loader?jQuery'
            },

　　　　ProvidePlugin的機制是：當webpack加載到某個js模塊里，出現了未定義且名稱符合（字符串完全匹配）配置中key的變量時，會自動require配置中value所指定的js模塊。

如上述例子，當某個老式插件使用了jQuery.fn.extend(object)，那么webpack就會自動引入jquery（此處我是用NPM的版本，我也推薦使用NPM的版本）。

另外，使用ProvidePlugin還有個好處，就是，你自己寫的代碼里，再！也！不！用！require！jQuery！啦！畢竟少寫一句是一句嘛哈哈哈。

　　　　有了ProvidePlugin為嘛還需要expose-loader？問得好，如果你所有的jQuery插件都是用webpack來加載的話，的確用ProvidePlugin就足夠了；但理想是豐滿的，現實卻是骨感的，總有那么些需求是只能用<script>來加載的。

　　　　第二部分 引入bootstrap.css

　　　　第三部分 打造webpack 自定義bootstrap

　　　　后續內容.....稍后