webpack5-基础入门-05-处理Html资源开发服务器&自动化打包配置

长沙xtt

于 2022-06-07 16:49:19 发布

阅读量365

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_40746230/article/details/125164123

这篇博客介绍了如何使用 Webpack 配置自动化构建流程，包括自动引入打包资源的 html-webpack-plugin 插件，设置开发服务器 webpack-dev-server，以及开发模式和生产模式的配置。同时，讲解了如何通过 npm 脚本简化操作，实现开发过程的自动化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装包 npm i html-webpack-plugin -D 自动引入打包资源

		<!-- public /index.html-->
					<!-- 手动引入的JS 不需要了 通过插件自动引入 -->
	<!--	<script src="../dist/static/js/main.js"></script> -->

  webpack.config.js

引入

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugin:[

   new HtmlWebpackPlugin(
       // 以 public/index.html 为模板创建文件
   // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
       {
           template:path.resolve(__dirname,"public/index.html"),
       }
       )

]