<!--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. WD HC510 不能被识别

    折腾半天,终于记得去查官方文档

  2. Django2.1集成xadmin管理后台所遇到的错误集锦,解决填坑(二)

    django默认是有一个admin的后台管理模块,但是丑,功能也不齐全,但是大神给我们已经集成好了xadmin后台,我们拿来用即可,但是呢,django已经升级到2.1版本了,xadmin貌似跟不上节 ...

  3. 程序运行时间测试 - 使用系统函数 getrusage 获取程序运行时间

    https://github.com/yaowenxu/Workplace/blob/master/timer/getrusagetimer.c 关键结构体: struct rusage { stru ...

  4. spring mongodb用法

    A field annotated with @Id (org.springframework.data.annotation.Id) will be mapped to the '_id' fiel ...

  5. c++ 命令行执行

    常用命令如下 g++ -g -std=c++ a.cpp -std 指定c++的版本 -g 在可执行程序中包含标准调试信息 -o FILE 指定输出文件名,在编译为目标代码时,这一选项不是必须的.如果 ...

  6. Goldbach`s Conjecture(LightOJ - 1259)【简单数论】【筛法】

    Goldbach`s Conjecture(LightOJ - 1259)[简单数论][筛法] 标签: 入门讲座题解 数论 题目描述 Goldbach's conjecture is one of t ...

  7. for(var i in items) 和 for(var i;i<items.length;i++) 区别

    前者循环的是属性,后者循环的才是数组. 若项目中对数组属性进行了扩展,那切记不能使用前者,否则在循环数组时扩展的函数体也会被当做数据返回. var data = { p1:1, p2:"b& ...

  8. 数据可视化-matplotlib包

    pyplot官网教程https://matplotlib.org/users/pyplot_tutorial.html #导入matplotlib的pyplot模块 import matplotlib ...

  9. <DFS & BFS> 286 339 (BFS)364

    286. Walls and Gates DFS: 思路是,搜索0的位置,每找到一个0,以其周围四个相邻点为起点,开始 DFS 遍历,并带入深度值1,如果遇到的值大于当前深度值,将位置值赋为当前深度值 ...

  10. A1071 Speech Patterns (25 分)

    一.技术总结 开始拿到这道题目时,思考的是我该如何区分它们每一个单词,不知道这里还是要学习得知在cctype头文件中有一个函数用于查看是否为0~9.a~z.A~Z,就是isalnum(),又因为题目中 ...