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. ...
随机推荐
- Go语言Mac、Linux、Windows 下交叉编译
在很多时候,由于开发的方便,会有这样的场景出现,使用Mac开发或使用Windows开发,需要编译成Linux系统的执行文件,那么如何做到?Go语言提供了非常方便的命令行操作,即可实现. 1.Mac下编 ...
- Elastic Search快速上手（1）：简介及安装配置
前言 最近开始尝试学习Elastic Search,因此决定做一些简单的整理,以供后续参考,快速上手使用ES. 简介 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多 ...
- 并不对劲的CF480E:Parking Lot
题目大意 有一个\(n\times m\)的网格,每个位置是黑色或者白色.\(k\)个操作,每个操作是将一个白格子染黑,操作后输出当前最大的白色正方形的边长.\(n,m,k\leq 2\times 1 ...
- 使用AI算法进行手写数字识别
人工智能 人工智能(Artificial Intelligence,简称AI)一词最初是在1956年Dartmouth学会上提出的,从那以后,研究者们发展了众多理论和原理,人工智能的概念也随之扩展 ...
- JS基础_自增自减练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 海量数据处理 从哈希存储到Bloom Filter(1) (转载)
先解释一下什么是哈希函数.哈希函数简单来说就是一种映射,它可取值的范围(定义域)通常很大,但值域相对较小.哈希函数所作的工作就是将一个很大定义域内的值映射到一个相对较小的值域内. 传统的哈希存储 假设 ...
- SpringMVC——正常访问静态文件，不要找不到静态文件报404的方法
方案一:激活Tomcat的defaultServlet来处理静态文件 <span style="font-size:12px;"> <servlet-mappin ...
- vue-cli3开干
npm install -g @vue/cli-service-global vue create hello-world
- Repeater循环页面上的控件
List<string> list = new List<string>(); for (int k = 0; k < RepeaterList.Items.Count; ...
- JAVA语言程序设计课后习题----第三单元解析（仅供参考）
1 本题水题,记住要知道输入格式即可 import java.util.Scanner; public class test { public static void main(String[] ar ...