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. ...
随机推荐
- redis哨兵sentinel.conf文件
关闭保护模式 //17行 protected-mode no 端口号 //21 port 26379 后台启动 //26 daemonize yes //84行 主机的ip加端口号 2 为票数 sen ...
- 二项式定理+前缀Sigma
https://hihocoder.com/problemset/problem/1430 思路: 要用前缀去推Sigma总公式,比较方便.https://blog.csdn.net/weixin_3 ...
- T100——单据别的新增、修改设置
何为单据别,例如下图,新增的时候开窗选择单据别: 新增单据别: 1.首先在azzi600 系统分类码维护作业里面新增新的系统分类码(在系统分类码24下新增),如图: 2.在azzi910 作业基本数据 ...
- 记录 OpenCV 错误
最近在做一个"人脸识别"的项目,我想用OpenCV来分析图片中的人脸. 但是在测试的时候,程序报出“检测到0张脸” 可能的错误原因: 1.教程中OpenCV的版本问题,教程中用的版 ...
- url请求
--[[local g = require 'library.global'--__ml_ss = mlc.prefix.ml_psession..tostring(os.time());local ...
- application.properties参数详解
# ----------------------------------------# CORE PROPERTIES# --------------------------------------- ...
- docker_nginx_php_mysql
https://blog.csdn.net/miwumuge/article/details/83386679 问题 1.容器内访问宿主机地址, host.docker.internal
- centos 配置mysql主从复制
mysql+centos7+主从复制 MYSQL(mariadb) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可.开发这个分支的原因之一是:甲骨文公 ...
- css and canvas实现圆形进度条
进度条效果: 话不多说,上代码 使用css动画实现,看到一篇博客的启发,稍微修改了下, css实现的原理是用两个半圆一开始隐藏,再分别旋转180度,最后成为一个整圆 半圆效果,一开始右边的半圆在盒 ...
- ado.net 断开 非断开
非断开 SqlConnection SqlCommand / SqlDataReader 接 断开 SqlConnection SqlDataAdapter / DataSet 接