webpack-dev-server 和 html-webpack-plugin的使用
webpack-dev-server的作用：自动编译
1、webpack-dev-server的使用
1）cnpm i webpack-dev-server -D
2）在package.json中配置：
3）终端中输入命令：npm run dev
4）浏览器访问http://localhost:8080/
output file[main.js]托管到“/”，所以可以通过地址http://localhost:8080/main.js来访问
在package.json中配置webpack-dev-server时常用的参数：
"dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
--open: 自动编译完后打开浏览器
5）修改index.html引入main.js
<script src="/main.js"></script>
2、html-webpack-plugin插件的使用
1）cnpm i html-webpack-plugin
2）webpack.config.js
var path = require('path')
// 导入在内存中自动生成index页面的插件
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html' // 生成的内存中首页的名称
});
module.exports = {
mode: 'development',
plugins: [
htmlPlugin
]
}
3）npm run dev，自动打开浏览器访问主页index.html
查看index.html源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>主页</title>
<!-- <script src="../dist/main.js"></script> -->
<!-- <script src="/main.js"></script> -->
</head>
<body>
首页
<div id="app"></div>
<script type="text/javascript" src="main.js"></script></body>
</html>
插件自动添加一行代码：<script type="text/javascript" src="main.js"></script></body>
webpack-dev-server 和 html-webpack-plugin的使用的更多相关文章
- 笔记：配置 webpack dev server
笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...
- [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone
Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...
- 配置Webpack Dev Server 实战操作方法步骤
本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...
- webpack dev server 和 sublime text 配合时需要注意的地方
参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...
- webpack dev server 配置 启动项目报错Error: listen EADDRINUSE
Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题
- 解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...
- webpack 4 & dev server
webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...
- webpack入门（三）webpack的api
终于到了webpack api这一篇,我都等不及了0.0; webpack is fed a configuration object. Depending on your usage of webp ...
- webpack入门指南（基于webpack v4.41.2）
2019年12月5日初稿,目前webpack已经更新到v4.41.2,本文正是基于该版本,在windows8.1操作系统下进行的demo编译,适用于想入门webpack的前端开发人员. webpack ...
- vue-cli脚手架之webpack.dev.conf.js
webpack.dev.conf.js 开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...
随机推荐
- PAT A1046 Shortest Distance (20 分)
题目提交一直出现段错误,经过在网上搜索得知是数组溢出,故将数组设置的大一点 AC代码 #include <cstdio> #include <algorithm> #defin ...
- 安装echo框架
视频地址: https://www.bilibili.com/video/av63492462?p=31 echo文档地址: https://echo.labstack.com/guide/insta ...
- CSS和DOM入门
CSS补充: - position - background - hover - overflow - z-index - opacity 示例:输入框右边放置图标 JavaScript: 局部变量 ...
- Springboot使用javaMail进行邮件发送
导入相关依赖 <!--邮件发送--> <dependency> <groupId>javax.mail</groupId> <artifactId ...
- cef chromium 编译
前言 目前客户端引用了cef sharp库来嵌入web页面 cef sharp是对cef (chromium embed framework)的c#封装 cef是对chromium内核的c++封装 什 ...
- Java多线程（二）：Thread类
Thread类的实例方法 start() start方法内部会调用方法start方法启动一个线程,该线程返回start方法,同时Java虚拟机调用native start0启动另一个线程调用run方法 ...
- python中关于空的说法
0908自我总结 python中关于空的说法 python中表示空的数据 常量None 常量False 任何形式的数值类型零,如0,0L,0.0,0j 空的序列[],() 空的字典{} 用户自定义的n ...
- python获取文件及文件夹大小
Python3.3下测试通过 获取文件大小 使用os.path.getsize函数,参数是文件的路径 获取文件夹大小 import os from os.path import join, getsi ...
- java面试5
1.如何将String类型转化Number类型?列举说明String str = "123"; Integer num1 = new Integer(str); int num ...
- 通俗易懂的axios
get的两种请求: methods:{ //axios.get的发送参数有两种,两个ajax请求函数都可实现 sendGetByStr(){ //1.get通过直接发字符串拼接 axios.get(` ...