安装包 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"),
}
)]
开发服务器&自动化
每次写完代码都需要手动输入指令才能编译代码,

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

被折叠的 条评论
为什么被折叠?



