webpack使用記錄

發表於2024-02-24
Web

basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")

當執行如下命令報標題所示的錯誤，是因為windows無法執行shell命令導致。

{
    "debugger": "node ./node_modules/.bin/webpack --config webpack.config.js"
}

我們跳過shell命令，直接執行目標檔案即可。

{
    "debugger": "node ./node_modules/webpack/bin/webpack --config webpack.config.js"
}

資料：
http://www.jerrychane.com/technique-sharing/2859.html

oneOf是幹什麼的？

避免無意義的rule匹配。

rules: [
  {
    test: /\.less$/,
    loader: 'less-loader'
  },
  {
    test: /\.scss$/,
    loader: 'scss-loader'
  },
]

上面是一個常規的rules配置，當我有一個style.less檔案，會執行如下流程：
1 嘗試與.less進行匹配
2 嘗試與.scss進行匹配

觀察上面執行流程，我們會發現第2條其實是沒有意義的，因為他根本不會匹配上，那麼，有什麼辦法最佳化掉第2條的執行呢？
答案就是oneOf。

rules: [
  {
    oneOf: [
      {
        test: /\.less$/,
        loader: 'less-loader'
      },
      {
        test: /\.scss$/,
        loader: 'scss-loader'
      },
    ]
  }
]

上面是使用了oneOf的rules配置，當我有一個style.less檔案，會執行如下流程：
1 嘗試與.less進行匹配（結束，下面那條不會被執行了）
2 嘗試與.scss進行匹配

相關文章