GVKun编程网logo

webpack自动更新插件 webpack-dev-server（webpack 自动刷新）

15

在本文中，我们将为您详细介绍webpack自动更新插件webpack-dev-server的相关知识，并且为您解答关于webpack自动刷新的疑问，此外，我们还会提供一些关于03webpack借助we

在本文中，我们将为您详细介绍webpack自动更新插件 webpack-dev-server的相关知识，并且为您解答关于webpack 自动刷新的疑问，此外，我们还会提供一些关于03webpack借助webpack-dev-server 时时跟新的第一种方式、04webpack-webpack-dev-server时时跟新的第二种方式、node.js – “找不到命令的webpack-dev-server”错误：webpack-dev-server“、ubuntu – webpack –watch不起作用,也不起webpack-dev-server的有用信息。

本文目录一览：

webpack自动更新插件 webpack-dev-server（webpack 自动刷新）

webpack自动更新插件 webpack-dev-server（webpack 自动刷新）

1. webpack-dev-server----能够实时监视代码更新，自动打包，打包完毕之后开启服务器端口（8080）自动刷新浏览器

npm install --save-dev webpack-dev-server

 

2.修改配置文件，告诉开发服务器(dev server)，在哪里查找文件：

webpack.config.js

  const path = require(''path'');
  const HtmlWebpackPlugin = require(''html-webpack-plugin'');
  const CleanWebpackPlugin = require(''clean-webpack-plugin'');

  module.exports = {
    entry: {
      app: ''./src/index.js'',
      print: ''./src/print.js''
    },
    devtool: ''inline-source-map'',
+   devServer: {
+     contentBase: ''./dist''
+   },
    plugins: [
      new CleanWebpackPlugin([''dist'']),
      new HtmlWebpackPlugin({
        title: ''Development''
      })
    ],
    output: {
      filename: ''[name].bundle.js'',
      path: path.resolve(__dirname, ''dist'')
    }
  };

3.让我们添加一个 script 脚本，可以直接运行开发服务器(dev server)：

 package.json

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
+     "start": "webpack-dev-server --open",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }

 

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

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>




 
04webpack-webpack-dev-server时时跟新的第二种方式
04webpack-webpack-dev-server时时跟新的第二种方式


webpack-dev-server是webpack官方提供的一个小型Express服务器


 使用它可以为webpack打包生成的资源文件提供web服务。


 


webpack-dev-server 主要提供两个功能：
为静态文件提供服务
自动刷新和热替换(HMR)
安装命令: 
npm install --save-dev webpack-dev-server（别忘记安装）



第一种方式 自动打开浏览器 端口号 指定托管的跟目录 启动热刷新  这种是在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,1)"> 端口号
           contentBase:'src',1)"> 指定托管的跟目录
           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"),1)">入口文件 使用webpack要打包哪一个文件
       
       output: {
       输出相关的配置
       path: path.join(__dirname,"./dist"),1)">指定打包好的文件会输出到哪一个目录（dist)下去
       filename: "testindex.js" 指定打包好的文件的名称叫什么名字
       },devServer: {
       open: 自动打开浏览器
       port: 3000,1)">端口号
       contentBase: "src",//指定托管的根目录
       hot: true,//启动热刷新
       },plugins: [ webpack.HotModuleReplacementPlugin()]  //这个就是热跟新的配置
       
       };

      启用命令
      npm  run  dev




 




需要注意的地方
因为现在webpack已经是4了；
所以需要安装npm i  webpack-cli -D 
否者就会报错
Cannot find module 'webpack-cli/bin/config-yargs'
注意下面插件的安装环境
　package.json文件内容如下
          {
            "devDependencies": {
              "webpack": "^4.44.2"
            },"scripts": {
              "dev": "webpack-dev-server": {
              "jquery": "^3.5.1"
            }
          }




 


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>




   注意这里的引用路径，
   因为webapck配置的时候，配置的是src目录下的testindex.js
   此时你更改这里的代码是不会热跟新的；




 


src下的main.js






import $ from "jquery";


$(function () {


  console.log("哈哈1-111啊大苏打");


  console.log("哈在手我的删除动阀案说现在辞职 法十分哈儿");


});







 


此时你发现，自动修改js文件，可以热跟新；


但是index.html却不可以热跟新




import $ from "jquery";


$(function () {


  console.log("哈哈1-111啊大苏打");


  console.log("哈在手我的删除动阀案说现在辞职 法十分哈儿");


});





 
node.js – “找不到命令的webpack-dev-server”错误：webpack-dev-server“
node.js – “找不到命令的webpack-dev-server”错误：webpack-dev-server“





        

           

 我真的不知道为什么我不能让它运行…我已经完成了以下工作. 
 
 
 
 
 
npm install -g webpack webpack-dev-server
 
 
确认两者都安装成功.
 
 
现在,当我尝试执行webpack-dev-server时,我得到以下内容：
 
 
 
 
$webpack-dev-server --inline --hot
zsh: command not found: 'webpack-dev-server'
 
 
永远不要碰到这个,因为我的所有其他npm模块在本地和全局都加载/运行正常.我已尝试将其本地安装到项目中(添加到package.json,npm install,yadda yadda ..)并收到相同的错误.
 
 
我错过了什么吗？




解决方法



 根据 
 this answer on GitHub找到解决方案： 
 
 
 
 
 
 
  
I was able to solve this problem on my machine. It appears to have been an issue with permissions.
 
  
I installed webpack and webpack-dev-server globally. However,even then,$webpack-dev-server resulted in command not found (as stated above).
 
  
The problem was that npm installed the global packages to /usr/local/lib/node_modules which required root permissions.
 
  
In order to avoid having to use root permissions,I changed the directory in which global packages are to be installed to a directory in $HOME. To do this,I followed this guide: 07001
 
  
I installed webpack and webpack-dev-server globally again (this time without sudo) and verified that they have been installed in my new directory.
 
  
Now,I can finally run $webpack-dev-server.
 
 



        

            

        	




ubuntu – webpack –watch不起作用,也不起webpack-dev-server
ubuntu – webpack –watch不起作用,也不起webpack-dev-server

 这开始让我有点疯狂.我花了太多时间试图让webpack工作,观看和热载我的文件.我查看了几个链接并尝试了他们的解决方案,但它并没有解决问题.我想知道它是否与我的设置和权限有关,而不是webpack本身所以我认为我会咬紧牙关并发布在这里以防其他人有相同的设置： 
  
 
我正在使用8GB usb密钥运行Ubuntu 14.04的实时会话,并将我的应用程序文件保存在Documents文件夹中的“src”文件夹中.我正在使用Atom编辑器作为IDE.
 
 
当我导航到src文件夹并运行“webpack –watch ./app.js bundle.js”或“webpack-dev-server –inline –hot”时,它们都运行并给我一些好消息,例如“webpack” ：build现在是VALID“但是当我在Atom中编辑我的js并保存它时,它不会在浏览器页面或终端上自动重新编译.它没有错误.它只是没有做任何事情.
 
 
我尝试删除并重命名/重新创建/移动src文件夹,并检查案例但没有任何变化.当我转到http://localhost:8080时没有重新编译它正确编译.
 
 
对于其他任何人来说,这里有两个最有用的链接,应该解决大多数这样的问题,我还包括一个非常有用的webpack youtube视频,我一直在使用.他们只是不在这个特殊情况下工作.
 
 
webpack –watch isn’t compiling changed files
 
 
Why is webpack –watch not updating when specific files are updated
 
 
Youtube视频：与Jeremy Lund一起介绍Webpack.即使使用本例中显示的最小js文件和webpack.config.js,我也无法运行–watch.
https://www.youtube.com/watch?v=RKqRj3VgR_c
 
 
编辑：
 
 
当webpack-dev-server在控制台中运行时我打开了我的src文件夹,并使用ubuntu的默认文本编辑器而不是Atom手动编辑了我的app.js文件.当我保存文件时,webpack会自动重新编译和捆绑文件并刷新浏览器.似乎问题可能是Atom？我是新手.







 Win7,PHPStorm,VirtualBox：Ubuntu 14.04 
  
 
我遇到了同样的问题.
解决方案已被发现：
webpack –watch isn’t compiling changed files
 
 
运行：webpack –watch –watch-poll当然,在它之前从webpack配置中删除’watch：true’.


今天关于webpack自动更新插件 webpack-dev-server和webpack 自动刷新的讲解已经结束，谢谢您的阅读，如果想了解更多关于03webpack借助webpack-dev-server 时时跟新的第一种方式、04webpack-webpack-dev-server时时跟新的第二种方式、node.js – “找不到命令的webpack-dev-server”错误：webpack-dev-server“、ubuntu – webpack –watch不起作用,也不起webpack-dev-server的相关知识，请在本站搜索。

		

	

本文标签：
 

		





      

    

    

      
 上一篇Webpack中的sourceMap配置（webpack sourcemap配置）   

      
 下一篇webpack4新特性介绍（webpack4.0）   

    


    

      
相关文章