最近不是在寫hw麼，所以就擼了一遍webpack的文件，按說這事情一年前就該做了。
不過前端的工程搭建不知道為啥這麼複雜。
入口（entry）
輸出（output）
模組（module）
resolve
載入器（loader）
外掛程式（plugin）
開發用伺服器、devtool、watch
還有一些別的，比如external、performance等
output:module: ,},}
]}
],
}
resolve: ,
extensions: [".web.js", ".mjs", ".js", ".json", ".web.jsx", ".jsx"] // import時可以不用寫這些字尾名
}
performance:
},optimization: }}
},mode: "development", // 還可以是production，啟用的優化效果不同
devtool: "cheap-module-source-map", // sourcemap功能，
watch: true, // 啟用檔案觀察模式，開發模式下才需要
watchoptions: ,
devserver: ,
contentbase: path.join(__dirname, 'public'), // 靜態檔案的路徑
compress: true, // 壓縮
},
webpack-bundle-analyzer可以分析各個包的大小，並直觀顯示
搭建基本的工程用上面這些配置就夠了，其中有些互斥的外掛程式、配置、載入器什麼的，最好能看一遍文件，一些高階用法、優化什麼的就要用到外掛程式了
htmlwebpackplugin：生成html檔案和js、css標籤
cleanwebpackplugin：清理檔案
webpackmanifestplugin：生成檔案對映
sourcemapdevtoolplugin：生成sourcemap
closurecompilerplugin：壓縮，和uglifyjsplugin類似
defineplugin：定義環境變數
extracttextwebpackplugin：為樣式單獨抽取檔案，而不寫在js bundle裡，提高載入速度，4中已棄用，使用minics***tractplugin
commonschunkplugin：提取公共部分，4中已棄用，使用splitchunksplugin
hashedmoduleidsplugin：根據模組的相對路徑生成hash作為模組id
dllplugin
官網效能指導
webpack 實用配置總結
1 webpack.config.js配置檔案為 處理共用 通用的js var webpack require webpack 處理html模板 var htmlwebpackplugin require html webpack plugin css單獨打包 var extracttextplug...
webpack學習 總結,配置參考
以下是總結內容 1.命令列 所有需要用到的命令列,三類 npm init y 初始化package.json檔案 npm i d webpack webpack cli 安裝webpack npm i d webpack dev server 開發模式必備外掛程式,實現動態重新整理頁面 npm i ...
webpack配置 基礎配置
本片文章主要是一些webpack的基礎配置在webpack中，這個工具只識別js和json這兩種格式，別的格式或者說資源在webpack中是不認可的。例如 css檔案 less檔案 資源 圖示資源等等，這時候就需要用一些loader來對它們進行編譯處理。在敲 之前，一定要先安裝上面的包 安裝命令 n...