Learning Notes

# Create dictionary & remote repository

  1. create a new folder in your local computer.
  2. create a new repository in GitHub.
  3. create a connection between github and your PC by using SSH.

# NPM initialization

  1. run npm init -y
  2. install webpack4: yarn add webpack webpack-cli --dev

# Webpack Configuration

# 1. create webpack.config.js

# 2. awesome-typescript-loader

Install awesome-typescript-loader to compile .tsx:


 






  {
    test:/\.tsx?$/,
    // . escaping to \.
    // ? represents that 'x' is optional
    // $ represents that the end of expression
    loader: 'awesome-typescript-loader'
  }

  
        Copied!
1
2
3
4
5
6
7

# 3. output

When config output path, we are naturally use relative path, but it seems doesn't work.Only works when replace it with absolute path

const path = require("path");

  
        Copied!
1

 










output: {
  path: path.resolve(__dirname, 'dist/lib'),
  // To compatible with operate systems, we put path.resolve() in it
  // __dirname represents current dictionary
  // second parameter 'dist/lib' is the output
  library: 'NovaUI',
  libraryTarget: 'umd'
  // What is umd?
  // Unified Module Define
  // In short, umd = AMD + commonJS
}

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11

# 4. webpack-dev-server

run: yarn add webpack-dev-server --dev

# Hot Load

When running dev-server, It will create a server which listening port 8080 as default. If received a request(e.g. 1.js), Server will find it out and return to the client. However, Server returns a piece of string instead of 1.js itself, And string stored in memory that can make access files more quickly, as soon as changeable.

# 5. html-webpack-plugin

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  ...,
  plugins: [
    new HtmlWebpackPlugin({
      title: "NovaUI",
      template: "index.html"
    })
  ],
  ...
};


  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13

# 6. resolve configuration

In index.tsx, we want to import a button component that made by ourselves:

import Button from "./button";

  
        Copied!
1

Then use it but get error: Can't resolve './button in ... we declared a button.tsx, but webpack doesn't recognize it, in this way, add resolve property in webpack.config.js to fix it:

resolve: {
  extensions: ['.ts', '.js', 'tsx'. 'jsx']
}

  
        Copied!
1
2
3

# 7. dev & prod

# webpack.config.dev.js

const base = require("./webpack.config");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = Object.assign({}, base, {
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin({
      title: "NovaUI",
      template: "index.html"
    })
  ]
});

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11

# webpack.config.prod.js

const base = require("./webpack.config");
module.exports = Object.assign({}, base, {
  mode: "production",
  externals: {
    react: {
      commonjs: "react",
      commonjs2: "react",
      amd: "react",
      root: "React"
    },
    "react-dom": {
      commonjs: "react-dom",
      commonjs2: "react-dom",
      amd: "react-dom",
      root: "ReactDOM"
    }
  }
});

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# @types/react

It doesn't works that import react & react-dom directly in .tsx file. Because .tsx isn't recognize them. Instead, we can run yar add @types/react --dev

# import react in .t/jsx


 


function Button() {
  return <div>Button</div>;
}

  
        Copied!
1
2
3

When running it on webpack-dev-server, it returns an error that's because the highlighted part is a syntax sugar which converted into React.createElement('div', null, 'Button').It gets clear now. We didn't import react in this file before.

← Icon →