1.webpack環境的搭建
npm install webpack webpack -D //開發環境受用
我使用的代碼編輯工具是VScode，安裝code runner插件很方便
2.webpack的默認打包
(1).簡歷項目文件夾
(2).項目目錄結構
|-src
----index.js
|-index.html
(3).初始化項目 npm init -y
在index.js文件夾裏面寫一些東西，例如
//index.js
console.log('start learning webpack！')
接着打開cmd終端進入項目文件（vscode直接按Ctrl+`）
輸入：npx webpack
然後就會在項目文件夾上生成一個dist文件夾，裏面有main.js。
現在在index.html裏面就可以引入這個main.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./dist/main.js"> </script>
</head>
<body>
</body>
</html>
3.webpack的基礎配置
在項目根目錄裏面建立一個 webpack.config.js 文件，用來寫配置
附上代碼：
let path = require('path');
//console.log(path.resolve(__dirname,'dist'))
module.exports ={
mode:'development', //有兩種模式，開發模式以及生產模式development production
entry:'./src/index.js', //項目打包的入口文件，告訴webpack從哪個開始打包
output:{ //這裏是輸出的意思
filename:'main.js', //輸出的文件名
path:path.resolve(__dirname,'dist')//輸出路徑必須是絕對路徑，這裏使用node自帶的path
}
}
第一節學習筆記完畢！