一文搞定webpak5.0 基础环境搭建（一）
2022-11-08 本文已影响0人
前端Tree
webpak5.0 基础环境搭建
1、搭建webpack 基础编译环境的第一步首先要安装webpack 和webpack-cli 脚手架
npm install webpack webpack-cli --save-dev
2、脚手架安装完成后，我们要初始化一个webpack 项目
首先要建一个文件夹，这个文件夹不能命名为webpack
npm init -y
3、我们需要在文件夹中创建几个文件index.html 和 index.js
// 执行命令
touch index.js
touch index.html
4、在文件中随便写些内容
在index.js 中写入
console.log('执行成功')
alert('编译成功')
在 index.html中写入
<html>
<head>
<meta charset="utf-8" />
<title>起步</title>
<script src="https://unpkg.com/lodash@4.17.20"></script>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
5、此时我们还需要调整package.json
首先要移除 "main": "index.js"
添加"private": true, 添加这个是说明项目是私有的，不可上传包管理工具
6、创建代码分发 dist 文件夹
执行以下命令
mkdir dist
cd /dist
touch index.html
在html中写入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>起步</title>
<script src="https://unpkg.com/lodash@4.17.20"></script>
</head>
<body>
<script src="./src/index.js"></script>
<script src="index.js"></script>
</body>
</html>
7、运行npx webpack 看编译效果吧
打开dist 中html 看编译效果吧
参考网址:https://webpack.docschina.org/guides/getting-started/
