運(yùn)行
npm run dev
執(zhí)行的是 dev-server.js
一,入門:
1,全局安裝webpack;npm install -g webpack;
2,新建一個(gè)根文件夾存放項(xiàng)目,里面新建一個(gè)package.json文件,新建方法是:npm init,然后會(huì)有一系列選項(xiàng),默認(rèn)就好;
3,cd到新建的根文件夾,安裝webpack,npm install webpack --save-dev,執(zhí)行之后會(huì)出現(xiàn)一個(gè)node_modules文件夾
4,最簡(jiǎn)單的打包:通過(guò)配置文件來(lái)打包,在根文件夾下新建一個(gè)webpack.config.js的js配置文件,在里面指定唯一的入口文件和輸出文件.在命令臺(tái)通過(guò)webpack命令即可打包.
module.exports={
????entry:__dirname+"/app/main.js",//唯一的入口文件,除了事例的寫法,還可以"./app/main.js".這個(gè)點(diǎn)不能少.
????output:{
????????path:__dirname+"/public",//打包后的存放位置,可以引入path模塊,然后path.resolve捏合路徑path:path.resolve(__dirname,'public')
????????filename:"bundle.js"http://打包后輸出的文件名
}
5,在4的基礎(chǔ)上,通過(guò)在package.json的scripts屬性添加屬性,將npm的start命令指向webpack,這可以直接通過(guò)npm start啟動(dòng)打包功能,記住,鍵值都需要雙引號(hào).
"start":"webpack"
二:進(jìn)階
1,生成source map,使調(diào)試更容易,因?yàn)榇a經(jīng)過(guò)編譯之后出現(xiàn)錯(cuò)誤需要定位,所以需要source map,通過(guò)配置devtool屬性的值來(lái)生成不同的sourcemap.devtool的值是通過(guò)eval cheap source-map module inline五個(gè)特性組合起來(lái)的.
eval： 使用eval包裹模塊代碼
source-map： 產(chǎn)生.map文件
cheap： 不包含列信息（關(guān)于列信息的解釋下面會(huì)有詳細(xì)介紹)也不包含loader的sourcemap
module： 包含loader的sourcemap（比如jsx to js 未状，babel的sourcemap）
inline： 將.map作為DataURI嵌入钞它，不單獨(dú)生成.map文件（這個(gè)配置項(xiàng)比較少見(jiàn)）
在webpack.config.js中加上:
devtool:'eval-source-map',//配置生成Source Maps，選擇合適的選項(xiàng)
2,使用webpack構(gòu)建本地服務(wù)器.實(shí)時(shí)監(jiān)測(cè)并刷新代碼,先安裝webpack-dev-server.npm install webpack-dev-server --save-dev.
devserver作為webpack配置選項(xiàng)中的一項(xiàng)叫挟，具有以下配置選項(xiàng)
contentBase: ?默認(rèn)webpack-dev-server會(huì)為根文件夾提供本地服務(wù)器，如果想為另外一個(gè)目錄下的文件提供本地服務(wù)器惦界，應(yīng)該在這里設(shè)置其所在目錄（本例設(shè)置到“public"目錄）
port: ?設(shè)置默認(rèn)監(jiān)聽(tīng)端口衬潦，如果省略蜡励，默認(rèn)為”8080“
inline: ?設(shè)置為true境钟，當(dāng)源文件改變時(shí)會(huì)自動(dòng)刷新頁(yè)面
colors: ?設(shè)置為true锦担，使終端輸出的文件為彩色的
historyApiFallback: ?在開(kāi)發(fā)單頁(yè)應(yīng)用時(shí)非常有用，它依賴于HTML5 history API慨削，如果設(shè)置為true洞渔，所有的跳轉(zhuǎn)將指向index.html
3,loader使用:
1,cnpm install --save-dev loader名稱 ??
2,loader的作用是將其他的資源文件轉(zhuǎn)換成js文件.比如css ?png圖片 ts代碼等等.
3,loader是在配置文件的module下面的rules選項(xiàng),rules是個(gè)數(shù)組,每一條信息對(duì)應(yīng)一個(gè)loader(在webpack早期版本中rules用的是loaders),test是一個(gè)正則表達(dá)式的匹配對(duì)象,不需要引號(hào),use表示使用哪個(gè)loader,如果有多個(gè)loader,放在數(shù)組中.(在webpack早期版本中use用的是loader)
