Day27：歪楼+卡文(全英文笔记 - I)

铁人赛写到现在，其实主题中的内容还有很多可以实作的部分，但一方面是不确定时间到期後，铁人赛系列还能不能继续发文，另一方面是很想要回头去重新翻修前面的文章，让整个系列进行汇整统合，避免现在这种零散感。

不过，因为团队的成员已全部都放弃了，所以某种程度上自己也有点懒散，打算接下来几篇可能用题外话的方式凑足篇数，先回头思考前面的笔记如何重构修改。

既然都要随意写了，我打算来挑战来看看，用全英文的方式来写笔记，内容的部分就设定为，如何用 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.

<<: Day 28 - 建立自己的K线资料库 (下)

>>: JS Library 学习笔记：Three.js 初见面，在2D画面创造三维世界 (三)