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. 【LOJ】#3121. 「CTS2019 | CTSC2019」无处安放

    第一次有耐心去研究一道题答-- 以前看到题答要么扔要么就水能简单手玩出来的 1 2可以手玩出来,快乐! 4呢发现3 3比较格路,就把3 3都配了,一边带个4的除了4 4都塞满这么放进去,然后把一边带2 ...

  2. tp5支付宝和微信支付

    一.生成二维码给用户进行扫码支付 1.先在vendor目录下加入支付宝和微信支付的引用 2.付款处调用 /** * 订单支付接口 * * @api {post} {:url('order/pay')} ...

  3. 并不对劲的bzoj4001:loj2105:p3978:[TJOI2015]概率论

    题目大意 随机生成一棵\(n\)(n\leq10^9)个节点的有根二叉树,问叶子结点个数的期望. 题解 subtask 1:\(n\leq100\),70pts 结论:不同的\(n\)个节点的有根二叉 ...

  4. Java EE javax.servlet中的ServletResponse接口

    ServletResponse接口 public interface ServletResponse 子接口:HttpServletResponse 实现类:HttpServletResponseWr ...

  5. spring-cloud 学习二 服务发现

    注册中心服务发现的例子 添加module pom文件如下 <?xml version="1.0" encoding="UTF-8"?> <pr ...

  6. 大数据测试类型&大数据测试步骤

    一.什么是大数据? 大数据是一个大的数据集合,通过传统的计算技术无法进行处理.这些数据集的测试需要使用各种工具.技术和框架进行处理.大数据涉及数据创建.存储.检索.分析,而且它在数量.多样性.速度方法 ...

  7. python之数字类型小知识

    数字是表示计数的抽象事物,也是数学运算和推理的基础,所以,生活中数字是生活中无处不在的,那么,在python语言中运用数字有哪些小知识呢,不妨花点时间看一下这篇博文,牢记这些小知识. 整数类型中四种进 ...

  8. 修改this的指向

    call var a={ name:'xuux', fn:function(a,b){ console.log(a+b); console.log(this);//{name: "xuux& ...

  9. 【Git的基本操作一】文件初始化及设置签名

    1. 本地库初始化 命令: git init 效果: 

  10. C# 知识点笔记：IEnumerable<>的使用,利用反射动态调用方法

    IEnumerable<T>的使用 创建一个IEnumerable对象 List<string> fruits = new List<string> { " ...