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項目結束。