webpack学习(四)— webpack-dev-server

 webpack提供给我们检查压缩代码的功能之外,还提供了1个服务器的插件,这就是webpack-dev-server,利用这个差价我们可以启动个web服务器并时时更新我们的修改。

下面以1个简单的例子说明,项目结构:

 

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "测试webpack",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --inline --hot --config webpack.config.js"
  },
  "author": "zouqin",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.21.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.16.2"
  }
}

 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
var path = require("path");
module.exports = {
  entry:[
    './js/app.js'
  ],
  output: {
    path: path.resolve('./', "dist"),
    publicPath: "build",
    filename: "bundle.js"
  }
};

  index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
         
    </head>
    <body>
        <h1>我是h1标签</h1>
        <script src="build/bundle.js"></script>
    </body>
</html>

  js/app.js

1
document.getElementsByTagName('h1')[0].style.background='#0f0';

  

  -------------

  以上的目录文件建好之后,用 npm install 安装package.json中声明的依赖。这时候项目根目录下就会生成node_modules文件夹。

  接下来,就启动webpack-dev-server。命令参见package.json下的 "scripts"项,用: 

1
npm run dev

  相当于运行了 

1
webpack-dev-server --inline --hot --config webpack.config.js  

  还有另外一种方式:在项目根目录下运行:

1
node node_modules/.bin/webpack-dev-server  

  这其实说明了我们的webpack命令是来自node_modules/.bin/webpack-dev-server。我们看github webpack-dev-server官网

  

  本项目用的在inline模式,没有嵌在frame中。默认的端口号是8080,所以访问地址是:http://localhost:8080/index.html

  webpack-dev-server是一个小型的Node.js Express服务器【1】。既然这样,很多配置是可以设置的。启动端口号可以设置的,下面这个就在8000端口启动:

1
webpack-dev-server --port 8000 --devtool eval --progress --colors --hot --inline

  

  

  注意:

  1)webpack.config.js中的output项,可以这么理解:path是打包的项目路径,用webpack -p 执行。publicPath是webpack-dev-server的路径。

  2)webpack-dev-server他将打包后的存在内存中,并没有在工作区生成一个文件。打包文件用,用webpack -p 命令。

  3)--hot 是热加载,也就是说,当我们改动文件后保存,浏览器已经自动刷新了我们的修改,不需要按F5,这在我们开发时很方便

  4)修改index.html文件,并不会热加载。热加载相关的是入口文件,本例中的是js/app.js文件,修改这个文件,会热加载。

  5) 本例没有用css,用了css,并在入口文件js/app.js中require,修改css。也会热加载。同理,如果用了HTML的插件,在入口文件中引入,也会热加载。

  6)网上的好多例子,在webpack.config.js这么写:

  

1
2
3
4
entry: [
    'webpack/hot/only-dev-server',
    "./js/app.js"
  ],

  多了个'webpack/hot/only-dev-server',实践下来发现去掉完全可以。

  参考

  【1】https://segmentfault.com/a/1190000006964335

 

posted @   小虫1  阅读(14023)  评论(0编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· 深度对比:PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
点击右上角即可分享
微信分享提示