Day27：歪樓+卡文(全英文筆記 - I) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 28

Modern Web

摸索 WebSocket，遠望 WebRTC系列第 28 篇

Day27：歪樓+卡文(全英文筆記 - I)

13th鐵人賽

DoDoBird

團隊血汗攻城屍

2021-10-13 17:41:32

918 瀏覽

鐵人賽寫到現在，其實主題中的內容還有很多可以實作的部分，但一方面是不確定時間到期後，鐵人賽系列還能不能繼續發文，另一方面是很想要回頭去重新翻修前面的文章，讓整個系列進行彙整統合，避免現在這種零散感。

不過，因為團隊的成員已全部都放棄了，所以某種程度上自己也有點懶散，打算接下來幾篇可能用題外話的方式湊足篇數，先回頭思考前面的筆記如何重構修改。

既然都要隨意寫了，我打算來挑戰來看看，用全英文的方式來寫筆記，內容的部分就設定為，如何用 webpack 起一個專案，當然文法正確與否我就不管了，單純就以 google 翻譯後還能看懂來呈現。

Init Webpack Project

Require Node.js environment, I use node version v16.4.2, npm version v7.18.1.

Build package.json

mkdir project-name

cd project-name

npm init -y

Install webpack & webpack-cli in devDependencies, there not install global, avoid polluting other project webpack version.

npm install webpack webpack-cli -D

mkdir src

touch src/index.js webpack.config.js

Now you can see the structure as follows.

 ┣ ?src
 ┃ ┗ ?index.js
 ┣ ?.gitignore
 ┣ ?package.json
 ┗ ?webpack.config.js

Setting

Use node.js path api to generate dist in output bundle and setting entry file.

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.bundle.js',
  },
};

Writting something.

// src/index.js

console.log('test webpack');

Setting scripts.

// package.json
{
  "scripts": {
    "build": "webpack"
  },
}

ok, you cna run npm run build, and you will see the dist folder is auto generated. And include main.bundle.js.

webpack dev server

When we development, need server to running in browser, so we install webpack-dev-server plugin.

npm install webpack-dev-server -D

touch index.html in dist folder.

And content is follows as:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./main.bundle.js"></script>
  </body>
</html>

In webpack.config.js, you can pass through the devServer setting parameter.

module.exports = {
  mode: 'development',
  // ...
  devServer: {
    static: path.join(__dirname, 'dist'), // root
    open: true, // auto open browsers
    compress: true,
    port: 3002,
  },
};

Of the above, when npm run dev, your project can auto caught dist folder, open in browser port 3002. Because default have hotreload effect, so you don't need to manually setting.