1. 程式人生 > >webpack基礎使用(一)

webpack基礎使用(一)

nbsp 文件的 參數 aso 哈希 安裝目錄 -- 變換 bpa

安裝webpack:0.在全局安裝webpack npm install webpack -g(如果不在全局裝一個webpack,局部的會不識別) 1.通過命令行進入項目安裝目錄,2.輸入npm init 3.npm webpack --save-dev

webpack打包:格式 webpack 需要打包的文件名 打包之後的文件名 例如:webpack helloWorld.js helloWorld.bundel.js

操作成功之後會給出我們一部分信息:1.Hash:哈希值 2.Version:webpack的版本 3.Time:大這次包所花費的時間 4.Asset:這次打包生成的文件 5. Size這是打包的大小 6. Chunks:這次打包的分塊

7.Chunk Names:這次打包的快名稱

打包的時候用--watch 來監聽打包文件的變換,從而文件改變就打包 例如:webpack helloWorld.js helloWorld.bundel.js --watch

loader的引用 : 打包過程中有一些需要我們自己安裝一些loader (如css文件,style) npm install css-loader style-loader --save-dev ,還需要 require(‘style-loader!css-loader!./style.css‘)=>

也可以在打包的時候加上 --module-bind ‘css=style-loader!css-loader‘(推薦) 例如:webpack helloWorld.js helloWorld.bundel.js --module-bind ‘css=style-loader!css-loader‘

webpack參數:1:watch:監聽 2.proggress:打包過程 3.display-modules:查看打包的模塊 4.display-reasons:為什麽打包這個模塊的原因告訴我們



webpack基礎使用(一)