[FE201] webpack 實戰


Posted by s103071049 on 2021-07-08

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 幫我產生出來的檔案給別人。


#loader #Webpack







Related Posts

Deploy PERN stack with Netlify, Railway/Heroku/Render

Deploy PERN stack with Netlify, Railway/Heroku/Render

[MTR04] W2 D15 練習五:判斷大小寫

[MTR04] W2 D15 練習五:判斷大小寫

[ 筆記 ] HTML - tag 基礎標籤

[ 筆記 ] HTML - tag 基礎標籤


Comments