<!--14
第一种方式 自动打开浏览器 端口号 指定托管的跟目录 启动热刷新 这种是在webpack.json中去配置的
直接在package中 写
将“script”:{ "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"} 这里有4个指令
-->
 
<!--
第二种方式 自动打开浏览器 端口号 指定托管的跟目录 启动热刷新
在webpack.config.js文件中
第一步:引入webpack
const webpack=require("webpack");
第二步:配置
devServer:{
open:true,//自动打开浏览器
port:3000,// 端口号
contentBase:'src',// 指定托管的跟目录
hot:true //启动热刷新
}
第三步:配置热刷新这个插件的节点
plugins: [new webpack.HotModuleReplacementPlugin()]
 
完整代码如下===》
const path = require("path"); //路径模块
//第2中方式配置webpack
const webpack = require("webpack");
// 配置文件 暴露出去哦 // 手动的指定入口和出口
module.exports = {
entry: path.join(__dirname, "./src/main.js"), //入口文件 使用webpack要打包哪一个文件
output: {
//输出相关的配置
path: path.join(__dirname, "./dist"), //指定打包好的文件会输出到哪一个目录(dist)下去
filename: "bundle.js" //指定打包好的文件的名称叫什么名字
},
devServer: {
open: true, //自动打开浏览器
port: 3000, //端口号
contentBase: "src",
hot: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
-->
 
<!-- 15 html-webpack-plugin的2个作用
下载 cnpm i html-webpack-plugin -D 作用在==>内存中生成页面
在webpack中 导入在内存中生成的HTML页面的插件
// 只要是webpack的插件 都要放入 plugins 这个数组中去
const htmlwebpackPlugin=require("html-webpack-plugin")
 
plugins: [
new webpack.HotModuleReplacementPlugin(), //
new htmlwebpackPlugin({ //创建一个 在内存中生成 HTML页面的插件
template:path.join(__dirname,'./src/index.html'), //指定模板页面,将来会根据指定的页面路径,去生成内存中的 页面
filename:"index.html" //指定生成的页面名称
})
]
 
//
当我们使用html-webpack-plugin之后,我们不需要手动处理bundle.js的引用路径,
(我们可以将index.html中的 <script src="../dist/bundle.js"></script>注释掉 )
因为这个插件,已经帮我们自动创建一个 合适的script,, 并且引用了正确的路径
 
这个插件有两个作用的
在内存中帮我们生成一个页面
帮我们自动创建一个合适的script标签 并且引入正确的路径
-->

02day-webpack的更多相关文章

  1. webpack 中版本兼容性问题错误总结

    一定不要运行npm i  XXX  -g(-d) 一定要指定版本,尽量低版本,也不最新版本,会导致不兼容和指令不一样的问题. 1.安装webpack-dev-server 报错,说需要webpack- ...

  2. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  4. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  5. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  6. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  7. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  8. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  9. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  10. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

随机推荐

  1. Linux iotop工具简介

    iotop的简介: iotop是一款开源.免费的用来监控磁盘I/O使用状况的类似top命令的工具,iotop可以监控进程的I/O信息.它是Python语言编写的,与iostat工具比较,iostat是 ...

  2. java自定义函数调用

    一:主类中自定义函数 在主类中,如果想要在main函数中调用自定义的其他方法,则这个函数需要使用static关键字定义,否则会报错Cannot make a static reference to t ...

  3. np.unique( )的用法

    该函数是去除数组中的重复数字,并进行排序之后输出. 换句话,我想从一个图片选取 1000个不同的点,随机采点经常遇到相同的点,造成重复.np.unique就是用来解决这个问题

  4. acwing 60. 礼物的最大价值

    地址 https://www.acwing.com/problem/content/56/ 在一个m×n的棋盘的每一格都放有一个礼物,每个礼物都有一定的价值(价值大于0). 你可以从棋盘的左上角开始拿 ...

  5. Java流程控制之顺序结构

    概述 在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的.也就是说,程序的流程对运行结果有直接的影响.所以,我们必须清楚每条语句的执行流程.而且,很多时候我们要通过控制语句的执行顺序 ...

  6. 开放平台API接口安全策略汇总

    在设计开放平台接口过程中,往往会涉及接口传输安全性相关的问题,本文对接口加密及签名的相关知识做了一个总结,在方便自己查阅的同时也分享给大家做一些参考. 接口安全性问题思考 接口安全性问题主要来源于几方 ...

  7. IT兄弟连 HTML5教程 HTML语言的语法 2

    HTML颜色值的设置 大多数浏览器都支持颜色名集合,颜色值是一个关键字或一个RGB格式的数字,在网页中用得很多.仅仅有16种颜色名被W3C的HTML 4.0标准所支持,它们是:aqua.black.b ...

  8. 03-模板(过滤器,代码复用,表单,CSRF)

    模块代码复用 在模板中,可能会遇到以下情况: 多个模板具有完全相同的顶部和底部内容 多个模板中具有相同的模板代码内容,但是内容中部分值不一样 多个模板中具有完全相同的 html 代码块内容 像遇到这种 ...

  9. javascript实现base64编码、解码

    我们知道,浏览器的window对象提供有window.atob()和window.btoa()方法可以对字符串进行Base64编码和解码. console.log(window.btoa(window ...

  10. pandas 学习 第5篇:DataFrame - 访问数据框

    数据框是用于存储数据的二维结构,分为行和列,一行和一列的交叉位置是一个cell,该cell的位置是由行索引和列索引共同确定的.可以通过at/iat,或loc/iloc属性来访问数据框的元素,该属性后跟 ...