The author’s writing skill is still shallow, if there is something wrong, please point out generously, will be grateful

Today, I suddenly want to learn the technology of the front end, so I hereby record the way of learning the front end. Since most of the projects I had done in the company were about adding, deleting, modifying and checking JSP pages, I wrote the front-end and back-end by myself. For the front-end, I just stayed at js, HTML and CSS stages, and I had no understanding of some front-end frameworks. When I learned the back-end, I encountered problems like cookie, session and token. This is also a simple understanding of the front-end knowledge.

The concept is introduced

I probably found some tutorials on the Internet, because I want to make it fast, SO I started to learn from building projects. The webpack used to build the project, I think the front-end Webpack is similar to gradle and Maven at the back end, which are a set of tools to simplify our development (I don’t know whether the analogy is accurate here, if there is any mistake, I hope to point out). Front-end Node I think is just like back-end Java, and it’s the setup environment to configure environment variables from the beginning. After the concept is introduced, we can start a simple project without any more nonsense.

Environment to prepare

To do a good job, he must sharpen his tools. Prepare the environment before setting up a project.

  • The first, of course, is installationNodeThe environment,Node download addressSelect the corresponding versionNodeDownload and install directly and proceed to the next step. If the installation succeedsnode -vCan display the publication number.
  • The installationVisual Studio CodeSoftware.Visual Download address, also choose their own corresponding machine version to download and install.

Set up the project

With the environment ready, it’s time to build the project

  • Create a random folder and open it using Visual Studio Code.

  • Open the command line in Visual Studio Code as shown below.

  • Json file (package management configuration file) is generated to quickly initialize the project.

  • Create two folders in the root directory: SRC (where the source code is stored) and dist (where the distributed code is stored).

  • Create the index.html file under SRC. How to quickly generate HTML template content? There is a shortcut key (enter exclamation point! Then press Tab to quickly generate HTML template content.)

  • Create the index.js file under SRC, which is the entry file.

  • Install CNPM (sometimes it is slow to use NPM because we download things from foreign sites, CNPM is a Chinese NPM that downloads directly from domestic sites, it is faster) command NPM I CNPM -g

  • To install webpack using CNPM, run CNPM I webpack -d

  • To install the scaffolding using CNPM, run CNPM I webpack-cli -d

  • Create a new webpack.config.js file in the root directory and add the variables,

    1// Expose a packaged configuration object

    2module.exports = {

    3    mode: 'development'.

    4}

    Copy the code

    Here, mode can fill in two variables development and production. One is used in the development process, whether to compress the main.js file generated in dist file. If the variable is development, it will not be compressed; if production, it will compress the JS file.

  • At this point we need to install the dynamically deployed plug-in, that is, we do not need to restart the project every time we modify the JS file, just need to refresh. Install CNPM I webpack-dev-server -d and add “dev” to scripts in package.json: “Webpack-dev-server –open –port 3000”, –open to automatically open the page after the project is successfully started, –port to control the port number.

  • Next comes the optimization phase, the HTML file we press save every time during the development process, if every time we interact with the hard disk, it will be a waste of time and bad disk wear. So we install a plug-in that puts every HTML we save into memory, and every time we modify it, it will apply to the file in memory. The plug-in installation command is CNPM I html-webpack-plugin -d. And the configuration in the webpack.config.js configuration file is as follows.

     1const HtmlWebpackPlugin = require('html-webpack-plugin') // Import a plugin that automatically generates index pages in memory

     2const path = require('path')

     3

     4// Create an instance object of the plug-in

     5const htmlplugin = new HtmlWebpackPlugin({

     6    template: path.join(__dirname,'./src/index.html'), / / the source file

     7    filename: 'index.html'

     8})

     9

    10// Expose a packaged configuration object

    11module.exports = {

    12    mode: 'development'.

    13    plugins: [

    14        htmlplugin

    15    ]

    16}

    Copy the code

  • To start the project, type NPM run dev directly on the command line to access our index.html page.

As someone who knew nothing about the front end, being able to boot up and see the page was the first successful step. I will continue to learn the front-end in depth when I have time to do so. Of course, I will mainly use the front-end, and I will not speak some principles (of course, I will not). After all, the focus is on the back-end.

If you don’t succeed according to my steps, I hope you can point out. I will correct and improve

This article code address