03webpack借助webpack-dev-server 时时跟新的第一种方式

 

<!-- 如何添加npm run dev 启动程序
        下载    npm install --save-dev webpack-dev-server   
        下载   npm i  webpack-cli -D 


说明一下：
--save-dev等价为-D 意思是安装到开发环境中去；

 也就是package.json中的 devDependencies这个下面





在pack.json中添加 "dev": "webpack-dev-server"这一句 注意使用逗号隔开






          



{


  "devDependencies": {


    "webpack": "^4.44.2",


    "webpack-cli": "^3.3.12",


    "webpack-dev-server": "^3.11.0"


  },


  "scripts": {


    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"


  },


  "dependencies": {


    "jquery": "^3.5.1"


  }


}












        本节实现的功能==》手动修改成自己想要的端口号  2并且自动打开浏览器哦
 
         在package.json中修改
         将“script”:{ "dev":"webpack-dev-server --open --port 3000"} 
         解释==》  --open是自动打开浏览器 --port 3000将端口修改为3000
     -->

     <!-- 本节实现的功能==》
         我们发现启动之后展示的不是一个具体的首页 而是一个目录  如何解决启动之后是一个具体的首页
         将“scripts”:{ "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"}  这里有4个指令
         
         解释==》 --open是自动打开浏览器 --port 3000将端口修改为3000 --contentBase src 以src为根目录 展示它里面的index.html这个文件 
                 --hot实现局部的跟新 你修改了哪里就跟新哪里 效率跟高了  它能够实现网页不重载(那个圈圈不会刷新) 就可以实现页面跟新
      -->

启动的命令是npm  run  dev




 


src目录下的webpack.config.js




const path = require("path");


module.exports = {


  entry: path.join(__dirname, "./src/main.js"), //入口文件 使用webpack要打包哪一个文件


  output: {


    //输出相关的配置


    path: path.join(__dirname, "./dist"), //指定打包好的文件会输出到哪一个目录（dist)下去


    filename: "testindex.js", //指定打包好的文件的名称叫什么名字


  },


};




 


src目录下的index.html




<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/testindex.js"></script>
</head>

<body>
    <div>12</div>
    <div>222</div>
    <div>222</div>

</body>

</html>




 







            

            
posted @ 
2019-08-29 23:11 
南风晚来晚相识 
阅读(194) 
评论(0) 
编辑 
收藏 
举报