webpack打包js/css/scss/less/styl等（可以打包圖片）
Webpack
1. 什麼是webpack？
打包，壓縮各種靜態資源的工具(css,js,圖片，圖示等)
2.目的
效能優化
減少瀏覽器向服務端請求的次數
節約伺服器的的頻寬資源
3.如何使用
介紹
webpack是基於Nodejs的，
webpack是執行在Nodejs環境下的
webpack將各種靜態資源整合在一起
JS
.js .jsx .ts .coffee
CSS
.css .less .scss .styl
image
.png jpeg .jpg .gif .svg .psd .ico
font
.ttf .woff
安裝webpack
先全域性安裝webpack
1.npm init -y
2.npm i -g webpack(只需安裝一次，因為是全域性)
3.npm i [email protected] -D（將模組新增到package.json檔案到devdependencies（開發依賴）中這一項去）
打包js
Index.html
在package.json檔案中
1"build":"webpack 要被打包的js檔案 目標js檔案（打包到哪裡去） --watch"
-watch 監聽
當要被打包的檔案一發生變化，自動產出build.js,無需手動
若不寫--watch，則不會監聽，需手動再執行一次npm run build
Eg:
"scripts": {
"build":"webpack ./main.js ./build.js --watch"
},
2. 可以通過配置webpack.config.js 來設定其的入口檔案和出口檔案以及是否監聽
webpack.config.js
module.exports = {
watch:true,//是否監聽
//入口檔案
entry:'./main.js',
//出口檔案
output:{
filename:'./build.js'
}
}
package.json
"scripts": {
"build":"webpack"
}
也可以不在webpack.config.js配置監聽
webpack.config.js
module.exports = {
//入口檔案
entry:'./main.js',
//出口檔案
output:{
filename:'./build.js'
}
}
package.json
"scripts": {
"build":"webpack --watch"
}
在其裡面使用模組語法（es6）
匯出/對外暴露模組並在另一個檔案引入
法一
export 匯出/對外暴露模組
import {名字} from '要匯入的檔案
模組：
export let a=100;
export let b= 200;
引入模組的檔案
引入
Import {a,b} from ‘模組檔案’;
使用
Console.log(a,b)
法二
export default 變數/函式/物件
import 名字 from '要匯入的檔案路徑'
模組：
let c = 300;
export default {
add(...arrs){
return arrs.reduce((init,next)=>init+next)
},
c
}
引入模組的檔案
引入檔案
Import myMath from ‘模組檔案’;
使用：
Console.log(myMath.c)
myMath.add(10,30)
若同時都有
import * as 別名 from '要匯入的檔案路徑'
對於export default:
別名.default 取到值
別名.變數名/函式名 取到值
export default {
add(...arrs){
return arrs.reduce((init,next)=>init+next)
},
c
}
export let a=100;
export let b= 200;
引入模組的檔案
引入
Import * as myMath from ‘模組檔案’;
使用
Console.log(myMath.a,myMath.b)
myMath.default.add(200,100);
打包css/less/scss/styl(含圖片)檔案
webpack實際只能打包js檔案，所以要打包css需將css檔案引入入口檔案（eg：main.js），
並在配置檔案中配置一些東西。（css則無需在html檔案中用link引入了，eg：index.html）。
因其只能打包js,所以是在打包js的基礎上打包css，打包js的相關配置是需要的
Index.html檔案
<body>
<divid="box">
哈哈哈哈
</div>
<scriptsrc="./bulid.js"></script>
</body>
package.json
"scripts": {
"build": "webpack --watch"
}
main.js（入口檔案）
引入css/scss/less/styl檔案
import'./common/css/style.css';
import'./common/css/style.less';
//引入scss
import'./common/css/reset.scss'
//引入
import'./common/styl/co.styl';
//若想在這新增背景圖(在配置檔案裡已經進行了相關配置，所以可以直接在css/scss/less/styl裡直接使用圖片)
$('body').css({
backgroundImage:url('./common/img/8579.jpg')
})
/*
import imgObj from'./common/img/8579.jpg';
$('body').css({
backgroundImage:`url(${imgObj})`
})
*/
webpack.config.js(配置檔案)當然你在這裡用到的包，需要去下載
module.exports={
//入口檔案
entry:'./main.js',
//出口檔案
output:{
filename:'./bulid.js'//此檔名可以隨便起
},
module:{
loaders:[{
test:/\.css$/,
loader:'style-loader!css-loader'
},
{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader'
},{
test:/\.scss$/,
loader:'style-loader!css-loader!sass-loader'
},
{
test:/\.styl$/,
loader:'style-loader!css-loader!stylus-loader'
},
//圖片的相關配置
{
test:/\.(png|jpe?g|gif|psd|svg|icon)$/,
loader:'url-loader'
}
]
}
}