一文搞定webpak5.0 基础环境搭建（一）

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中写入

5、此时我们还需要调整package.json
首先要移除 "main": "index.js"
添加"private": true, 添加这个是说明项目是私有的，不可上传包管理工具
6、创建代码分发 dist 文件夹
执行以下命令

mkdir dist 
cd /dist
touch index.html

在html中写入

7、运行npx webpack 看编译效果吧
打开dist 中html 看编译效果吧
参考网址:https://webpack.docschina.org/guides/getting-started/