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