Webpack是一个强大的静态模块打包工具它可以将各种类型的文件如JavaScript、CSS、图片等作为模块进行打包并生成最终的静态资源文件。Webpack使用各种loader和plugin来处理不同类型的文件还可以进行代码分割、懒加载、压缩等优化操作。————————————————1.创建项目工程---------------------------------------------------------------------------------------------------------新建空白文件夹作为项目根目录。在该根目录下的终端运行npm init -y初始化package.json配置文件。在根目录下新建src源代码目录并在src中新建index.js和index.html脚本文件。在根目录终端运行npm install jquery -S命令进行jQuery安装-S是--save的缩写意思是在开发环境和生产环境都使用jQuery安装成功后会在根目录下多出node_modules和package-lock.json两个文件以及在package.json文件中多出dependencies用于存放各种依赖版本信息。在index.html中写上代码内容并引入index.js文件。在index.js文件中引入jQuery进行需要的代码操作。进入浏览器展示效果出现浏览器报错原因是使用了高级语言具有兼容性问题所以需要使用webpack进行解决在根目录下的终端运行npm install webpack5.42.1 webpack-cli4.7.2 -D命令进行安装。安装成功会在package.json文件中多出devDependencies来存放版本信息。-D是--save-dev的缩写意思是只在开发环境的使用webpack和webpack-cliPS如果在安装webpack的过程中出现如下图的报错则是代表需要将package.json文件的name修改成为非webpack的名字然后再重新执行命令即可。再进行webpack需要的配置。①在根目录下新建一个webpack.config.js的文件用于存放配置信息development模式打包速度快适合开发情况production打包的体积小适合上线的情况②在package.json文件的scripts中添加“dev”:webpack③在终端执行npm run dev的命令成功了就会在根目录下多出一个dist文件夹里面存放的是webpack打包好的文件。④将index.html中引入的index.js换成dist文件下的main.js刷新浏览器样式出现。2.插件使用优化---------------------------------------------------------------------------------------------------------修改了package.json或者webpack.config.js后都需要重启服务器在使用webpack开发的过程中如果每修改一次代码就需要npm run dev一次十分地降低效率因此进行一些配置使得开发效率提高每改一次代码就需要打包一次的优化webpack-dev-server在根目录下运行npm install webpack-dev-server3.11.2 -D命令并将package.json文件中scripts的dev: webpack改为dev: webpack serve再运行npm run dev命令若是出现如下图的8080路径即为成功。webpack-dev-server会启动一个实时打包的http服务器PS在上面过程中可能会出现如下图的问题加载不到这个配置只需要运行npm install webpack-cli --save-dev即可解决然后再运行npm run dev命令即可出现8080路径。进入8080路径查看代码运行情况发现样式并没有生效这个原因是因为webpack的output是在根目录下的而我们引用的是dist文件夹里的所以没有生效在下图中也可以看到提示。这是因为webpack serve会在内存中生成一个bunlde而不是在物理磁盘即任务栏中生成并显示出来因为内存的速度快所以要实现实施效果就要引用内存中的bunlde解决方法为修改index.html中的引用路径为script src/main.js/script即可实现实时展示效果不再需要进行执行命令打包。打包文件出入口设置webpack.config.js在webpack 4.x和5.x的版本中有如下默认出入口约定①默认的打包入口文件为src-index.js②默认的输出文件路径为dist-main.js可以在webpack.config.js文件中进行打包出入口的修改entry为打包入口文件路径output为输出文件路径输出路径又包含文件路径path和文件名字filename可以自己定义打包完成后就会在path路径下的dist文件夹里看到名为filename的文件。进入8080端口就展示页面设置html-webpack-plugin经过了webpack-dev-server配置后就能通过8080端口进行访问页面但是并不是我们想要的页面还需要点击src文件夹后才是我们想要的页面通过html-webpack-plugin可以帮我们解决这个问题实际上就是将需要展示的index.html页面复制一份放到根目录下即可。使用npm install html-webpack-plugin5.3.2 -D命令安装插件安装成功会在package.json文件中出现对应的版本信息在webpack.config.js文件中进行相关的配置①使用require导入HTML插件得到一个构造函数②使用new创建HTML插件实例对象并传入对应需要的参数③通过plugins让htmlPlugin插件生效重新执行npm run dev命令即可PShtml-webpack-plugin插件在上述过程中做了两件事①把通过使用该插件复制到项目根目录中的index.html页面同时放到了内存中②该插件在复制生成的index.html页面中自动注入了被打包了bundle.js文件所以就算在src下的index.html里被引用的bundle.js被注释了依旧能够在页面上展示样式首次运行就自动跳转浏览器、端口号修改、指定主机地址可以通过修改webpack.config.js文件的devServer来实现3.loader使用优化------------------------------------------------------------------------------------------------------在开发过程中webpack默认只能打包处理以.js后缀名结尾的模块其他的非.js后缀名结尾的模块webpack是处理不了的所以需要使用loader加载器才能正常打包处理否则就会报错。loader加载器的作用就是协助webpack进行打包处理特定的文件模块。css-loaderstyle-loader使用在src文件中新建一个css文件并在css文件中新建一个index.css添加css代码用于修改样式在index.js文件中使用ES6的导入方法将css代码进行导入运行命令npm run dev发现出现如下图的错原因是webpack不能处理非js的代码缺少loader去帮助webpack进行处理为了解决上述问题需要安装相关的loader故在终端运行命令npm i style-loader3.0.0 css-loader5.2.6 -D安装成功后会在package中出现对应的配置信息。装完成后需要在webpack.config.js文件中进行相关的配置。在use中配置的loader的位置是固定的并且执行的顺序是从右往左的即先调用css-loader再进行style-loader的调用如果顺序反了就会报错。配置完后重新执行npm run dev命令即可。css-loader以及style-loader的处理过程①因为webpack只能处理以.js结尾的文件所以当遇到.css结尾的文件时就处理不了因此就 会去webpack.config.js这个配置文件中看module.rules数组中是否配置了对应的loader加载器。②因为use的执行顺序是从右往左所以webpack先把index.css这个文件交给css-loader进行处理处理完后css-loader把处理的结果再转交给style-loader进行处理style-loader处理完后发现没有loader需要处理的就把最后的处理结果交还给webpack。③webpack在拿到loader最后的处理结果后把处理结果一起合并到/dist/bundle.js文件中最终生成打包好的文件。这时候就可以正常展示样式了。less-loader使用在css文件夹中添加新的index.less文件并将该文件引入到index.js文件中运行npm run dev命令发现出现如下错误是因为缺少相对应的loader进行处理。在终端执行npm i less-loader10.0.1 less4.1.1 -D命令安装less-loader并在webpack.confid.js中进行如下配置再运行npm run dev命令即可。PSless是less-loader的内置依赖项less-loader的工作依赖于less但是只需要进行安装不需要进行手动配置。url-loader以及file-loader的使用当页面中的img是非base64的格式那么在读取img标签后会再次发起请求去获取对应的图片产生了不必要的请求发起解决方法就是将多个小的图片整合成一张精灵图或者转化为base64格式的img因为base64格式的img在获取img标签的时候就将图片也一起拿到了不需要再次发起请求。由于转换成base64格式会导致体积变大因此不建议将大图片转化成base64的只建议转化小图片在src文件夹下新建一个img文件夹用于放置图片并将图片在index.js中引入使用运行npm run dev现报错。执行npm i url-loader4.1.1 file-loader6.2.0 -D命令安装url-loader和file-loader并配置相关配置。同理file-loader也是一个内置依赖在控制台输出img可以看到该图片时base64的格式前面说过图片转成base64的格式会导致体积变大因此只有小图片适合转成base64的格式但是现在的配置能使得全部的图片都转化为base64的格式是不利于体积的控制的因此可以通过添加limit进行限制。limit是用来指定图片大小的单位是字节只有≦limit的图片才会被转为base64的格式。这个时候大于10000字节的图片就是以非base64的格式进行展示的。babel-loader的使用因为webpack只能进行一部分的高级js代码处理因此剩余部分的js代码就需要使用babel-loader进行打包处理。在index.js中添加webpack不能处理的高级js代码出现报错。运行npm i babel-loader7 babel-core babel-preset-es2015 -D命令安装babel-loader并进行相关配置再重新运行npm run dev命令即可。项目打包build在package.json文件的scripts中新增加一个命令命令内容如下dev是用来在开发环境中运行的而build则是在项目发布时使用的用于构建打包代码。--mode是一个参数用于指定webpack的运行模式并且通过--mode指定的参数会覆盖webpack.config.js中的mode选项。重新打包时自动删除原来的dist文件clean-webpack-plugin运行npm install --save-dev clean-webpack-plugin命令安装插件。在webpack.config.js文件中进行相关配置即可。Source Map将源代码文件和打包后的代码文件进行出问题的行号的转换使得在打包后出现报错时展示的行号是源代码的行号而不是打包后的行号在webpack.config.js中添加如下代码即可。使用符号减少…/的使用
webpack的使用步骤及插件使用方法
发布时间：2026/7/22 9:26:23
Webpack是一个强大的静态模块打包工具它可以将各种类型的文件如JavaScript、CSS、图片等作为模块进行打包并生成最终的静态资源文件。Webpack使用各种loader和plugin来处理不同类型的文件还可以进行代码分割、懒加载、压缩等优化操作。————————————————1.创建项目工程---------------------------------------------------------------------------------------------------------新建空白文件夹作为项目根目录。在该根目录下的终端运行npm init -y初始化package.json配置文件。在根目录下新建src源代码目录并在src中新建index.js和index.html脚本文件。在根目录终端运行npm install jquery -S命令进行jQuery安装-S是--save的缩写意思是在开发环境和生产环境都使用jQuery安装成功后会在根目录下多出node_modules和package-lock.json两个文件以及在package.json文件中多出dependencies用于存放各种依赖版本信息。在index.html中写上代码内容并引入index.js文件。在index.js文件中引入jQuery进行需要的代码操作。进入浏览器展示效果出现浏览器报错原因是使用了高级语言具有兼容性问题所以需要使用webpack进行解决在根目录下的终端运行npm install webpack5.42.1 webpack-cli4.7.2 -D命令进行安装。安装成功会在package.json文件中多出devDependencies来存放版本信息。-D是--save-dev的缩写意思是只在开发环境的使用webpack和webpack-cliPS如果在安装webpack的过程中出现如下图的报错则是代表需要将package.json文件的name修改成为非webpack的名字然后再重新执行命令即可。再进行webpack需要的配置。①在根目录下新建一个webpack.config.js的文件用于存放配置信息development模式打包速度快适合开发情况production打包的体积小适合上线的情况②在package.json文件的scripts中添加“dev”:webpack③在终端执行npm run dev的命令成功了就会在根目录下多出一个dist文件夹里面存放的是webpack打包好的文件。④将index.html中引入的index.js换成dist文件下的main.js刷新浏览器样式出现。2.插件使用优化---------------------------------------------------------------------------------------------------------修改了package.json或者webpack.config.js后都需要重启服务器在使用webpack开发的过程中如果每修改一次代码就需要npm run dev一次十分地降低效率因此进行一些配置使得开发效率提高每改一次代码就需要打包一次的优化webpack-dev-server在根目录下运行npm install webpack-dev-server3.11.2 -D命令并将package.json文件中scripts的dev: webpack改为dev: webpack serve再运行npm run dev命令若是出现如下图的8080路径即为成功。webpack-dev-server会启动一个实时打包的http服务器PS在上面过程中可能会出现如下图的问题加载不到这个配置只需要运行npm install webpack-cli --save-dev即可解决然后再运行npm run dev命令即可出现8080路径。进入8080路径查看代码运行情况发现样式并没有生效这个原因是因为webpack的output是在根目录下的而我们引用的是dist文件夹里的所以没有生效在下图中也可以看到提示。这是因为webpack serve会在内存中生成一个bunlde而不是在物理磁盘即任务栏中生成并显示出来因为内存的速度快所以要实现实施效果就要引用内存中的bunlde解决方法为修改index.html中的引用路径为script src/main.js/script即可实现实时展示效果不再需要进行执行命令打包。打包文件出入口设置webpack.config.js在webpack 4.x和5.x的版本中有如下默认出入口约定①默认的打包入口文件为src-index.js②默认的输出文件路径为dist-main.js可以在webpack.config.js文件中进行打包出入口的修改entry为打包入口文件路径output为输出文件路径输出路径又包含文件路径path和文件名字filename可以自己定义打包完成后就会在path路径下的dist文件夹里看到名为filename的文件。进入8080端口就展示页面设置html-webpack-plugin经过了webpack-dev-server配置后就能通过8080端口进行访问页面但是并不是我们想要的页面还需要点击src文件夹后才是我们想要的页面通过html-webpack-plugin可以帮我们解决这个问题实际上就是将需要展示的index.html页面复制一份放到根目录下即可。使用npm install html-webpack-plugin5.3.2 -D命令安装插件安装成功会在package.json文件中出现对应的版本信息在webpack.config.js文件中进行相关的配置①使用require导入HTML插件得到一个构造函数②使用new创建HTML插件实例对象并传入对应需要的参数③通过plugins让htmlPlugin插件生效重新执行npm run dev命令即可PShtml-webpack-plugin插件在上述过程中做了两件事①把通过使用该插件复制到项目根目录中的index.html页面同时放到了内存中②该插件在复制生成的index.html页面中自动注入了被打包了bundle.js文件所以就算在src下的index.html里被引用的bundle.js被注释了依旧能够在页面上展示样式首次运行就自动跳转浏览器、端口号修改、指定主机地址可以通过修改webpack.config.js文件的devServer来实现3.loader使用优化------------------------------------------------------------------------------------------------------在开发过程中webpack默认只能打包处理以.js后缀名结尾的模块其他的非.js后缀名结尾的模块webpack是处理不了的所以需要使用loader加载器才能正常打包处理否则就会报错。loader加载器的作用就是协助webpack进行打包处理特定的文件模块。css-loaderstyle-loader使用在src文件中新建一个css文件并在css文件中新建一个index.css添加css代码用于修改样式在index.js文件中使用ES6的导入方法将css代码进行导入运行命令npm run dev发现出现如下图的错原因是webpack不能处理非js的代码缺少loader去帮助webpack进行处理为了解决上述问题需要安装相关的loader故在终端运行命令npm i style-loader3.0.0 css-loader5.2.6 -D安装成功后会在package中出现对应的配置信息。装完成后需要在webpack.config.js文件中进行相关的配置。在use中配置的loader的位置是固定的并且执行的顺序是从右往左的即先调用css-loader再进行style-loader的调用如果顺序反了就会报错。配置完后重新执行npm run dev命令即可。css-loader以及style-loader的处理过程①因为webpack只能处理以.js结尾的文件所以当遇到.css结尾的文件时就处理不了因此就 会去webpack.config.js这个配置文件中看module.rules数组中是否配置了对应的loader加载器。②因为use的执行顺序是从右往左所以webpack先把index.css这个文件交给css-loader进行处理处理完后css-loader把处理的结果再转交给style-loader进行处理style-loader处理完后发现没有loader需要处理的就把最后的处理结果交还给webpack。③webpack在拿到loader最后的处理结果后把处理结果一起合并到/dist/bundle.js文件中最终生成打包好的文件。这时候就可以正常展示样式了。less-loader使用在css文件夹中添加新的index.less文件并将该文件引入到index.js文件中运行npm run dev命令发现出现如下错误是因为缺少相对应的loader进行处理。在终端执行npm i less-loader10.0.1 less4.1.1 -D命令安装less-loader并在webpack.confid.js中进行如下配置再运行npm run dev命令即可。PSless是less-loader的内置依赖项less-loader的工作依赖于less但是只需要进行安装不需要进行手动配置。url-loader以及file-loader的使用当页面中的img是非base64的格式那么在读取img标签后会再次发起请求去获取对应的图片产生了不必要的请求发起解决方法就是将多个小的图片整合成一张精灵图或者转化为base64格式的img因为base64格式的img在获取img标签的时候就将图片也一起拿到了不需要再次发起请求。由于转换成base64格式会导致体积变大因此不建议将大图片转化成base64的只建议转化小图片在src文件夹下新建一个img文件夹用于放置图片并将图片在index.js中引入使用运行npm run dev现报错。执行npm i url-loader4.1.1 file-loader6.2.0 -D命令安装url-loader和file-loader并配置相关配置。同理file-loader也是一个内置依赖在控制台输出img可以看到该图片时base64的格式前面说过图片转成base64的格式会导致体积变大因此只有小图片适合转成base64的格式但是现在的配置能使得全部的图片都转化为base64的格式是不利于体积的控制的因此可以通过添加limit进行限制。limit是用来指定图片大小的单位是字节只有≦limit的图片才会被转为base64的格式。这个时候大于10000字节的图片就是以非base64的格式进行展示的。babel-loader的使用因为webpack只能进行一部分的高级js代码处理因此剩余部分的js代码就需要使用babel-loader进行打包处理。在index.js中添加webpack不能处理的高级js代码出现报错。运行npm i babel-loader7 babel-core babel-preset-es2015 -D命令安装babel-loader并进行相关配置再重新运行npm run dev命令即可。项目打包build在package.json文件的scripts中新增加一个命令命令内容如下dev是用来在开发环境中运行的而build则是在项目发布时使用的用于构建打包代码。--mode是一个参数用于指定webpack的运行模式并且通过--mode指定的参数会覆盖webpack.config.js中的mode选项。重新打包时自动删除原来的dist文件clean-webpack-plugin运行npm install --save-dev clean-webpack-plugin命令安装插件。在webpack.config.js文件中进行相关配置即可。Source Map将源代码文件和打包后的代码文件进行出问题的行号的转换使得在打包后出现报错时展示的行号是源代码的行号而不是打包后的行号在webpack.config.js中添加如下代码即可。使用符号减少…/的使用
