jeecgboot 前端打包 yarn 前端打包工具webpack

打包工具 （静态资源打包工具） 前端必备

文章目录

• 前言
• 一、webpack 是什么？
• 二、webpack 的特点？
• 三、webpack的核心？
• 四、webpack 手动搭建步骤

• 1.确认 当前环境有没有 webpack -v
• 2.在想要成为 打包文件的文件夹中，使用 npm init -y 初始化一个package.json
• 3.创建一个src，src下面创建一个index.html ,里面加一个div div随便起一个 id root名字，让引入bundle.js
• 4.src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的root div
• 5.打包 webpack src/main.js --output src/bundle.js
• 6.若有报错使用最新命令
• 7.建立本地服务器 cnpm i webpack-dev-server -D
• 8.npm run dev 运行

• 总结

---

前言

打包工具 （静态资源打包工具） 前端必备

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、webpack 是什么？

打包工具 （静态资源打包工具） 前端必备

二、webpack 的特点？

1.js依赖进行整合处理 （打包整合）
2.一些预处理的sass，less可以在环境中进行编译 （转换）
3.可以对js、html、图片等进行压缩 （优化）

三、webpack的核心？

1. entry  入口文件    // 好比main.js
2. output 出口文件    // 好比dist 打包之后的文件夹
3. plugin 插件       // 自动生成html文件等插件
4. loader 转换器     // sass less 转换成我们想要的文件类型
5. dev-serve 服务器  // 使我们webpack在本地运行 服务
6. mode      模式    // 可以切换开发环境 和 生成环境

四、webpack 手动搭建步骤

1.确认 当前环境有没有 webpack -v

2.在想要成为 打包文件的文件夹中，使用 npm init -y 初始化一个package.json

cmd小黑框显示内容为：

编辑器中显示内容为（自动生成）：

3.创建一个src，src下面创建一个index.html ,里面加一个div div随便起一个 id root名字，让引入bundle.js

4.src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的root div

5.打包 webpack src/main.js --output src/bundle.js

发现报错

错误原因：webpack版本太高，指令不一样

6.若有报错使用最新命令

使用最新命令 webpack .\src\main.js -o .\dist\bundle.js

1.首先要配置好webpack.config.js文件

代码块可直接复制

const path = require('path')
module.exports = {
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
  output: { // 输出文件相关的配置
    filename: 'bundle.js',  // 这是指定 输出的文件的名称
    path: path.join(__dirname, './dist')// 指定 打包好的文件，输出到哪个目录中去
  }
}

配置好webpack.config.js文件，再进行使用最新命令 webpack .\src\main.js -o .\dist\bundle.js

dist文件夹会自动生成，包括bundle.js文件（和里面的内容），而后将src文件夹中的index.html文件复制到dist文件夹的bundle.js文件夹内，页面就会显示所写一下内容

7.建立本地服务器 cnpm i webpack-dev-server -D

8.npm run dev 运行

此时，修改main.js里的内容，页面上内容也会随之改变

---

总结

请问要来点小鱼干嘛🐟🐳🐋🦐🦑🐙🦞🦀🐚