最簡單的demo

npm i webpack --save-dev

新增入口與出口配置

熱更新與服務

npm i webpack-dev-server --save-dev

打包CSS檔案

npm i style-loader css-loader postcss-loader less-loader --save-dev

PS: 在入口檔案中匯入所編寫的less,css,sass

JS程式碼壓縮

打包HTML檔案

npm i html-webpack-plugin --save-dev

CSS中引入圖片

npm i url-loader
 
 file-loader --save-dev

PS: 在入口檔案中匯入所編寫的less,css,sass

CSS分離與publicPath的使用

npm i extract-text-webpack-plugin --save-dev

HTML中的圖片打包

npm i html-withimg-loader --save-dev

專案打包後如何進行除錯

使用babel開發下一代javascript

npm i babel-core babel-loader babel-preset-env babel-polyfill --save-dev
 

PS: 要在入口檔案中匯入 babel-polyill 來引入ES6物件以保證在IE中可以正常執行

模組化webpack

使用putifycss除去無用CSS

npm i purifycss-webpack purify-css --save-dev