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

时间 2019-11-12

标签 webpack 学习 dev server 繁體版

原文原文链接

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

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

package.jsonhtml

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

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

　　index.htmlnode

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

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

　　-------------git

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

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

 npm run dev

　　至关于运行了　npm

　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