webpack学习（四）— webpack-dev-server

最新推荐文章于 2021-07-13 13:43:00 发布

weixin_33869377

最新推荐文章于 2021-07-13 13:43:00 发布

阅读量91

点赞数

文章标签： webpack json javascript ViewUI

原文链接：http://www.cnblogs.com/xiaochongchong/p/6074842.html

版权

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

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

package.json

{
  "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

var path = require("path");
module.exports = {
  entry:[
    './js/app.js'
  ],
  output: {
    path: path.resolve('./', "dist"),
    publicPath: "build",
    filename: "bundle.js"
  }
};

　　index.html

<!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

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

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

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

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

 npm run dev

　　相当于运行了　

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

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

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端口启动：

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这么写：

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

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

　　参考

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

转载于:https://www.cnblogs.com/xiaochongchong/p/6074842.html

weixin_33869377

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack学习（四）— webpack-dev-server

webpack提供给我们检查压缩代码的功能之外，还提供了1个服务器的插件，这就是webpack-dev-server，利用这个差价我们可以启动个web服务器并时时更新我们的修改。下面以1个简单的例子说明，项目结构：package.json{ "name": "webpack", "version": "1.0.0", "description": "测...
复制链接

扫一扫