---
# System prepended metadata

title: webpack
tags: [前端編譯工具]

---

# 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 可以不用這個
![](https://i.imgur.com/DaUB644.png)


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

更改啟動的路徑
![](https://i.imgur.com/frhVDij.png)


## 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加密用
![](https://i.imgur.com/Cbgsz1i.jpg)

### 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
![](https://i.imgur.com/IlNSdG7.jpg)
當然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都讀到
![](https://i.imgur.com/WuFCJ7o.jpg)


重點process 是node自帶的
不用再require
![](https://i.imgur.com/gAliXHb.jpg)

用在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才能載入

![](https://i.imgur.com/TdQ4utP.png)

小提醒
import不用加.scss
變數不用加css
![](https://i.imgur.com/jPRSoNL.png)

## watch

有改變就 build

![](https://i.imgur.com/PGVRMQQ.png)


## postcss

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


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

![](https://i.imgur.com/hiwPHLN.png)

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

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

![](https://i.imgur.com/zvTTt4V.png)

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

![](https://i.imgur.com/0LTTdJy.png)

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

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