[day17][環境][學習] Again，從webpack開始打包的Express（一）

12th鐵人賽

驢子

2020-10-02 16:50:29

1170 瀏覽

分享至

同步發表到驢形筆記

webpack是什麼

webpack是一種打包工具，本身擁有各種各樣的轉編譯魔法。將所有檔案打包成同一隻檔案輸出等等等！但是webpack的設定項非常的多，並且非常的麻煩...這邊一樣會帶過並慢慢解釋這些設定。有興趣的可以在鐵人賽查詢，有非常多的教學可以深入學習！這邊是快速帶過能用就好，等需要更複雜設定後再好好的去研究吧！

好的，開啟新的資料夾跟之前的檔案說聲辛苦了。記得每個專案要先建立"package.json"，接著前往webpack的npm介紹網頁(https://www.npmjs.com/package/webpack )安裝webpack

npm init -y

npm install --save-dev webpack

這樣你的webpack就完成了，接著讓我們建立第一個被webpack打包的檔案。建立一個"webpack.config.js"檔案，這是webpack會去讀取的設定檔案

webpack.config.js

/* webpack.config.js ： Webpack 的設定檔 */
const path = require('path');
const clientConfig = {
  entry: {
    'index': './app.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    // 獲取絕對路徑的方法
    filename: '[name].bundle.js'
  }
}
module.exports = [clientConfig];

接著建立一個檔案讓他打包"app.js"

app.js

console.log('hello');

最後在"package.json"追加腳本

package.json

{
  "name": "ithome_30day",
  "version": "1.0.0",
  "description": "IT邦邦忙鐵人賽用git檔案",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack"
  },
略

接著輸入要求npm執行腳本

npm run webpack

他會要求你安裝"webpakc-cli"，這邊就直接同意就可以了

接著再次要求執行腳本，你的第一個被打包的檔案就出來。並好好地放在dist資料夾內了

接著建立一個html檔案去讀他，然後開啟那隻html檔案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./dist/index.bundle.js"></script>
</body>
</html>

在網頁情況下打該開發者工具"F12"點開"console"