webpack的安装使用（一）

最新推荐文章于 2023-09-27 17:00:32 发布

miao_zz

最新推荐文章于 2023-09-27 17:00:32 发布

阅读量125

点赞数

分类专栏： webpack 文章标签： node.js

本文链接：https://blog.csdn.net/qq_37117408/article/details/120265599

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

webpack的安装使用

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 webpack@5.52.1 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

miao_zz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack的安装使用（一）

webpack的安装使用检测环境是否已经安装nodejs初始化一个项目安装webpack项目示例第五步：1.创建webpack.config.js文件2.创建一个src文件夹添加index.js文件3.打包项目npx webpack,会生成一个dist文件夹，里面包含bundle.js文件4.在dist文件夹中创建一个index.html文件，引入编译好的bundle.js5.改变package.json文件中scripts参数重新打包webpack：模块打包工具检测环境是否已经安装nodejs使用快
复制链接

扫一扫