mini-css-extract-plugin

https://vue-loader.vuejs.org/zh/guide/extract-css.html#webpack-4

• 默认情况下，Webpack 是零配置的，所以你不需要配置 webpack.config.js。因此，它必须假设一些默认行为，它总是先查找./src 文件夹，然后在其中查找 index.js，并将输出写入./dist/main.js 文件。
  
• 拥有 2 个配置文件是 Webpack 的常见做法，尤其是在大型项目中，通常一个用于开发，一个用于生产环境。Webpack 4 提供了两种模式：生产（production）和开发（development）。这样可以避免使用两个文件（对于中型项目）。

复制代码

"scripts": {





  "dev": "webpack --mode development" ./src/index.js --output ./dist/main.js",   //開發環境(支持热模块替换、开发服务器以及其他很多有助于开发工作的东西)





  "build": "webpack --mode production" ./src/index.js --output ./dist/main.js"   //生產環境




}

     –entry 标志与–output 标志差不多，但会重写入口路径。

• watch的預設是production狀態，但是這樣不太好，因為開發中的時候你每次執行watch就除了幫你編譯還執行的壓縮跟優化，太消耗資源，而且會佔太多電腦記憶體，所以我們會在執行npm script的時候要加上

“watch”: “webpack --watch --mode development”

• webpack與webpack --watch運行之間的差別是，在使用--watch，您的CLI將在編譯過程中等待你的文件中的任何代碼更改後挂機，如果有變化的話，那將重新編譯並再次等待。您應該知道，如果您使用的是webpack-dev-server，那麼您不需要使用此選項，因為默認情況下webpack-dev-server根據其文檔使用webpack的監視模式：

• 開發服務器使用webpack的監視模式。它還可以防止webpack將生成的文件發送到磁盤。相反，它保留並從內存中提供結果文件。

• what is webpack-dev-server --hot? Basically, this adds the HotModuleReplacementPlugin to the webpack configuration, which will essentially allow you to only reload the component that is changed instead of doing a full page refresh! Pretty darn useful when you are working with states! 大概是指遠距離傳輸(洲與洲、國與國之間)

https://stackoverflow.com/questions/38089785/webpack-watch-vs-hot-whats-the-difference