Web 前端 之 Webpack 的环境搭建，以及测试第一个webpack编译打包测试代码工程
目录
Web 前端 之 Webpack 的环境搭建，以及测试第一个webpack编译打包测试代码工程
修改 npm 全局包安装路径 （就可以将全局包不安装在C盘）
四、webpack 进行代码打包（webpack --mode=development ./app.js）
五、webpack 进行代码打包（webpack --config webpack.conf.js）
一、简单介绍
Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。
本节介绍，Web 前端开发中使用 webpack ，环境的安装搭建，并测试webpack 打包功能，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
操作环境：
- win 10
- node 16.14.2 版本
- npm 8.5.0 版本
- webpack: 5.73.0
- webpack-cli: 4.10.0
二、实现原理
编译打包两种方式
1、webpack --mode=development ./app.js
2、webpack --config webpack.conf.js
三、环境搭建
node （npm） 的安装
1、在百度上搜索 下载 nodejs，即可找到下载地址，如图
2、在官网选择自己需要的进行下载，这里以 windows 为例，点击下载即可
3、下载好后，点击安装包，安装即可
4、打开 cmd 窗口（win + R 键，输入 cmd 回车），输入 node -v 和 npm -v 即可看到如下结果说明安装好了
修改 npm 全局包安装路径 （就可以将全局包不安装在C盘）
1、在 cmd 中输入一下命令进行配置
(根据需要设置文件路径 ，但必须是相同的文件名(xxx\npm_global 和 xxx\npm_cache)\配置)
npm config set prefix "D:\MySoftware\NodejsGlobalPackages\npm_global" npm config set cache "D:\MySoftware\NodejsGlobalPackages\npm_cache"
2、可以查看一下是否配置成功
npm config ls
安装cnpm,解决npm安装速度慢甚至不能安装的问题
1、在 cmd 窗口中输入
npm install -g cnpm --registry=http://registry.npm.taobao.org
全局安装 webpack
1、输入命令 npm install webpack -g
全局安装 webpack-cli
1、输入命令 npm install webpack-cli -g
四、webpack 进行代码打包（webpack --mode=development ./app.js）
1、创建一个文件夹，然后创建一个 app.js 、sum.js，到时我们进行打包
2、在 cmd 中切入到代码文件夹，输入 webpack --mode=development ./app.js 进行代码打包，生成 main.js 打包的脚本
3、编写 html ，测试 main.js 代码
4、双击 index.html 浏览器中运行，打印输出如图，表示打包成功
五、webpack 进行代码打包（webpack --config webpack.conf.js）
1、创建脚本 webpack.conf.js
// 引入一个包
const path = require('path')
module.exports = {
// 指定入口文件
entry: "./app.js",
// 指定打包文件所在目录
output: {
// 指定打包文件的目录
path: path.resolve(__dirname, 'dist1'),
// 打包后文件的文件
filename: "bundle.js"
},
mode: 'development', // 设置mode
// 指定webpack打包时要使用的模块
module: {},
// 配置webpack插件
plugins: []
}
2、在控制台输入 webpack --config webpack.conf.js，编译打包
3、在 index.html 把 script src 更换为 <script src="./dist1/bundle.js"></script>
4、双击 index.html 浏览器中运行，打印输出如图，表示打包成功
