web pack是一個前端資源模板管理的打包工具,它可以將css,js,image,vue等文件當(dāng)做一個模塊,自動處理內(nèi)部的依賴關(guān)系,依照指定的規(guī)則進(jìn)行打包,最終將這些資源輸出到一個統(tǒng)一的.js文件中,將來在系統(tǒng)中只需要請求這個打包好的js文件即可完成所有的功能
一.特點:
1.loader;
web pack自身自能處理JavaScript類型的文件,如果要處理其他類型的文件,就需要loader(加載器)進(jìn)行轉(zhuǎn)換.loader可以看成是模塊與靜態(tài)資源的轉(zhuǎn)換器,他自身也是一個函數(shù),接收源文件作為參數(shù),返回轉(zhuǎn)換后的結(jié)果
2.plugin
plugin可以完成更多l(xiāng)oader不能完成的功能,插件的存在使得webpack非常靈活
二.使用步驟
1.全局安裝webpack===>npm install webpack -g
2.在當(dāng)前項目中安裝webpack===>npm install webpack --save
3.利用webpack打包CSS文件
打包css文件需要依賴style-loader/css-loader,利用npm安裝.npm install style-loader css-loader --save-dev;在webpack.config.js文件中進(jìn)行配置的時候,loader:'style-loader!css-loader'.style-loader放在前面,與CSS-loader中間中"!"分隔開
4.利用webpack-dev-server和html-webpack-plugin實現(xiàn)頁面刷新和自動打包
(1)html-webpack-plugin這個插件可以自動生成一個index.html文件在內(nèi)存中,只有個這樣web pack-dev-server才能實現(xiàn)實時刷新頁面和實時打包
a).安裝:npm install html-webpack-plugin ?--save-dev
b).在webpack.config.js文件中導(dǎo)入 var HtmlWebpackPlugin=require('html-webpack-plugin');
Plugins:[
new HtmlWebpackPlugin({
? ? ? ?title:'生成頁面的標(biāo)題'
? ? ? ?filename:'index.html'//生成頁面的文件名稱
? ? ? ?template:'index.html'//根據(jù)這個模板來生成上面的文件
})
]
c).安裝npm install webpack webpack-dev-server --save-dev?
d).在package.json中的''scripts'':{
? ? ?"dev":"webpack-dev-server --inline --hot --port 端口號 --open"
? ? ?"build":"webpack"
}
e).輸入指定npm run dev即可自動打開瀏覽器,端口號即為你自己配置的端口號
webpack相關(guān)參數(shù):
--inline:自動刷新
--hot:熱加載和inline配合使用
--port 端口號
--open:自動在瀏覽器中打開
--host:可以指定服務(wù)器的ip,不指定默認(rèn)為Localhost127.0.0.1
5.將es6語法轉(zhuǎn)換為es5語法
安裝的包:npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev
在webpack.config.js文件中進(jìn)行配置
a).在loader中{
? ? ? test:/.\.js$/,
? ? ? loader:'babel'
? ? ? ?exclude:/node_modules/==>忽略這個文件的編譯
}
b).在babel屬性中
babel:{
? ? ? presets:['es2015'],
? ? ? ?plugins:['transform-runtime']
}
