iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

摸索 WebSocket,遠望 WebRTC系列 第 29

Day28:繼續歪樓(全英文筆記 - II)

繼續昨天的歪樓筆記,昨天只有寫 webpack-dev-server, 今天來加上一些基本的插件還有如何設定。

不過寫英文筆記,雖然文法可能廢到爛,但私心的好處是,自己的 blog 預設語系可以直接使用英文,等之後有空時,d可以直接翻譯 i18n 底下的中文語系筆記即可,算是先苦在前面吧,也許會有一點倒吃甘蔗的意味?

css-loader

Webpack can only read javascript, if you want to read css or other syntax, must rely on plugins.

install plugins

npm install css-loader style-loader -D

setting webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

touch file and test style.

mkdir styles

cd  styles

touch index.css

index.css

body {
  background: blue;
}

index.js

import './styles/index.css';

restart npm run dev , can see page background is blue.

Hash name

I will add [hash] in output, because need every npm run build can generate a hash name js file, avoid browser cache same file name, Cause client-side page is not update.

module.exports = {
  output: {
    // ...
    filename: 'js/[name].[hash].bundle.js',
  },
};

HtmlWebpackPlugin

Because everytime bundle js file name is different, we can't manually setting html file's src path. Must rely on plugin auto generate html file.

npm install html-webpack-plugin -D

Delete dist folder and return root directory, mkdir index.html and create content.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles/index.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="app">This App Page</div>
  </body>
</html>

setting html-webpack-plugin

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],
};

test npm run build you can see the dist folder will auto generated HTML, JS file.

MiniCssExtractPlugin

style-loader will generate Inline Styles, I hope change to External Style Sheet.

npm install mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

CleanWebpackPlugin

After using hash, the file name generated will be different each time. After long time, much invalid files will appear in the dist folder. Here you can use plugin to automatically clear before each build.

npm install clean-webpack-plugin -D
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
  ],
};

Babel

If you want to use ES6+ syntax, sometime browser maybe can't support, so use babel plugin can help you compiler into to ES5.

For example, when you write const a = 10;, const will compiler to var.

npm install babel-loader @babel/core @babel/preset-env -D

touch babel.config.json
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

setting babel.config.json

{
  "presets": ["@babel/preset-env"]
}

source map

The compiled file is difficult to read. If it runs normally before compilation, but an error occurs after compilation, then you need the source-map to view the source code.

module.exports = {
  devtool: "source-map",
}

Asset Modules

Similarly, webpack cannot directly read files such as images, and these files are collectively classified into Assets and used through settings.

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

上一篇
Day27:歪樓+卡文(全英文筆記 - I)
下一篇
Day29:歪樓無極限(全英文筆記 - III)
系列文
摸索 WebSocket,遠望 WebRTC30

尚未有邦友留言

立即登入留言