webpack的安裝使用
-
- 檢測環境是否已經安裝nodejs
- 初始化一個項目
- 安裝webpack
- 項目示例
- 第五步：
-
- 1.建立webpack.config.js檔案
- 2.建立一個src檔案夾添加index.js檔案
- 3.打包項目npx webpack,會生成一個dist檔案夾，裡面包含bundle.js檔案
- 4.在dist檔案夾中建立一個index.html檔案，引入編譯好的bundle.js
- 5.改變package.json檔案中scripts參數
- 重新打包
webpack：子產品打包工具
檢測環境是否已經安裝nodejs
使用快捷鍵“wins+r”打開指令行輸入cmd回車，輸入
node -v
npm -v
檢測是否安裝成功，（NPM是随同NodeJS一起安裝的包管理工具）。
如果沒有安裝，請去安裝NodeJS
建立一個檔案mkdir <檔案名>
mkdir webpack-template
cd webpack-template
初始化一個項目
npm init
安裝webpack
//全局安裝
npm install webpack webpack-cli -g
//檢查是否安裝成功
webpack -v | npm webpack -v
//解除安裝
npm uninstall webpack webpack-cli -g
//局部(項目内)安裝 --save-dev | -D
npm install webpack webpack-cli --save-dev
或者(指定版本号)
npm install [email protected] webpack-cli --D
//檢查是否安裝成功
npx webpack -v
//打包
npx webpack --config webpack.config.js
//如果在package.json檔案中配置了"scripts": {"bundle":"webpack" }
//打包
npm run bundle
項目示例
第五步：
1.建立webpack.config.js檔案
const path=require("path");
module.exports={
mode:"production",//development:未壓縮代碼；production:壓縮代碼
entry:"./src/index.js",//入口檔案
output:{
filename:"bundle.js",
path:path.resolve(__dirname,'dist')
}
}
2.建立一個src檔案夾添加index.js檔案
3.打包項目npx webpack,會生成一個dist檔案夾，裡面包含bundle.js檔案
4.在dist檔案夾中建立一個index.html檔案，引入編譯好的bundle.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
5.改變package.json檔案中scripts參數
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"bundle": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.52.1",
"webpack-cli": "^4.8.0"
}
}
重新打包
npm run bundle==>npx webpack