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

-->