webpack基本使用方法
程序员文章站
2022-07-12 21:09:57
...
webpack基本使用方法
准备
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev项目结构
demo0
|- package.json
+ |- /src
+ |- index.js
+ |- /dist
+ |- index.html安装 jquery:
npm i jquerysrc/index.js
const $ = require('jquery')
$(function () {
console.log('cheshi')
})
dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>打包构建
# 1. 找到 src/index.js 入口文件
# 2. 分析代码中的依赖（说白了就是 require）
# 3. 打包构建，将结果打包到 dist/main.js
npx webpack执行完以上命令你会发现在项目的 dist 目录下产出了一个文件 main.js。