webpack手动构建的步骤以及相关的注意事项

目录

1. 项目根目录下初始化根目录

2. 安装 webapck 包 以及相关依赖

3. 根目录下创建 webpack.config.js ，配置 webpack 以及相关插件

webpack.config.js

4. 涉及到的 index.js 中的相关代码

index.js

5. babel 插件的一些配置

安装 babel 插件

babel.config.js (放在webpack.config.js同级根目录下即可)

---

1. 项目根目录下初始化根目录

npm init -y 

2. 安装 webapck 包 以及相关依赖

npm i webpack -D  
// webpack 核心包
// -D 是 --save-dev 的缩写，意为把 webpack 包安装放到 devDependencies 依赖中
// devDependencies 中的相关依赖在后续的打包发布过程中，不会被压缩进 main.js 的中

npm i jquery -S
// 如果要用 jQuery 可以安装 jQuery 包 -S 代表会被放到 dependencies 依赖中，
// dependencies 代表不管测试还是发布时都需要用到这个包，将会被压缩进 main.js 中

npm i webpack-dev-server -D
// webpack-dev-server 提供一个类似于 nodemon 的环境，每次保存非 webpack.config.js 文件后
// 会自动在内存中生成一个虚拟的 main.js 用于查看效果(不存在于物理磁盘上)

npm i html-webpack-plugin -D
// webpack-dev-server 在生成后会访问 http://127.0.0.1 (可配置)的这个地址的目录
// 每次进入要手动打开 src 文件进入 html 文件查看效果
// 而 html-webpack-plugin 插件用于方便进入 webpack-dev-server ，在运行 server 的时候会自动
// 复制一个目标路径(可配置)的 html 放在根目录(可配置) 这样打开地址就可以直接打开 html 文件

npm i clean-webpack-plugin -D
// 自动删除根目录下的 dist 文件夹
// 配置在 webpack.config.js 中

npm i style-loader css-loader less less-loader -D
// less 是 less-loader 相关的依赖
// css-loader 用于加载 css 相关的代码
// style-loader 负责把 加载完的 less 代码或者 css 相关代码用 style 包裹起来 以便插入网页中

npm i url-loader file-loader -D
// url-loader 用于图片转换等配置，具体配置在 webpack.config.js 文件中

3. 根目录下创建 webpack.config.js ，配置 webpack 以及相关插件

webpack.config.js

        此配置文