• ArthurSlog

  • SLog-103

  • 1 Year,

  • Through China,

  • October 29th 2018

Scan the QR code on wechat and follow my official account

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

  • CSDN：https://blog.csdn.net/u010997452/article/list/1

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

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

  • The Denver nuggets: https://juejin.cn/user/307518986009559

  • Jane: https://www.jianshu.com/u/b9ebe10f0534

  • segmentfault：https://segmentfault.com/u/arthurslog/articles

Knowing often says not knowing often is wrong

Development Environment MacOS(Mojave 10.14 (18A391))

Information sources

Start coding

  • The whole project is updated to four front-end – large back-end structure

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

  • The large back end takes over all of the background interaction of the front end

  • This time to open the ‘development front’

  • A ‘client front end’ and a ‘development front end’ are necessary options for the project

  • The middle part can be decoupled indefinitely depending on the business

  • Ok now configure the ‘development front end’ environment

Developing the front-end interface

  • A drop-down selection bar: used to select the test interface (that is, the interface we chose to pass data to the back end during development)

  • Input field: Enter the data to be sent to the back end as selected above

  • Test button: when the test button is clicked it calls the function and data we selected above to make a request to the back end

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

Contract

The development model should be based on the principle of reducing development costs. The foundation of a web page is made up of HTML, CSS and JS. The front-end code of the web page can be opened in the browser and run directly. At that time, to reduce development costs, most of the code we write today is not native HTML, CSS and JS are based on the higher level syntax that they extend so during development we need a compilation process to compile the upper level code into native HTML, There are a lot of tools that you can use to compile the upper layer of your CSS and JS code for example you can use Babel to compile ES6+ code into ES5 code and you can use Less to compile Less code into CSS code and those tools are part of the front-end development architecture and they're at the next level of the tools Over time, super tools like WebPack emerged to unify these tools so that all the tools could work together to further reduce the cost of development. In addition to the compilation tools, super tools like Webpack were still in development and came along during this period to help developers Automatic browser refresh tools, code compression tools, code style detection tools, code unit testing tools,... Development to the current time point similar to webpack super tools gradually integrate all tools on their own to further reduce the cost of development in the process of development is experiencing from immature to mature, so chaos, complex always accompany adhere to everything to reduce costs for the principle of everyone to advance togetherCopy the code
Comments are not cold text comments should be a warm place to record countless lonely souls, so I can record any information in my comments without limiting the content and format. Finally, I can shield the comments when building the code in the production environmentCopy the 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}}}}]];Copy the code

  • 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")
Copy the code
  • Create an index.html file inside root of the /src folder and add following code inside it

./src/index.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>
Copy the code

  • 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;
Copy the code

  • 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;
Copy the code

  • 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"]}Copy the code

  • 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"
Copy the code

  • 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 – the 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;
Copy the code

  • 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"
Copy the code

  • Because there are some details in English to understand more accurate

  • This is a configuration of the development environment

  • Here is the configured project directory structure

  • Project files have been uploaded to Github:https://github.com/BlessedChild/ArthurSlogStore

  • At this point, the initial configuration of the ‘development front’ development environment is complete.

  • Please follow my wechat account ArthurSlog
Scan the QR code on wechat and follow my official account

  • If you like my article, please like it and leave a comment

  • thank you