loader 會做轉換，轉換完後再打包進去

babel loader

現代前端比較複雜，因為複雜所以需要用到模組化、library、各種工具，這些基本上都會透過 webpack 進行設定。

為了支援舊瀏覽器，一般都會經過 babel 轉換。現在，將 babel 搭配 webpack 提供的 babel-loader，也可以做到相同的事情。(將 js load 進來前，會經過 babel loader 做一些轉換，轉換完後才將他打包進去。)

babel 官方參考文件

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

test 表示什麼樣的檔案會被這個 loader 給 lode 進來

另外，node_modules 通常裡面的東西已經被轉換過了，所以不需要再轉換過一次。bower_components 是另一個工具會用到的，這邊也不用。

options 表示要用什麼樣的方式做轉換，可以寫在 babel rc 或寫在這邊。

檢視 dist/main.js => ES6 語法已被轉成舊版的
(節錄)
var obj = {\n a: 1,\n str: 'hello'\n };\n var str = obj.str;\n

SASS loader

參照官方文件

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
};

test 後面放的是正規表達式。
先把 SASS 變成 CSS，再把 CSS 放到 DOM 上去。原理仍和前面相同。

開發設定

每次改動，都要自己 npm run build 很麻煩，webpack devserver，就是這個問題的救世主。devserver 是開發上會幫你自動重新整理的東西。

官方介紹

先安裝

npm install --save-dev webpack-dev-server

webpack.config.js 加上這行

 devServer: {
    contentBase: './dist', // 最後 complie 出來的檔案要放到哪裡
  },

package.json，script 中新增指令

 "start": "webpack serve --open",

接著的指令用 npm run start
將原本的 index.html 移到 dist 資料夾中，修改一下 index.html 的路徑，按 f5 就會出現畫面。當檔案自動變得，devServer 就會幫你自動變然後將有改的地方自動重新載入，超級方便!!!!

除蟲神器

webpack.config.js 加上 devtool: 'inline-source-map'，產生錯誤時會連到我原本的程式碼，因為 source-map 會將打包前/後的程式碼產生對應關係，有了對應關係，就知道原本程式碼長相，所以就可以顯示原本程式碼

html plugin

The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles.

使用 webpack，通常 css 都寫在裡面、js 也寫在裡面，那麼 index.html 幾乎沒什麼東西，所以可以使用這個 plugin 自動產生 html。

安裝 npm install --save-dev html-webpack-plugin，他會幫你產生一個 index.html。

假設 index.html 為空

將設定檔案引入

const HtmlWebpackPlugin = require('html-webpack-plugin');

後面多了一個 plugin plugins: [new HtmlWebpackPlugin()],

接著再執行一次，npm run start，打包完後的檔案，button 不見了。因為 html 這個檔案是他幫我們自動產生的，很多會用到 webpack 的 app，html 都是空的，都是從 js 動態產生。

舉例、動態產生按鈕

$(document).ready(() => {
  $('body').append('<button class = "btn">click me</button>')
  $('.btn').click( () => {
    const obj = {
      a: 1,
      str: 'hello'
    }
    throw new Error('yo')
    const {str} = obj
    alert(first(str))
  })
})

可以用關鍵字 template 搜尋。

用自己的 template 去做這件事情，他會自動幫我把內容替換掉。簡單地說就是可以用自己的模板，透過 webpack 將東西放到上面去。如果不用，直接用上述的 plugin，他會自動產生一個 html 放你的 js, css 等等的檔案。

最後要將弄好的網頁給別人，把 mode 改成 production，然後 npm run build 幫我產生出來的檔案給別人。