webpack5-基础入门-01

最新推荐文章于 2022-10-31 00:20:08 发布

长沙xtt

最新推荐文章于 2022-10-31 00:20:08 发布

阅读量89

点赞数

分类专栏： webpack 文章标签：前端 webpack

本文链接：https://blog.csdn.net/weixin_40746230/article/details/125151356

版权

webpack 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

依赖环境 node16

新建webpack目录

新建src/main.js src/js/count.js src/js/sum.js public/index.html

npm init -y

//main.js
import count  from "./js/count.js"
import sum from "./js/sum.js"
console.log(count(2,1));
console.log(sum(1,2,3,4));

//count.js
export default function count(x,y){
	return x-y;
}

//sum.js
export default function sum(...args){
	return args.reduce((p,c)=>p+c,0);
}

npx侧重于执行命令的，执行某个模块命令。虽然会自动安装模块，但是重在执行某个命令。
npm侧重于安装或者卸载某个模块的。重在安装，并不具备执行某个模块的功能。

下载依赖

npm i webpack webpack-cli -D

--mode=development 开发环境

--mode=production 生产环境

npx webpack ./src/main.js --mode=development //打包

public/index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>webpack</title>
	</head>
	<body>
		<a>hello world</a>
		<script src="../dist/main.js"></script>
	</body>
</html>

总结：webpack 是一个打包工具，将一些不能识别的语法编译成能识别的语法，webpack本身功能比较少只能处理JS资源一旦遇到CSS 等其他资源会报错，需要安装插件

webpack五大核心概念

1.entry(入口)：指示webpack 从哪个文件开始打包

2.output(输出):指示webpack打包文件输出到哪里去，如何命名

3.loader(加载器)：webpack本身只能处理js.json等资源，其他资源需要借助loader Webpack解析

4.plugin（插件):扩展webpack的功能

5.mode(模式)

主要两种模式：development（开发环境）生产环境（Production）

webpack配置文件 webpack.config.js

配置文件位于项目根目录

//基于node 采用commonJs模块化
const path=require("path");//node.js核心模块 专门来处理路径问题
module.exports={
//入口
entry:"./src/main.js",
//输出
output:{
	//文件输出路径
	//__dirname node.js的变量。代表当前文件的文件夹目录
	path:path.resolve(__dirname,"dist"), //绝对路径
	//文件名
	filename:"main.js"
},
//加载器
module:{
	rules:[
	//loader的配置	
	],
},
//插件
plugins:[
	//plugin的配置
],
//模式
mode:'development'
}