這個東西很好用 -這就是對它的評價
webpack是干啥滴:看這里
作為一個工具，我們只談?wù)撊绾嗡腿绾斡煤盟?/p>
- 老樣子，第一步創(chuàng)建一個案例文件夾（我的就叫webpack了）
mkdir webpack
cd webpack
- 安裝（這里的前提是你已經(jīng)安裝了node和npm，還沒有的話請看我的javascript服務(wù)器文集中的初步或者自己搜索安裝上）
npm install webpack -g //全局安裝，方面使用
- 環(huán)境配置
npm init
npm install webpack --save-dev //將webpack配置到config.js中去
- 預(yù)備場地
按照開發(fā)web的套路，先創(chuàng)建幾個文件
touch index.html style.css main.js
接著在里面隨便寫點東西
<!--index.html-->
<html>
<head>
<link href='./style.css' type='text/css'/>
</head>
<body>
<script type='text/javascript' src='./main.js'>
</body>
</html>
/*style.css*/
body{
background:#FF0000;
}
//main.js
document.write('hello world！');
現(xiàn)在我們執(zhí)行index.html在chrome中運行會看到一個紅色背景的頁面，里面寫著hello world!
到這里應(yīng)該沒有一絲的難度(如果有的話,你可以返廠）
- 開始干
- 先來一個開胃菜
創(chuàng)建一個js執(zhí)行文件done.js，將main.js的內(nèi)容復(fù)制進來
cp main.js done.js
然后清空main.js文件的內(nèi)容
執(zhí)行webpack命令
webpack ./done.js main.js
你會看到webpack給出的一些明細...
刷新一下index.html頁面，發(fā)現(xiàn)沒有變化～，現(xiàn)在可以看一下main.js文件內(nèi)容了，密密麻麻的好多～
-
到這里，你已經(jīng)對使用webpack入門了。下面我們趁熱打鐵，說說在項目中你該怎么用，畢竟這個這種方式用起來還是挺麻煩滴
- 配置文件解決麻煩
touch webpack.config.js #你可以創(chuàng)建其他名稱的配置文件，但webpack缺省下會執(zhí)行這個名稱的文件
module.exports = {
entry:'./done.js' , //入口文件，也就是我們剛剛定義的done.js文件
output:{ //這有好幾種書寫方式，我經(jīng)常用這個^-^
path:__dirname,
filename:'main.js'
}
}
為了驗證我們配置成功了，將done.js中的輸出內(nèi)容改成changed!
執(zhí)行命令
webpack //就這個單詞就行了，可以看到webpack的執(zhí)行詳情(但沒有人會在配置文件中寫東西～)
done.js為entry入口文件，這個文件中只寫配置，不做具體處理，當(dāng)然webpack也建議我們這么做
- 我們這樣修改
1.創(chuàng)建一個新的js文件，（我用的是content.js），將done.js內(nèi)容復(fù)制過來,寫一些也可以，沒倆字。
2.修改 done.js
require('./content')
你可以看效果了
- 然而并沒完，把css和img文件一起打包了
- 先將index.html文件中的css引入刪除
- 在done.js中引入 require('./style.css'); (到這里執(zhí)行webpack并沒有效果)
- 安裝css加載器
npm install css-loader style-loader
- 配置webpack.config文件
module.exports = {
entry:'./done.js' ,
output:{
path:__dirname,
filename:'main.js'
},
module:{
loaders:[
{test:/\.css$/,loader:'style-loader!css-loader'} //這里的style-loader!和css-loader是可以省略loader的，寫成style!css，下面你會看到和他對應(yīng)的地方
]
}
}
- 引入css文件——在done.js中加入
require('!style-loader!css-loader!.style.css'); //這里需要看和上面配置文件中的對應(yīng)點
執(zhí)行webpack，查看效果
隨便搞來一張圖片（我已經(jīng)重命名為1.png），我們來測試webpack的圖片加載器
安裝url加載器，注意加載圖片的不是image-loader而是url-loader
npm install url-loader
配置webpack.config
module.exports = {
entry:'./done.js' ,
output:{
path:__dirname,
filename:'main.js'
},
module:{
loaders:[
{test:/\.css$/,loader:'style-loader!css-loader'},
{test:/\.(png|jpg|jpeg|gif)$/,loader:'url-loader?limit = 1024'} //limit是參數(shù)，如果小于1k就直接轉(zhuǎn)Base64，可選
]
}
}
- 通過webpack加載圖片，打開done.js
require('url-loader?mimetype=image/png!./1.png');
- 頁面中該怎么用就怎么用吧！
- 最后是個重磅的東西，es6自動轉(zhuǎn)碼 ----babel-loader
- 安裝
npm install babel-loader babel-core babel-preset-es2015 --save-dev
- 配置
module.exports = {
entry:'./done.js' ,
output:{
path:__dirname,
filename:'main.js'
},
module:{
loaders:[
{test:/\.css$/,loader:'style-loader!css-loader'},
{test:/\.(png|jpg|jpeg|gif)$/,loader:'url-loader?limit = 1024'},
{test:/\.js$/,loader:'babel-loader?presets[]=es2015'}//這個有多種配置，探究竟請點擊下面連接
]
}
}
- 官方聲明由于babel-loader執(zhí)行慢，可以使用babel-runtime,這個和babel配置類似，請點擊上面高能地址配置。
好了，這個插件基本就就是這樣了，在現(xiàn)代javascript屌炸天的時代開發(fā)大中型項目使用還是相當(dāng)不錯的。
案例很短，大家可以自己測試運行，有什么問題歡迎留言，共同探討！
