WEBPACK+ES6+REACT入門1/7-創建webpack4.x專案
- 前言
- 創建webpack4.x專案前
- 創建webpack4.x專案
- babel
- html-webpack-plugin
前言
因本人專案需求，需要進行前端技術學習，特將學習內容整理如下，
因為對前端的技術十分陌生，希望各大神批評指正！
為了方便交流與學習，特將本筆記整理為七大部分，以下內容為第一部分，
創建webpack4.x專案前
1、學習中使用工具為Microsoft VS Code，需要安裝node.js，
2、因webpack各版本配置不同，在執行install命令時，可配置需求所用版本，命令舉例：npm install webpack@4.1.1 -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專案結束，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/235500.html
標籤：其他