多頁應用單頁應用的打包
通過配置 entry 為單入口還是多入口來決定
乙個入口即乙個頁面
es5+ 新語法支援
通過babel-loader 處理新語法
babel-preset-env : babel-外掛程式預設
babel 外掛程式的集合，由於我們處理es5+需要配置很多外掛程式，單獨配置很麻煩
目前不支援 stage-x 的外掛程式，如需配置需要單獨配置
babel-preset-react : 解析react jsx語法
babel-polifill : 處理es6+ 的api
不要重複注入，否則會報錯
如果不是單獨引入cdn鏈結話，webpack打包時最好配置為 按需載入，減少打包檔案體積
babel-runtime: 處理es6+的 預發
const 箭頭函式等
babel-plugin-syntax-dynamic-import
支援js檔案的非同步按需載入
webpack支援語法：require.ensure
es7語法： import(/*webpackchunkname: "chunkname"*/, 檔案路徑)；
babel-plugin-import: 元件按需載入
原理：通過語法轉換，將引用方式轉換為，單個模組引入的方式
css處理
less scss, css預處理工具的支援
less,less-loader, scss-loader
css檔案提取
mini-css-extract-plugin
postcss-loader
優化移動端開發體驗，px2vw
autoprefixer ： 增加瀏覽器字首
css 模組化
注意在使用外部庫的時候需要注意，不要講庫檔案的樣式檔案
處理方法：將node_modules下引入的檔案單獨配置loader處理，不進行模組化
本地開發環境的搭建
webpack-dev-server: 起本地服務
hot: 熱載入
react-hot-loader
webpack-dev-server:
hot: true
webpack.hotmodulesreplacementplugin
css-hot-loader
css樣式熱載入
通用檔案的提取: 將多次引用的檔案打包到公共檔案，減少打包檔案體積
splitchunks:
webpack-dll
快取提取公共檔案，避免重複檔案的重複打包
利用多執行緒打包，
webpack學習總結 開發環境
首先我們的目標，可以讓 執行，對 除錯的時候方便一些 建立webpack.config.js const require path node 內建核心模組，用來處理路徑問題。module.exports mode development 開發環境 首先我們需要 loader 配置 module ht...
webpack學習總結 生產環境
要求上線的 穩定 js，css的相容處理 執行速度塊 將css改為單獨檔案用link引入 傳輸速度塊 壓縮 mini css extract plugin將取代style loader，作用 提取js中的css 為單獨檔案 乙個 防止html太大，所以弊端就是css檔案太大了 如果是單入口，所以vu...
webpack學習 總結,配置參考
以下是總結內容 1.命令列 所有需要用到的命令列,三類 npm init y 初始化package.json檔案 npm i d webpack webpack cli 安裝webpack npm i d webpack dev server 開發模式必備外掛程式,實現動態重新整理頁面 npm i ...