Web 前端 之 Webpack 的环境搭建，以及测试第一个webpack编译打包测试代码工程

Web 前端 之 Webpack 的环境搭建，以及测试第一个webpack编译打包测试代码工程

目录

Web 前端 之 Webpack 的环境搭建，以及测试第一个webpack编译打包测试代码工程

一、简单介绍

二、实现原理

三、环境搭建

node （npm） 的安装

 修改 npm 全局包安装路径 （就可以将全局包不安装在C盘）

安装cnpm,解决npm安装速度慢甚至不能安装的问题

全局安装 webpack

 全局安装 webpack-cli

四、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 为例，点击下载即可

下载 | Node.js

 

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 浏览器中运行，打印输出如图，表示打包成功