webpack 项目使用 html-webpack-plugin（3）

html-webpack-plugin 这个插件的功能是将 html 文件打包，在上一篇的博客中我们使用webpack-server将webpack项目使用本地的项目打开如：loalhost:3000

具体内容：https://blog.csdn.net/datouniao1/article/details/119449220

但是最终显示的结果如上，显示这个目录下面的文件，并不是我们想要的index.html页面，这也就是因为我们的html 参与项目的打包。那么如何将项目打包，才能实现首页是我们的index.html,这就需要一个插件：html-webpack-plugin

我们继续之前的项目：

1. 下载 html-webpack-plugin

cnpm i html-webpack-plugin -D

2.修改 webpack.config.js

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin'); //导入，在内存中自动生成 index 页面
const htmlPlugin=new HtmlWebpackPlugin({template:path.join(__dirname,'./src/index.html'),filename:'index.html'
});module.exports={mode:'development',plugins:[htmlPlugin]
}

3.重新运行

npm run dev

我们可以看到现在的localhost:3000 不再是文件的目录了，变成了项目的首页，这也就是我们的html-webpack-plugin的作用

4.需要注意的是在使用了html-webpack-plugin插件之后我们的index.html页面会自动的引入相关的js

那么我们就不需要手动的引入main.js了

index.html 如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>hello</title></head><body><h1>Hello World</h1></body>
</html>

上面就是我们创建webpack的过程了

希望对你有所帮助

webpack 项目使用 html-webpack-plugin（3）相关推荐

git 创建webpack项目_使用webpack手动创建一个完整项目的全过程
1.创建文件夹"webpack-study" 2.使用webstrom打开文件夹所在位置.在根目录上创建一个文件,文件命名为"src",在src文件下新建css ...
webpack 项目使用--创建webpack 项目（1）
1.新建一个文件夹假设文件夹的名称为 wdgapp,并且通过命令行到该目录下 2. 初始化项目 npm init -y 3.在wdgapp 文件夹中创建src 文件夹(源代码) 和dist(编译生成 ...
分析vue-cli@2.9.3 搭建的webpack项目工程
前言已经有很多分析Vue-cli搭建工程的文章,为什么自己还要写一遍呢.学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景.你不一定能看到别人看到的风景,体会到别人的心情.只有自己去登山 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
Webpack之插件html webpack plugin
Webpack之插件html webpack plugin html-webpack-plugin插件动态生成html文件并自动引入js文件静态文件无需加载js或css文件,通过设置入口文件可以将 ...
webpack项目css插件压缩等步骤
webpack项目css插件压缩等步骤 minicssextractplugin css插件防止闪屏首先安装npm i mini-css-extract-plugin -S 要求webpack5 这 ...
vue-cli@2.9.3 搭建的webpack项目工程
前言已经有很多分析 Vue-cli搭建工程的文章,为什么自己还要写一遍呢.学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景.你不一定能看到别人看到的风景,体会到别人的心情.只有自己去登 ...
webpack 项目使用--转换为React项目（4）
在上面的几篇博客中我们创建了webpack项目,现在我们需要将webpack项目转换为react项目,如何进行转换 1.将项目中的node_modules 文件夹删除 2. 安装dom 和react- ...

webpack 项目使用 html-webpack-plugin（3）

webpack 项目使用 html-webpack-plugin（3）相关推荐

最新文章

热门文章