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. Luogu P4426 [HNOI/AHOI2018]毒瘤

    题目 神仙题. 首先我们可以把题意转化为图的独立集计数.显然这个东西是个NP-Hard的. 然后我们可以注意到\(m\le n+10\),也就是说最多有\(11\)条非树边. 我们现在先考虑一下,树上 ...

  2. 剑指offer3：从尾到头打印链表每个节点的值

    1. 题目描述 输入一个链表,从尾到头打印链表每个节点的值. 2. 思路和方法 2.1 推荐的方法 (1)栈,循环 后进先出,我们可以用栈实现这种顺序.每经过一个结点的时候,把该节点放到一个栈里面,当 ...

  3. 前缀和&二维前缀和

    我们知道,数组上的前缀和S[i]=S[i-1]+a[i] 那么,怎样求二维前缀和呢? 二维前缀和: 绿色点的前缀和就是黄色.红色.灰色和绿色的点权和 怎样计算? s[i][j]=s[i-1][j]+s ...

  4. pycharm连接mysql是出现Connection to orm02@127.0.0.1 failed. [08001] Could not create connection to database server. Attempted reconnect 3 times. Giving up.

    下面这个问题反正我是遇到了,也是难为我好几天,于是我决定发一个教程出来给大家看看!希望能帮助你们 原因: 可能是数据库的版本与本机装的驱动不匹配导致的, 解决方案一: 在 url 后面街上一句 因为笔 ...

  5. pycharm虚拟环境的搭建

    目录 优点 windows 安装 配置虚拟环境管理器工作目录 MacOS.Linux 安装 工作文件 配置 使用 pycharm使用 新建项目 添加环境 使用环境 优点 1.使不同应用开发环境相互独立 ...

  6. 【hash】Three friends

    [来源]:bzoj3916 [参考博客] BZOJ3916: [Baltic2014]friends [ 哈希和哈希表]Three Friends [Baltic2014][BZOJ3916]frie ...

  7. Codeforces 1240B. Sequence Sorting

    传送门 分析题目发现如果把某个数 $x$ 往左移,那么之后所有小于 $x$ 的数也都要往左移 如果把 $x$ 往右移,那么之后所有大于 $x$ 的数也都要往右移 考虑我们首先一定有一个操作 $n$ 次 ...

  8. PL/SQL Developer -> 下载 -> 安装 ->执行SQL -> 设置本地/远程连接

    一 下载 点击进入 https://www.allroundautomations.com/bodyplsqldevreg.html 二 安装 4wkf7lzcb8amvke2rzeuclnk5emc ...

  9. vue +echarts树状图

    <template> <div :class="className" :id="id" :style="{height:height ...

  10. golang实现RSA加密解密

    非对称加密示意图: 在此可以看到,非对称加密是通过两个密钥(公钥-私钥)来实现对数据的加密和解密的.公钥用于加密,私钥用于解密. RSA公钥和私钥生成: package main import ( & ...