webpack打包工具——前端必备（个人学习）

最新推荐文章于 2023-02-13 20:19:18 发布

阿彤の小铃铛

最新推荐文章于 2023-02-13 20:19:18 发布

阅读量347

点赞数 3

本文链接：https://blog.csdn.net/weixin_47295135/article/details/109738485

版权

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

文章目录

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

前言

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

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

一、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文件夹内，页面就会显示所写一下内容