webpack中引入jquery,bootstrap,以及第三方插件的使用

時間 2019-11-11

標籤 webpack 引入 jquery bootstrap 以及第三方插件使用欄目 JQuery 简体版

原文原文鏈接

使用的webpack版本是 3.10.0css

demo的目錄結構:html

dist     
  |--    //用來存放打包後的文件   
src 
  |--asset  //存在須要打包的插件   
  |--page  //存放入口文件以及模板文件

開始demo以前的一些準備:jquery

**webpack

1.建立一個目錄my_demo,進入當前目錄下,初始化一個package.json

npm initgit

2.安裝咱們的wepack工具,爲了方便，我全局安裝.

npm install --save--dev webpack //本地安裝es6

npm install -g webpack //全局安裝github

3.安裝咱們就接下來用到的依賴模塊,loader,以及插件

下述模塊loader的主要做用是用於把es6,es7編寫的源碼轉換成讓瀏覽器識別的代碼web

npm install --save--dev babel-core babel-loader babel-preset-envshell

處理樣式的loader 將模塊的導出做爲樣式添加到 DOM 中npm

npm install --save--dev css-loader style-loader

處理文件字體的,圖片路徑的loader

npm install --save--dev file-loader url-loader

壓縮用到的插件

npm install --save--dev uglify-es uglifyjs-webpack-plugin

暴露全局的expose-loader ,用來處理jquery插件

npm install --save--dev expose-loader

準備工做作好後, 開始配置咱們的webpack.config.js

期間我遇到的錯誤:

一開始打包的boostrap遇到的問題,出現一大堆關於boostrap引入字體，圖片，等等的一些錯誤,緣由:配置中沒有加入處理圖片的loader.

webconfig添加以下:

module:{
  rules:[
    //處理圖片  <br>
   {
     test: /\.(png|svg|jpg|gif)$/,
         use: ['file-loader']
        },
         //處理字體  <br>
        {
           test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [
                  'file-loader'
          ]
  }
 ]
}

主入口文件文件:main.js

require("../asset/bootstrap/css/bootstrap.css");
require("../asset/bootstrap/fonts/glyphicons-halflings-regular.eot");
require("../asset/bootstrap/fonts/glyphicons-halflings-regular.svg");
require("../asset/bootstrap/fonts/glyphicons-halflings-regular.ttf");
require("../asset/bootstrap/fonts/glyphicons-halflings-regular.woff");
require("../asset/bootstrap/fonts/glyphicons-halflings-regular.woff2");

測試文件test.html

<ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
</ul>

打開瀏覽器便可看到熟悉的bootstrap樣式

webpack中打包jquery

主入口文件引入main.js

require("../asset/jquery.js");

注意：

若是直接打包,不用loader處理或者插件處理,會出現$ is not undefinded，由於打包後，並無把$,jquery暴露出來，處於打包後本身的做用域中。

解決方案

我在此處用expose-loader解決這個問題,還有其它方案，具體看[官方文檔][1]

在配置文件中的module.rules 中設置以下:

解釋以下：用expose-loader暴露咱們的jquery全局變量,jQuery,$.

{          
             //jquery.js的路徑
            test: require.resolve('./src/asset/jquery.js'),                 
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'       
            },{
                loader: 'expose-loader',
                options: '$'
            }]
}

測試界面添加 test.html

<script>
        $(function(){
        alert('a');
        })
   </script>

結果:webpack後，打開test.html 如期彈出 a.皆大歡喜^o^

本覺得這樣引入jQuery第三方插件沒問題,但後期引入jquery-ui時又遇到了問題,報錯not resolve jquery 云云....;

打包jquery第三方插件

測試的插件
1.jquery-ul測試;
2.日期組件;

測試UI組件的時候,出現出現juery模塊沒有找到的問題, 可能猜想：是我用測試的jquery-ul插件不是最新的

解決:

webpack.config.js  下配置

  externals: {
    jquery: "jQuery"          //若是要全局引用jQuery，無論你的jQuery有沒有支持模塊化，用externals就對了。
  }

  配合expose-loader使用; 瀏覽器控制檯和shell界面不報錯

主入口文件main.js

require("../asset/bootstrap/css/bootstrap.css");
require("../asset/bootstrap/fonts/glyphicons-halflings-regular.eot");
require("../asset/bootstrap/fonts/glyphicons-halflings-regular.svg");
require("../asset/bootstrap/fonts/glyphicons-halflings-regular.ttf");
require("../asset/bootstrap/fonts/glyphicons-halflings-regular.woff");
require("../asset/bootstrap/fonts/glyphicons-halflings-regular.woff2")

require("../asset/jquery.js");
require("../asset/bootstrap/js/bootstrap.js");

//引入jquery-ui
require("../asset/bootstrap-datetimepicker/jquery-ui.min.css");
require("../asset/bootstrap-datetimepicker/jquery-ui.min.js");

//引入日期插件
require("../asset/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css");
require("../asset/bootstrap-datetimepicker/bootstrap-datetimepicker.js");
require("../asset/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js");

//測試界面以下:test.html

測試界面以下:
     <!DOCTYPE html>
        <html lang="en">
            <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <meta http-equiv="X-UA-Compatible" content="ie=edge">
              <title>Document</title>
              <style>
                #toggle {
                width: 100px;
                height: 100px;
                background: #ccc;
              }
              </style>
                </head>
                <body>
                    <ul class="nav nav-pills">
                        <li role="presentation" class="active"><a href="#">Home</a></li>
                        <li role="presentation"><a href="#">Profile</a></li>
                        <li role="presentation"><a href="#">Messages</a></li>
                    </ul>
                    <div id="toggle"></div>

                        <form class="form-inline">
                            <div class="form-group">
                                <label>時間：</label>
                                <div class="input-group date form_datetime_day">
                                  <input type="text" class="form-control" id="start_date">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                      </div>                                                               
                            </div>                          
                          </form>
      <script src="bundle.js"></script>
      <!-- <script src="../src/asset/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script> -->
      <script>
        $(function(){   
              $( document ).click(function() {
                 $( "#toggle" ).toggle( "blind" );
          });

               $('.form_datetime_day').datetimepicker({  
                  language: 'zh-CN',
                  format: 'yyyy-mm-dd hh:ii:ss',
                  autoclose: true, 
                  todayBtn: true,
                  showClear:true,
                  startView: 'month',
                  minView:'month',
                  maxView:'decade',
                  toolbarPlacement:'bottom',
                  showTodayButton:false,
                  icons:{today:'glyphicon glyphicon-time'},
                  todayBtn:'linked'
                  });   
          console.log(jquery);
        })
      </script>
    </body>
</html>

測試日期組件的時候，遇到打包成功，可是瀏覽器控制檯報錯:出現 $().datepicker() is not a function.....通過排查,換了個新版本的boostrap-datepicker.js而後打包成功了.
猜想:1.多是源文件的boostrap-datepicke.js下載了被做了改動,
2.多是舊版本問題

最後wepack,jQuery-ui中的方法正常使用;

打包第三方插件

使用expose-loader
測試插件 : sweetalert2
若是一開始直接引入
main.js

//測試彈出框
require("../asset/sweetalert2/sweetalert2.min.js");
require("../asset/sweetalert2/sweetalert2.min.css");

test.html

<script>
  swal("hello world");
</script>

而後直接webpack，shell控制檯沒有紅色出現,問題是打開測試頁面後，沒有要的彈出框，瀏覽器下還包swal is not undefined.....,緣由是swal全局並無暴露出來

解決:

{             
           // 這裏是引入插件的路徑
            test: require.resolve('./src/asset/sweetalert2/sweetalert2.min.js'),   
            use: [{
                loader: 'expose-loader',    
                options: 'swal'    //暴露的變量 ，設置爲swal
            }]

}

最後webpack,打開測試界面彈出熟悉的彈出框 hello word

github地址: https://github.com/zhuiye/webpack-learn