使用的webpack版本是 3.10.0
demo的目錄結構:
dist
|-- //用來存放打包后的文件
src
|--asset //存在需要打包的插件
|--page //存放入口文件以及模板文件
開始demo之前的一些准備:
**
1.創建一個目錄my_demo,進入當前目錄下,初始化一個package.json
npm init
2.安裝我們的wepack工具,為了方便，我全局安裝.
npm install --save--dev webpack //本地安裝
npm install -g webpack //全局安裝
3.安裝我們就接下來用到的依賴模塊,loader,以及插件
下述模塊loader的主要作用是用於把es6,es7編寫的源碼轉換成讓瀏覽器識別的代碼
npm install --save--dev babel-core babel-loader babel-preset-env
處理樣式的loader 將模塊的導出作為樣式添加到 DOM 中
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