①先引入html-webpack-plugin插件,然后在终端下载

npm install --save-dev html-webpack-plugin

②我的文件结构

③修改webpack.dev.js 配置信息

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports={
//入口文件的配置项
entry:{
//里面的main是可以随便写的
main:'./src/main.js',
main2:'./src/main2.js' //这里新添加一个入口文件
},
output:{
//打包的路径
path:path.resolve(__dirname,'../dist'),
//打包的文件名称
filename:'[name].js'
},//插件,用于生产模板和各项功能
plugins:[
new HtmlWebpackPlugin({
title: 'Custom template',
template: './src/index.html', //指定要打包的html路径和文件名
filename:'../dist/index.html' //指定输出路径和文件名
})
]
}

④再启动它,因为我在package.json设置的入口是 build

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production --config=config/webpack.dev.js",
},

即 npm run build 即可

再次检查文件目录,会发现在dist目录下多了一个index.html,css、js文件自动引入,无需手动加入

webpack4——打包html报错解决的更多相关文章

  1. python pyinstaller 打包程序报错解决

    python打包exe,各种入坑 一.安装PyInstaller 1.安装pywin32 pip命令安装:pip install pywin32(推荐) 2.安装Pyinstaller pip命令安装 ...

  2. 终端ssh登录mac用shell打包ipa报错:replacing existing signature

    终端ssh登录mac用shell打包ipa报错:replacing existing signature 报错原因:login.keychain被锁定,ssh登录的没有访问权限 解决方法:终端敲入 s ...

  3. 【Python】pyinstaller打包运行报错failed to execute script main

    前言 最近用pyinstaller打包的时候一直报"failed to execute script main". 最终使用"pyinstaller --hidden-i ...

  4. sphinx :undefined reference to `libiconv' 报错解决办法

    sphinx :undefined reference to `libiconv' 报错解决办法   2013-11-30 21:45:39 安装sphinx时不停报错...郁闷在make时报错,错误 ...

  5. redis运用连接池报错解决

    redis使用连接池报错解决redis使用十几小时就一直报异常 redis.clients.jedis.exceptions.JedisConnectionException: Could not g ...

  6. linux下启动dbca或netmgr类的图形界面报错解决

    linux下启动dbca或netmgr类的图形界面报错解决    Xlib: connection to ":0.0" refused by server Xlib: No pro ...

  7. CentOS 6.5 Maven 编译 Apache Tez 0.8.3 踩坑/报错解决记录

    最近准备学习使用Tez,因此从官网下载了最新的Tez 0.8.3源码,按照安装教程编译使用.平时使用的集群环境是离线的,本打算这一次也进行离线编译,无奈一编译就开始报缺少jar包的错,即使手动下载ja ...

  8. spring boot jpa 使用update 报错解决办法

    在spring boot jpa 中自定义sql,执行update操作报错解决办法: 在@Query(...)上添加 @Modifying@Transactional注解

  9. eclipse创建的maven项目,pom.xml文件报错解决方法

    [错误一:]maven 编译级别过低 [解决办法:] 使用 maven-compiler-plugin 将 maven 编译级别改为 jdk1.6 以上: <!-- java编译插件 --> ...

随机推荐

  1. FZU 1924——死锁——————【topo判环】

    死锁 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status Pr ...

  2. ICONIX

  3. C#基础(第一天)

    Ctrl+K+D:对其代码: #Region      #endRegion:折叠多余代码: Ctrl+K+S:可以折叠代码写注释: 语法格式:数据类型  变量名:                  ...

  4. DW网页制作,数学,数据库管理

    数学(函数关系的建立) 函数关系:确定性现象之间的关系常常表现为函数关系,即一种现象的数量确定以后,另一种现象的数量也随之完全确定,表现为一种严格的函数关系. 如:记为y=f(x),其中x称为自变量, ...

  5. attribute和property的区别

    DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为“特 ...

  6. spring+hibernate 配置多个数据源过程 以及 spring中数据源的配置方式

    spring+hibernate 配置多个数据源过程 以及 spring中数据源的配置方式[部分内容转载] 2018年03月27日 18:58:41 守望dfdfdf 阅读数:62更多 个人分类: 工 ...

  7. WSAAsyncSelect 消息模型

    select 模型虽然可以管理多个socket,但是它涉及到一个时机的问题,select模型会针对所管理的数组中的每一个socket循环检测它管理是否在对应的数组中,从时间复杂度上来说它是O(n^2) ...

  8. JavaScirpt(JS)的this细究

    一.js中function的不同形态 js中类和函数都要通过function关键字来构建. 1.js中当函数名大写时,一般是当作类来处理 function Foo(name, age) { this. ...

  9. 洛谷P1970 花匠(dp)

    题意 题目链接 Sol 直接用\(f[i][0/1]\)表示到第\(i\)个位置,该位置是以上升结尾还是以下降结尾 转移的时候只需枚举前一个即可 #include<cstdio> #inc ...

  10. angular-自定义模块

    <!DOCTYPE html><html lang="en" ng-app="app"><head> <script ...