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的使用的更多相关文章

  1. 笔记：配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  2. [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 ...

  3. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  4. webpack dev server 和 sublime text 配合时需要注意的地方

    参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...

  5. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题

  6. 解决新版本webpack vue-cli生成文件没有dev.server.js问题

    新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...

  7. webpack 4 & dev server

    webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...

  8. webpack入门（三）webpack的api

    终于到了webpack api这一篇,我都等不及了0.0; webpack is fed a configuration object. Depending on your usage of webp ...

  9. webpack入门指南（基于webpack v4.41.2）

    2019年12月5日初稿,目前webpack已经更新到v4.41.2,本文正是基于该版本,在windows8.1操作系统下进行的demo编译,适用于想入门webpack的前端开发人员. webpack ...

  10. vue-cli脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

随机推荐

  1. 使用jackson序列化json时遇到的坑

    公司使用Springboot进行开发,里面默认使用了jackson进行序列化. 但是序列化的过程中一直报错,因此记录一下. ⒈jackson默认大小写敏感,且首字母转小写 在类上添加一下注解即可 @J ...

  2. 线性基求交（2019牛客国庆集训派对day4）

    题意:https://ac.nowcoder.com/acm/contest/1109/C 问你有几个x满足A,B集合都能XOR出x. 思路: 就是线性基求交后,有几个基就是2^几次方. #defin ...

  3. php学习历程1——注册、登录（面向过程、面向对象）

    首先放一张天空之城 Php入门来的第一个小项目,首先做的是一个简陋的文章管理系统.有登录.注册.文章list.添加文章.修改文章.删除文章.分页这几个小功能. 面向过程的编码 面向对象的编码 首先做的 ...

  4. luffy后台相关设置

    目录 项目创建 环境 创建项目 重构项目目录 配置开发环境 配置日志 环境变量 dev.py 在写项目直接导入utils文件夹也不''错误提示'' 封装logger dev.py utils/logg ...

  5. Lua 打印 table (支持双向引用的table)

    网上搜了一下,挺多打印table的方案,基本思路都是一层一层递归遍历table.(我就是参考这种思路做的^_^) 但大部分都不支持双向引用的打印.我所指的双向引用,就是a引用b, b又直接或间接引用a ...

  6. .Net面试题四

    1.C#编译成的dll存放在哪个目录?C#程序文件的后缀名是什么?.csproj后缀名是什么文件? 2.请写出C#中常用文件操作类.数据库操作类.网络请求类.每项至少写出三个 3.请定义一个只读属性: ...

  7. java——HashSet中add（）方法不能加重复值得原因理解（我们一起来看底层代码吧）

    Set<String> names = new HashSet<>(); names.add("张三"); names.add(new String(&qu ...

  8. asp.net 7.分页

    分页 SQL: select * from( select *,row_number()over(order by id) as num from T_userInfo) as t 数据层(UserI ...

  9. SQL中 left join 的底层原理

    介绍 left join的实现效果就是保留左表的全部信息,将右表往左表上拼接,如果拼不上则为NULL. 除了left join以外,还有inner join.outer join.right join ...

  10. Scrapy - 第一个爬虫和我的博客

    第一个爬虫 这里我用官方文档的第一个例子:爬取http://quotes.toscrape.com来作为我的首个scrapy爬虫,我没有找到scrapy 1.5的中文文档,后续内容有部分是我按照官方文 ...