webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；它可以看作是一个模块打包机，通过一个入口主文件，找到与其相关所有的文件，将这些文件编译打包成浏览器可以识别的语言（vue，ts，less，es6一些高级语法等等）；它可以完美实现资源的合并、打包、压缩（包括将图片转换为base64）、混淆等诸多功能。
运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
在项目根目录中运行npm i webpack --save-dev安装到项目依赖中
这两种方式一种是全局安装，一种是局部项目内安装，那么下面我示例采用全局安装的方式
安装完毕webpack，还需要安装一下webpack-cli，如：
npm i webpack-cli -g
在这里项目中，创建了图中的相关文件目录，主要的用途如下：
bundle.js 等压缩文件。这里main.js是用来作为单一入口 js 文件，所有需要引入的 js以及 css 都可以在这里编写，统一提供html文件进行引入。
package.json和webpack.config.js这两个文件可以先不用建，为了后续打包用的
建立好文档结构之后，在根目录下初始化package.json文件，执行：
npm init -y
为了更好演示压缩 js、css的示例，下面先来编写一个 ul 无序列表，用来间隔改变颜色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webPack基础用法</title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html> <script src="./main.js"></script>
main.js 中通过import引入一个js文件，并且编写样式（浏览器是不会识别import的）/* 这是入口主文件，webpack会根据这个主文件找到项目中其他所有的依赖文件 需要在html中引入该文件 */ // 1\. 导入 一个js文件 (由于是webpack基本使用，建议引入自己写的一个文件，引入其他官方的比如jq，会有更高级的js语法不能识别) // import *** from *** 是ES6中导入模块的方式 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错 import test from "./js/test.js"
test.js 用来修改样式var li = document.getElementsByTagName("li"); Array.from(li).forEach((item,index)=>{ if(index % 2 == 0){ item.style.backgroundColor = "red" }else{ item.style.backgroundColor = "black" } })
做完以上操作；打开页面，发现报错，因为import *** from *** 是ES6中导入模块的方式 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错；
那怎么办呢？可以使用webpack进行压缩转化为浏览器可以执行的js文件。
webpack.config.js，如下：
const path = require(‘path‘); // 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象 module.exports = { // 在配置文件中，需要手动指定 入口 和 出口 在任何模块文件内部，可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。 entry: path.join(__dirname, ‘./src/main.js‘),// 入口，表示，要使用 webpack 打包哪个文件 output: { // 输出文件相关的配置 path: path.join(__dirname, ‘./dist‘), // 指定 打包好的文件，输出到哪个目录中去 filename: ‘bundle.js‘ // 这是指定 输出的文件的名称 }, };
下面再来执行webpack打包看看，如下：
发现打包成功了，然后我们把打包的文件将main.js替换掉后，效果就出来了
那么当我们执行webpack命令之后，到底执行了什么步骤呢？
当我们在 控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
webpack.config.js 的配置文件在日常的开发中，我们可能需要经常修改代码，然后频繁去编译、打包，那么如果每次都要输入webpack去重新打包，然后再刷新浏览器查看，其实是很不方便的。
那么有没有偷懒的方式，让代码变化的时候，自动去打包编译呢？当然有办法，可以使用webpack-dev-server工具。
原文：https://www.cnblogs.com/wangqi2019/p/14338492.html