依赖环境 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'
}
运行 npx webpack
开发模式
做两件事:
1,编译代码,使浏览器能识别运行
2,代码质量检查,树立代码规范