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. 数位dp详解&&LG P2602 [ZJOI2010]数字计数

    数位dp,适用于解决一类求x~y之间有多少个符合要求的数或者其他. 例题 题目描述 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来,就可以消除 ...

  2. python的异常处理机制

    异常机制己经成为衡量一门编程语言是否成熟的标准之一,使用异常处理机制的 Python 程序有更好的容错性,更加健壮. 对于计算机程序而言,情况就更复杂了一一没有人能保证自己写的程序永远不会出辛苦!就算 ...

  3. Python特色数据类型--元组

    元组是不可改变的,创建后就不能做任何修改操作了 1.元组用()表示

  4. 深入理解Redux之手写React-Redux

    React-Redux主要由两部分组成,一是Provider(提供者),顾名思义作用就是提供状态数据. 另一部分是connect函数,它的作用是把UI组件和状态数据“连接”起来,实现了Model和Vi ...

  5. sp_addlinkedserver 跨服务器连接数据库查询

    ----创建远程链接服务器--exec sys.sp_addlinkedserver --@server='LMS',--被访问的服务器别名--@srvproduct='',--@provider=' ...

  6. （三）创建基于maven的javaFX+springboot项目创建

    创建基于maven的javaFx+springboot项目有两种方式,第一种为通过非编码的方式来设计UI集成springboot:第二种为分离用户界面(UI)和后端逻辑集成springboot,其中用 ...

  7. Centos7:ActiveMQ安装,配置及使用

    解压缩ActiveMQ 的压缩包 使用 命令在bin目录下 ./activemq stat//开启 ./activemq stop//关闭 ./activemq status//状态 进入管理后台 U ...

  8. js 操作对象的小技巧

    来源:https://www.w3cplus.com/javascript/javascript-tips.html 1.使用...运算符合并对象或数组中的对象 同样使用ES的...运算符可以替代人工 ...

  9. 巧用Map缓存提升"翻译"速度

    在业务编码中,很多情况都需要用到code2Name或者id2Name之间的"翻译",在我的过往经历中发现不少开发人员都是直接双重循环实现这种"翻译".如果一次& ...

  10. java_day02_标识符等

    ch02 目标: 1. 标识符.关键字和类型介绍 2. 如何构建类---------------------------------1.注释 作用:使部分内容只为程序员可见,不为编译器所编译.虚拟机所 ...