webpack 引入 bootstrap

标签：模块   好处   思路   网站   str   代码   font   淘宝   没有   

　　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

　　　　后续内容.....稍后

webpack 引入 bootstrap

标签：模块   好处   思路   网站   str   代码   font   淘宝   没有   

原文地址：http://www.cnblogs.com/wyxxj/p/7381050.html