# webpack

## 小提醒
第一 不要用import path
要用請在packjson.js設定黨加上type:module讓他知道是模塊
第二官方用法是 exports 是US用法 不是ES6 module用法

## 資料來源
https://www.youtube.com/watch?v=fDWwaY3QMKk
https://www.youtube.com/watch?v=uP6KTupfyIw

自已建立 build指令去跑 webpack 可以不用這個

要安裝webcil 或 webpack-command
但請直接用預設的 cil
這都是 webpack的命令操作
跟nood選曾ejs 還另外一個一樣
## webpack serve
devServer: {
hot: true,
}

加上hot才能跑立刻更新

更改啟動的路徑

## webpack confing.js
當還沒預設 會把 src index.js當入口
另外一提 node 用reqire找不到也會去index.js
可以在pckage.json裡面看到預設是 index.js

----

### entry 入口

### output 出口
要寫
const path = require('path')
要去 nood.js 抓出path這個
它是用來移動路徑的

可以編譯多個出口

### Loaders 轉檔之類的
像你安裝bebal的webpack 指令裡面就有 loader

文件閱讀翻譯 看到css轉css 看到啥轉啥 解決import

!!! 重點 錯誤訊息如果是說看不懂甚麼東西 基本上都是跟loader有關係
#### css不能用
import css 近來會不能編譯
https://webpack.js.org/loaders/css-loader/#root
安裝
npm install --save-dev css-loader
npm install --save-dev style-loader

module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

ex test是用正規表達去找相關檔案
#### css獨立不要用style
loader會把css放在style
要把她獨立成css檔案要用
https://webpack.js.org/plugins/mini-css-extract-plugin/
並把loader裡面的
style-loader 換成 MiniCssExtractPlugin.loader

一樣hash加密用

### Plugins 差件的概念
ex html的轉換(當filename用.[hash].去產生隨機id)
https://webpack.js.org/plugins/html-webpack-plugin/

依據哪個html去產生 serve要跑的html
在 [new HtmlWebpackPlugin()]裡面加template

ex [new HtmlWebpackPlugin({
template:'./base.html'
})]

### Mode
(開發 || 上限)模式

production 會壓縮成一行
develpment

----- -----
### source-map
解決debug問題
因為它會自動幫你編譯
很難debug
所以加上
devtool:'source-map'在config裡面

可以幫你編譯出一個....js.map會幫你在開發工具那邊resource顯示原黨

### Asset (webpack5出現的)
把圖片的問題獨立出來
可以把asset想成laravel的asset就能理解了

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
 module: {
   rules: [
     {
       test: /\.png/,
       type: 'asset/resource'
     }
   ]
 },

};

注意 這邊test有的副檔名才會去編譯

## Babel
把最新的語法 編譯成舊的讓所有瀏覽器都得懂
安裝在webpack
然後寫進webpack.config
當然options可能不只一個
所以最好另外開一個 babel.confing.json把options移過去

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

### 設定黨

除了原本的安裝的那句 裡面最好加上 @babel/preset-env ，讓他預設
https://babeljs.io/docs/en/presets

## env
在node環境裡
package.json自訂變數
可以讓這環境的js都讀到

重點process 是node自帶的
不用再require

用在prodcut 還是 local跟 laravel 的env一樣

## 編譯多個

// build/webpack.prod.conf.js

module.exports = {
  entry: {
    entry: './src/main.js',   // 打包输出的chunk名为entry
    entry2: './src/main2.js'  // 打包输出的chunk名为entry2
  },
  output: {
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'entry.html',  // 要打包输出的文件名
      template: 'index.html',  // 打包输出后该html文件的名称
      chunks: ['manifest', 'vendor', 'entry']  // 输出的html文件引入的入口chunk
      // 还有一些其他配置比如minify、chunksSortMode和本文无关就省略，详见github
    }),
    new HtmlWebpackPlugin({
      filename: 'entry2.html',
      template: 'index.html',
      chunks: ['manifest', 'vendor', 'entry2']
    })
  ]
}

上面一个配置要注意的是 chunks，如果没有配置，那么生成的 HTML 会引入所有入口 JS 文件，在上面的例子就是，生成的两个 HTML 文件都会引入 entry.js 和 entry2.js，所以要使用 chunks 配置来指定生成的 HTML 文件应该引入哪个 JS 文件。配置了 chunks 之后，才能达到不同的 HTML 只引入对应 chunks 的 JS 文件的目的。

## sass
安裝
https://webpack.js.org/loaders/sass-loader/
一樣 import
剩下style 還是外掛都跟css一樣

規則那邊要跟css一樣 只是正規改sass
差件那邊名字也改 css前面 sass後面
別忘記要style才能載入


小提醒
import不用加.scss
變數不用加css

## watch

有改變就 build


## postcss

裝在scss之前,因為這是scss的規則 先css然後轉post好了才把sass檔案轉回css。
他是獨立的library跟 babel一樣 要設定檔(postcss.config.js)

### prefix套件 autoprefixer
他會幫你加
--wek之類的 在不同瀏覽器上都能跑


記得用commentUS用法 設定檔好像都用require的方法

{}空物件是因為他設定黨就夠用了


加好之後請去
package.json設定瀏覽器清單
大於1趴
跟全球最新兩個版本


https://ithelp.ithome.com.tw/articles/10192300

###### tags: `前端編譯工具`