• ArthurSlog

• SLog-103

• Year·1

• Guangzhou·China

• October 29th 2018

• Personal website: http://www.arthurslog.com

• GitHub：https://github.com/BlessedChild/ArthurSlog

• NPM：https://www.npmjs.com/~arthurslog

Knowing the common sense

---

Development environment MacOS (Mojave 10.14 (18A391))

Information Source

Start coding

• The entire project is updated to four front-end - large back-end structures

• The four front ends are divided into: client front end -> operational front end -> management front end -> development front end (to achieve business decoupling)

• The large backend takes over the background interaction of all the front ends mentioned above.

• This time to open up wasteland ‘development front end’

• The ‘client front end’ and ‘development front end’ are the necessary options for the project.

• The middle part can be decoupled infinitely according to the business.

• Ok now to configure the ‘development front end’ environment

Develop front-end interface

• A drop-down selection bar: used to select the test interface (that is, in the development phase we choose to pass the data to the specified interface on the back end)

• Input input box: according to the above selection, here is the data to be sent to the backend.

• Test button: When the test button is clicked, we will call the function and data selected above to initiate the request to the backend.

• Result display box: displays all data returned by the backend

Contract

Development model should be based on the principle of reducing development costs

 The basis of a web page is composed of HTML, CSS and JS.
 These web page front-end code can be run directly after being opened by the browser.

 At that time, in order to reduce development costs
 Most of the code we write now is not native HTML, CSS and JS.
 But based on the higher-level syntax they extend

 So in the process of development
 We need a compilation process to compile the upper level code into native HTML, CSS and JS

 There are many tools for compiling the upper layer code. 
 For example
 Compile ES6+ code into ES5 code using the babel tool
 Compile the less code into css code using the Less tool

 These compilation tools are part of the front-end development system.
 On the next level of the tool, there are gradually super tools that manage these tools in a unified way.
 Such as webpack
 With the webpack tool, all tools work together to further reduce development costs.

 In addition to the compilation tool
 The super tool webpack is still in development
 During this time, tools to help developers automatically refresh their browsers and tools to compress code appeared.
 , code style detection tools, code unit testing tools,...

 Develop to the current point in time 
 Super tools like webpack gradually integrate all the tools on themselves.
 Further reduce the cost of development

 In the process of development, it is experiencing from immature to mature
 So chaotic, complicated, always accompanied

 Stick to everything to reduce costs
 Everyone is working together

Comments are not cold words

 The comment should be a place full of warmth. Record countless souls that are unwilling to be lonely.

 So in my comments, I don’t limit the content and format. I can record any information as much as I can.

 Finally, the annotation information is blocked when building the production environment code.

sudo npm init -y

• add webpack and webpack-cli as a dev dependency to our project

• We installed webpack-cli so that we can use webpack in the command line

sudo npm install webpack webpack-cli --save-dev

sudo npm install react react-dom --save

• In order for React to work, we need to install Babel alongside with it

• We need Babel to transpile ES6 and JSX to ES5

• So:

sudo npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

• babel-core: Transforms ES6 code to ES5

• babel-loader: Webpack helper to transpile code, given the the preset

• babel-preset-env: Preset which helps babel to convert ES6, ES7 and ES8 code to ES5

• babel-preset-react: Preset which Transforms JSX to JavaScript

• The less-loader requires less as peerDependency

• Thus you are able to control the versions accurately.

• Use the css-loader or the raw-loader to turn it into a JS module and

• the ExtractTextPlugin to extract it into a separate file

npm install less-loader less css-loader style-loader --save-dev

• Chain the less-loader with the css-loader and the style-loader to immediately apply all styles to the DOM

webpack.config.js

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

• Create an index.js file inside root of the /src folder

• for now add the following line code inside it

• This file will be the entry point to our app

./src/index.js

console.log("Hello Arthur")

• Create an index.html file inside root of the /src folder and add following code inside it

./src/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React Boilerplate</title>
</head>

<body>
    <div id="root">

    </div>
</body>

</html>

• Create a webpack.config.js in the root directory of the project

• so that we can define rules for our loaders

• Define the entry point and output directory of our app inside the webpack.config.js

./webpack.config.js

const path = require("path");

const config = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js"
  }
};

module.exports = config;

• In the above code

• Webpack will bundle all of our JavaScript files into bundle.js file inside the /dist directory

• Add some loaders inside this file, which will be responsible for loading and bundling the source files

./webpcak.config.js

const path = require("path");

const config = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "less-loader"]
      }
    ]
  }
};

module.exports = config;

• Here babel-loader is used to load our JSX/JavaScript files and

• less-loader is used to load all of the Less files to CSS files

• css-loader is used to load and bundle all of the CSS files into one file and

• style-loader will add all of the styles inside the style tag of the document

• Create a .babelrc file inside root of the project directory with the following contents inside of it

./.babelrc

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

• This file will tell babel which presets to use for transpiling the code

• Here we are using two presets:

• env: This preset is used to transpile the ES6/ES7/ES8 code to ES5

• react: This preset is used to transpile JSX code to ES5

• Add the following lines of code inside the script object of the package.json file as below:

"start": "webpack --mode development --watch",
"build": "webpack --mode production"

• Here i have used watch flag

• So whenever there is a change in source files

• Webpack will automatically compile all the source files

• There are two modes in webpack 4

• the production mode which produces optimized files ready for use in production

• and development mode which produces easy to read code

• and gives you best development experience

• Html-webpack-plugin：

• Now we also need to install html-webpack-plugin

• this plugin generates an HTML file

• injects the script inside the HTML file and writes this file to dist/index.html

sudo npm install html-webpack-plugin --save-dev

• Now we need to configure this plugin inside the webpack.config.js file

./webpcak.config.js

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

const config = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index-bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ]
};

module.exports = config;

• Here the value of template key is the file index.html

• that we created earlier and it uses this file as a template

• and generates new file named index.html inside the /dist folder

• with the script injected

• But this approach has a downside that you have to manually refresh the webpage

• in order to see the changes you have made

• To have webpack watch our changes and refresh webpage whenever any change

• is made to our components, we can install webpack-dev-server

• Webpack-dev-server:

npm install webpack-dev-server --save-dev

• And change the package.json start script like below:

"start": "webpack-dev-server --mode development --open --hot"

• Because there are some more detailed places, use English to understand more accurately.

• The above is a configuration of the development environment

• Here is the configured project directory structure

• Project file has been uploaded toGithub：https://github.com/BlessedChild/ArthurSlogStore

• So far, the initial configuration of the development environment of the "development front end" has been completed.

---

• Welcome to my WeChat public account ArthurSlog

• If you like my article, please like it.

• Thank you