"Have to understand a little front-end back-end series of" building project using webpack

Today, the mood suddenly want to learn about the technology front-end, it is hereby road leading end of the recording learning. Since the company before doing projects mostly on JSPthe additions and deletions to change search page, the front end of the back-end is a person to write, to just stay at the front js、html、cssstage, for some front-end framework that does not know, just learning the back end when it came to cookie、session、tokenthe question, is hereby also simply look at the front end of knowledge.

Concepts

Probably found some tutorials, because it is like to crash, so start building the project began to learn. Used to build the project webpack, I think the front-end webpackand back-end of gradle、maventhe comparison are similar simplified set of tools we have developed (here do not know about the accuracy of analogy, if false, then hope to be able to point it out). The front end NodeI think it is like the back end Java, let me also start up the installation environment configuration environment variable. After the introduction to the concept of nonsense that open directly take a simple project.

Preparing the Environment

We must first of its profits. Before building the project should prepare the environment.

First, of course, is to install Nodethe environment of, node address to download directly select the appropriate version here Nodedownload and install directly, have been the next step can be. If the installation is successful node -v to display publication of this number.
Install Visual Studio Codesoftware. Download Visual, also choose their own corresponding machine-download version can be installed.

Building project

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

Just create a folder, then Visual Studio Codeopen.
In the Visual Studio Codeopen command line, as shown how to open.
Open a command line and then enter the npm init -ycommand, found to generate a package.jsonfile (package management profiles), fast initialization project.
在根目录下建立两个文件夹src（存放源代码的文件夹）和dist（存放发布代码的目录）文件夹。
在src下建立index.html文件。怎么快速生成html的模板内容呢？有个快捷键（输入叹号！然后按Tab按键，即可快速生成html模板内容）
在src下建立index.js文件，这是入口文件。
安装cnpm（使用npm有时候会速度慢，因为我们从外国网站下载东西，cnpm是中国的npm直接从国内网站下载，速度会快一些）命令为npm i cnpm -g
使用cnpm安装webpack，命令cnpm i www.huanhua2zhuc.cn webpack www.yunzeyle.cn-www.jiuyueguojizc.cn D
使用cnpm安装脚手架，命令cnpm i webpack-cli -D
在根目录下新建webpack.config.js文件，然后加入变量，
```
	// 向外暴露一个打包的配置对象
	module.exports = {
	    mode:www.wanyayuue.cn 'development',
	}
```
这里mode可以填写两个变量development和production，一个是开发过程中用的，在dist文件中生成的main.js文件是否压缩，如果填写的变量是development那么就不压缩，如果是production则压缩js文件。
此时我们要安装动态部署的插件，即我们每次修改js文件后不需要重启项目，只需要刷新即可。插件安装命令为cnpm i webpack-dev-server -D，并且在package.json中在scripts中加入参数 "dev": "webpack-dev-server --open --port 3000"，--open作用是启动项目成功后自动打开页面，--port作用是控制端口号。

接下来是优化阶段，html文件我们每次在开发过程中按保存键，如果每次都和硬盘做交互的话，那么会浪费时间并且对磁盘损耗也不好。所以我们安装一个插件可以将每次保存的html放入内存中，我们每次修改的话都会作用到内存中的文件。插件安装命令为cnpm i html-webpack-plugin -D。并且在webpack.config.js配置文件中配置如下。

	const HtmlWebpackPlugin = require(www.jinyang3zhuc.cn'html-webpack-plugin') // 导入在内存中自动生成index页面的插件
	const path = require('path') // 创建一个插件的实例对象 const htmlplugin = new HtmlWebpackPlugin({ template: path.join(www.tianhyLzc.cn__dirname,'./src/index.html'), // 源文件 filename: 'index.html' }) // 向外暴露一个打包的配置对象 module.exports =www.yachengyl.cn  { mode: 'development', plugins:[ htmlplugin ] }

启动项目，直接在命令行中输入npm run dev即可访问到我们的index.html页面了。

作为一个对前端一无所知的我来说能够启动起来看到页面已经是成功的迈出第一步了。接下来有时间依然会不断的深入学习前端，当然还是以会用为主，一些原理我也不会讲（当然我也不会）。毕竟主要精力还是放在后端方向的。

如果大家根据我的步骤没有成功的，希望能够指出来。我会改正并完善