"The back-end also needs to know a little about the front-end series" using webpack to build a project

The author's writing skills are still shallow, if there is anything wrong, please point out generously, I will be grateful

Today, I am suddenly interested in learning about front-end technology, so I hereby record the way to learn front-end. Since most of the projects done in the company before are about JSPadding, deleting, modifying and checking pages, the front-end and back-end are all written by one person. The front-end is still in the js、html、cssstage, and I don’t know anything about some front-end frameworks. The problems encountered in the back-end cookie、session、token, hereby simply understand the front-end knowledge.

Concept introduction

I probably found some tutorials on the Internet. Because I want to get it fast, I started to learn from building a project. For building projects webpack, I think the front-end webpackand back-end gradle、mavencomparisons are similar to a set of tools to simplify our development (I don't know if the analogy is accurate or not, if there is any error, I hope to point it out). NodeI think the front-end is like the back-end, Javaand it also asks me to install the environment and configure the environment variables from the beginning. After the concept is introduced, I will not talk about nonsense and start a simple project directly.

Environmental preparation

If a worker wants to do a good job, he must first sharpen his tools. Before building the project, prepare the environment.

First of all, of course, is the installation Nodeenvironment. The node download address directly selects the Nodedirect download and installation of the corresponding version, and you can go to the next step. If the installation is successful, the node -v version number will be displayed.
Install Visual Studio Codethe software. The Visual download address is also to select the corresponding machine version to download and install.

Build the project

After the environment is ready, the next step is to build the project

Just create a folder and use it Visual Studio Codeto open.
Open the command line in Visual Studio Code, how to open it as shown below.
After opening it, enter the npm init -ycommand , and find a package.jsonfile (package management configuration file) to quickly initialize the project.
Create two folders in the root directory src(the folder where the source code is stored) and the folder dist(the directory where the released code is stored).
srcCreate index.htmlfiles under. How to quickly generate htmltemplate content? There is a shortcut key (enter an exclamation mark! Then press the Tabkey to quickly generate htmltemplate content)
srcCreate the index.jsfile under, this is the entry file.
Installation cnpm( npmsometimes it is slow to use, because we download things from foreign websites, and cnpmChinese npm downloads directly from domestic websites, and the speed will be faster) The command isnpm i cnpm -g
cnpmInstall using webpackthe commandcnpm i webpack -D
cnpmInstall scaffolding using the commandcnpm i webpack-cli -D
Create a new file in the root directory webpack.config.jsand add variables,
```
	// 向外暴露一个打包的配置对象
	module.exports = {
	    mode: 'development',
	}
```
modeTwo variables can be filled in here development和production, one is used in the development process, whether the file generated in the dist file main.jsis compressed, if the variable filled in is, developmentthen it will not be compressed, if it is production, the js file will be compressed.
At this point, we need to install the plug-in for dynamic deployment, that is, we jsdo not need to restart the project every time we modify the file, we only need to refresh it. The plug-in installation command is cnpm i webpack-dev-server -D, and the parameter is added package.jsonin the middle , the function is to automatically open the page after the project is started successfully, and the function is to control the port number.scripts"dev": "webpack-dev-server --open --port 3000"--open--port

The next step is the optimization phase. htmlWe press the save button every time during the development process. If we interact with the hard disk every time, it will waste time and be bad for the disk loss. So we install a plug-in that can put each saved htmlinto memory, and every time we modify it, it will affect the file in memory. The plugin installation command is cnpm i html-webpack-plugin -D. And configured in the webpack.config.jsconfiguration file as follows.

	const HtmlWebpackPlugin = require('html-webpack-plugin') // 导入在内存中自动生成index页面的插件
	const path = require('path')

	// 创建一个插件的实例对象
	const htmlplugin = new HtmlWebpackPlugin({
	    template: path.join(__dirname,'./src/index.html'), // 源文件
	    filename: 'index.html'
	})

	// 向外暴露一个打包的配置对象
	module.exports = {
	    mode: 'development',
	    plugins:[
	        htmlplugin
	    ]
	}

Start the project and enter directly on the command line npm run devto access our index.htmlpage.

As someone who doesn't know anything about front-end, being able to start up and see the page is a successful first step. In the future, I will continue to learn the front-end in depth, and of course I will use it mainly. I will not talk about some principles (of course I will not). After all, the main focus is still on the rear end.

If you follow my steps without success, I hope to be able to point it out. I will correct and improve