02day-webpack

<!--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标签并且引入正确的路径

-->

转载于:https://www.cnblogs.com/IwishIcould/p/11094620.html

02day-webpack相关推荐

【webpack 中版本兼容性问题错误总结，耽误半天学习】
[webpack版本兼容性问题错误总结,耽误半天学习] 一定不要运行npm i XXX -g(-d) 一定要指定版本,尽量低版本,也不最新版本,会导致不兼容和指令不一样的问题. 1.安装webpa ...
Vue 学习第五天学习笔记
Vue 学习第五天 1. keyup事件 <div id="app"> <input type="text" v-model=" ...
第四天：Vue组件的slot以及webpack
插槽认识slot 在生活中,很多地方都有插槽,电脑的USB插槽,插板中的电源插槽等. 插槽的目的是让我们原来的设备具备更多的扩展性.比如电脑的USB我们可以插入U盘.鼠标.键盘.硬盘.手机.音响等等 ...
深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)
阅读目录一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlug ...
linux怎么卸载webpack,安装webpack后，执行webpack -v命令时报错：SyntaxError: Block-sc
安装webpack后,执行webpack -v命令时报错如下: [root@FreeServer ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib ...
express给html设置缓存,webpack + express 实现文件精确缓存
由于最近开发的个人博客(Vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化.本次优化的目标如下: index.html 设置成 no-cache,这样每次请求的时候都会比 ...
vue webpack打包入口文件是哪个_Vue项目起步
一,安装nodejs软件(直接商城搜索安装即可). 二,配置npm npm install npm -g 三,配置webpack,在cmd中安装. npm install -g webpack npm ...
webpack打开项目命令_webpack前端模块打包工具基本使用的详细记录（一）
webpack简介我们都知道,Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等 ...
在Vue的webpack中结合runder函数
在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1><div id="app"><login ...
webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...

02day-webpack

02day-webpack相关推荐

最新文章

热门文章