一、簡述webpack的核心原理
（1）一切皆模塊
正如JS文件可以是一個“模塊”一樣，其它的文件也可視作模塊。因此可以執行require(myJsFile.js)，亦可執行require(myCssFile.css)，這意味著我們可以將事物分割成更小的、易于管理的片段，從而達到重復利用的目的。
（2）按需加載
傳統的模塊打包工具最終將所有的模塊編譯并生成一個龐大的bundle.js文件。但是，在真實的APP里，bundle.js文件的大小在10M-15M之間的話，可能會導致應用一直處于加載狀態。因此，webpack使用許多特性來分割代碼，然后生成多個bundle.js文件，而且異步加載部分代碼用于實現按需加載。
二、webpack打包流程
具體流程如下：
- 通過entry配置入口文件；
- 通過output制定輸出文件；
- 使用各種loader處理CSS、JavaScript、image等資源，并將它們編譯與打包成瀏覽器可以解析的內容等。
三、webpack中的loader
- 具體作用：
（1）實現對不同格式文件的處理，比如將scss轉換為css，或將TypeScript轉化為JavaScript；
（2）可以編譯文件，從而使其能夠添加到依賴關系中。loader是webpack最重要的部分之一。通過使用不同的loader，我們能夠調用外部的腳本或者工具，實現對不同格式文件的處理，loader需要在webpack.config.js里單獨用module進行配置。
- 敘述工作中常用的loader
babel-loader：將下一代的JS語法規范轉換成現代瀏覽器能夠支持的語法規范。因為babel有些復雜，所以大多數開發者都會新建一個.babelrc進行配置。
css-loader、style-loader：這兩個建議配合使用，用來解析css文件依賴。
less-loader、sass-loader：分別用來解析less文件，sass文件。
file-loader：生成的文件名就是文件內容的MD5散列值，并會保留所引用資源的原始擴展名。
url-loader：功能類似于file-loader，但是當文件大小低于指定的限制時，可以返回一個DateUrl。?
四、簡述webpack的plugins和loaders有什么區別
（1）作用不同
- loader直譯為「加載器」，作用是讓webpack擁有加載和解析非JS文件的能力，是用來加載文件的。
- plugin直譯為「插件」，可以拓展webpack的功能，讓webpack具有更多的靈活性。在webpack運行的生命周期中會廣播出許多事件，plugin可以監聽這些事件，在合適的時機通過webpack提供的API改變輸出結果。
（2）用法不同
- loader在module.rules中配置，也就是說他作為模塊的解析規則存在，類型為數組，每一項都是一個Object，里面描述了對于什么類型的文件，使用什么加載和使用的參數。
- plugin在plugins中單獨配置。類型為數組，每一項事宜額plugin的實例，參數都通過構造函數傳入。
（3）常見的loader和plugin
- 常見的loader：
樣式：style-loader、css-loader、less-loader、sass-loader等；
文件：raw-loader、file-loader 、url-loader等可以處理資源；
編譯：babel-loader(把 ES6 轉換成 ES5)、coffee-loader 、ts-loader等；
vue-loader、coffee-loader、babel-loader等可以將特定文件格式轉成js模塊、將其他語言轉化為js語言和編譯下一代js語言；
- 常見的plugin：
內置UglifyJsPlugin：壓縮代碼,通過UglifyES壓縮ES6代碼；
內置CommonsChunkPlugin：提取公共代碼,提高打包效率，將第三方庫和業務代碼分開打包；
ProvidePlugin：自動加載模塊，代替require和import；
new webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery'})
html-webpack-plugin：可以根據模板自動生成html代碼，并自動引用css和js文件；
extract-text-webpack-plugin：將js文件中引用的樣式單獨抽離成css文件；
HotModuleReplacementPlugin：熱更新插件，修改代碼后，自動刷新，實時預覽修改后的效果。
五、webpack如何切換開發環境和生產環境
生產環境與開發環境的區別無非就是調用的接口地址、資源存放路徑、線上的資源是否需要壓縮等方面。目前的做法是在package.json中設置node的一個全局變量，然后在webpack.config.js文件里面進行開發環境與生產環境的配置切換。
)
