WEBPACK+ES6+REACT入门1/7-创建webpack4.x项目
前言
因本人项目需求，需要进行前端技术学习，特将学习内容整理如下。
因为对前端的技术十分陌生，希望各大神批评指正！
为了方便交流与学习，特将本笔记整理为七大部分，以下内容为第一部分。
创建webpack4.x项目前
1、学习中使用工具为Microsoft VS Code。需要安装node.js。
2、因webpack各版本配置不同，在执行install命令时，可配置需求所用版本。命令举例：npm install [email protected] -D。此命令为开发环境下（-D）安装4.1.1版本的webpack。实际创建时，各版本如下所示：
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12"
"webpack-dev-server": "^3.1.1"
"html-webpack-plugin": "^3.0.6",
注意：webpack4.x中约定大于配置。目的为减少配置文件体积。
创建webpack4.x项目
1、指定路径，新建webpack-base文件夹
2、使用快捷键crtl+~打开vs控制台。通过cd webpack-base进入刚才创建的文件夹，使用npm init -y命令，默认初始化一个项目（初始化成功后，根目录会出现package.json配置文件）。或使用npm init命令，逐步创建。
3、在VS中打开文件夹，创建源代码目录src和发布代码目录dist，目录及文件结构如下图所示：
4、 安装webpack和webpack-cli，控制台执行npm install webpack webpack-cli -D命令。创建成功后，会在package.json文件的devDependencies下显示当前安装的webpack和webpack-cli以及对应版本。
{
"name": "webpack-base",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.1.1", //生成wepack及版本
"webpack-cli": "^2.0.12",//生成wepack-cli及版本
},
}
5、根目录下创建webpack的配置文件，文件名为webpack.config.js。并在文件中暴露一个向外打包的配置对象。
//向外暴露一个打包的配置对象
//当执行webpack的打包命令后，会去根目录寻找这个文件，并执行，webpack就会拿到这个向外暴露的配置对象。（node）
//webpack默认只打包处理.js后缀文件，其他无法主动处理，要在module中配置第三方loader
module.exports={
mode:'development',//development:开发环境 production：产品环境
}
注意：当前配置mode为开发环境，生成main.js文件未被压缩。当mode配置为production时，被压缩。
6、前面已经提到：webpack4.x中约定大于配置。所以将index.html重命名为index.js后，执行打包命令webpack。打包成功后如下图所示：
7、打包成功后，将打包成功的main.js引入首页：<script src="../dist/main.js"></script>。随后即可打开index.html查看完成效果。
babel
使用全部特性，需要使用babel。babel支持所有ES6特性。作为一个转换器，其可以将一些高级的、浏览器不支持的API、语法转换为低级的、可识别的API、语法。
每次修改完代码后，需重新打包编译，为避免此重复工作，需要使用npm install webpack-dev-server -D命令，配置实时打包编译。
8、在package.json中添加webpack-dev-server配置，如下图所示：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --hot" //添加此配置
},
9、运行npm run dev命令， 实时打包编译。
此时，会自动监听页面更新。打开localhost:8080,会显示当前项目目录。
**在localhost:8080/main.js，可看到实时打包的文件。注意，此时编译的main.js在根目录，并非在dist目录下。说明：webpack-dev-server打包的文件，托管在内存中，并非在物理磁盘。可约定此文件在根目录中存在。所以，在index.html中修改main.js目录 **
<script src="/main.js"></script>
10、打包时可添加配置，在dev后直接添加即可，如：
- 打包后打开浏览器：–open
- 指定端口号：–port 3000
- 热更新：–hot
html-webpack-plugin
亦可将index.html托管在内存中，此时需要安装html-webpack-plugin，
命令为：npm install html-webpack-plugin -D。
11、在webpack.config.js中导入插件，设置源文件目录及名称，以及将插件放入plugins节点。代码如下图所示：
const path =require('path')
//导入在内存中自动生成index.html 的插件
const HtmlWebPackPlugin = require('html-webpack-plugin')
//创建以上插件的实例对象
const htmlWebPackPlugin = new HtmlWebPackPlugin({
template:path.join(__dirname,'./src/index.html'),//源文件
filename:'index.html'//生成的内存中首页的名称
})
//向外暴露一个打包的配置对象
//当执行webpack的打包命令后，会去根目录寻找这个文件，并执行，webpack就会拿到这个向外暴露的配置对象。（node）
module.exports={
mode:'development',//development:开发环境 production：产品环境
//webpack4.x中，有一个很大的特性：约定大于配置 约定的默认打包入口路径为：src->index.js
//所以将index.html文件重命名为index.js
plugins:[
htmlWebPackPlugin
],
}
使用html-webpack-plugin插件，插件会自动将打包好的main.js追加到页面，所以首页上的src路径不要再填写。修改代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<!--在localhost:8080/main.js，可看到实时打包的文件，注意，此时编译的main.js在根目录，并非在dist目录下。
说明：webpack-dev-server打包的文件，托管在内存中，并非在物理磁盘。可约定此文件在根目录中存在。
所以修改原src路径"../dist/main.js"为"/main.js"
-->
<!-- <script src="../dist/main.js"></script> -->
<!-- 因使用了HtmlWebPackPlugin插件，插件会自动将打包好的main.js追加到页面，所以此路径不再需要 -->
<!-- <script src="/main.js"></script> -->
</head>
<body>
<<h1>这是首页</h1> >
</body>
</html>
第一部分创建webpack4.x项目结束。