是什么?能干什么?

WebPack是一款加載器兼打包工具.

它能把各種資源(圖片,css,js,jsx,coffee,less/sass)作為模塊和資源來處理和使用.它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。

優(yōu)點?

1.是以commonJS的形式寫腳本的,但對AMD/CMD的支持也很全面,方便舊項目進行代碼遷移.

2.能被模塊化的不僅僅是js了,還有圖片,css/less/sass,jsx,coffee...

3.開發(fā)便捷,能替代部分grunt/gulp的工作,比如打包,壓縮,圖片轉base64...

4.擴展性強,插件機制完善

安裝?+把js,css,圖片...模塊化

1.全局安裝 wbpack npm install webpack --save-dev

2.新建項目 XXX 初始化該文件夾npm init(name:不能為關鍵字(webpack,node....)

3.在該文件夾里面安裝 npm install webpack --save-dev,會多出node_modules文件夾.新建webpack.config.js

4.編寫webpack.config.js配置環(huán)境

5.新建app文件夾,在app文件夾里面新建 css,im,js文件夾.

main.js為入口文件

a.把js當資源加載

1.在js文件夾中新建ele.js ?寫一些功能代碼,并導出模塊

2.在main.js里 導入模塊ele

3.在cmd中輸入webpack ./app/main.js ./app/bundle.js

隨后會多出一個bundle.js,新建一個index.html,在里面引用bundel.js,即可看到ele模塊所實現(xiàn)的功能,頁面有hello.

b.把圖片當資源加載

1.在main.js里:(把img文件夾里面的logo.png當成資源加載)

2.安裝 npm install url-loader --save-dev

3.編寫 webpack.config.js中的loader

4.在cmd中輸入webpack運行,則bundle.js也會相應進行增加/改變.

刷新即可在index.html頁面看到logo.png這張圖片,并且圖片的命名是base64.

c.把css當資源加載

1.在main.js里:(把css文件夾里面的index.css當成資源加載)

在index.css里面寫樣式:h1{color:red;}

2.安裝 npm install style-loader --save-dev

3.編寫 webpack.config.js中的loader

4.在cmd中輸入webpack運行,則bundle.js也會相應進行增加/改變.

刷新即可在index.html頁面看到hello字體顏色變?yōu)榧t色

c.把es6 轉換成es5

1.在main.js里:書寫es6代碼

2.安裝 npm install ?--save-dev babel-loader babel-core babel-preset-env webpack

3.編寫 webpack.config.js中的loader

4.在cmd中輸入webpack運行,則bundle.js也會相應進行增加/改變.

刷新你寫的es6代碼就會轉變?yōu)閑s5,也能在一些不支持es6的瀏覽器中顯示.