程式學習: webpack速成

https://www.youtube.com/watch?v=uP6KTupfyIw

https://github.com/scps960740/Webpack-crash-course-2021-bruceFE/blob/master/webpack.config.js

https://webpack.js.org/concepts/

To get started you only need to understand its Core Concepts:

Entry
Output
Loaders // 處理閱讀非js的檔案(webpack 預設只讀懂js)

babel用來協處處理最新的js可以被讀懂

https://babeljs.io/setup#installation
preset-env 是目前最新的意思

(css 類似的如postcss)

**https://webpack.js.org/guides/asset-modules/#root

Asset Modules allow one to use asset files (fonts, icons, etc) without configuring additional loaders.
Prior to webpack 5 it was common to use:
- raw-loader to import a file as a string
- url-loader to inline a file into the bundle as a data URI
- file-loader to emit a file into the output directory
Asset Modules types replace all of these loaders by adding 4 new module types:
- asset/resource emits a separate file and exports the URL. Previously achievable by using file-loader.
- asset/inline exports a data URI of the asset. Previously achievable by using url-loader.
- asset/source exports the source code of the asset. Previously achievable by using raw-loader.
- asset automatically chooses between exporting a data URI and emitting a separate file. Previously achievable by using url-loader with asset size limit.
When using the old assets loaders (i.e. file-loader/url-loader/raw-loader) along with Asset Modules in webpack 5, you might want to stop Asset Modules from processing your assets again as that would result in asset duplication. This can be done by setting the asset's module type to 'javascript/auto'.
Plugins
// 處理刪除檔案夾裡的檔案
// HtmlWebpackPlugin: 在build出來的檔名加入動態hash後，自動動態產生相應的html等行為

以./base.html內的template為模板產生新的html(我想vue或react等不會需要這樣)