package.json研究（1）——webpack-dev-server

2019独角兽企业重金招聘Python工程师标准>>>

package.json研究（1）——webpack-dev-server

整个package.json文件内容如下：

{
  "name": "renren-fast-vue",
  "version": "1.2.1",
  "description": "renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案。",
  "author": "daxiong.yang <daxiong.yang@qq.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "build": "gulp"
  },
  "dependencies": {
    "axios": "0.17.1",
    "babel-plugin-component": "0.10.1",
    "babel-polyfill": "6.26.0",
    "element-ui": "2.3.2",
    "gulp": "3.9.1",
    "gulp-concat": "2.6.1",
    "gulp-load-plugins": "1.5.0",
    "gulp-replace": "0.6.1",
    "gulp-shell": "0.6.5",
    "lodash": "4.17.5",
    "node-sass": "4.9.0",
    "sass-loader": "6.0.6",
    "svg-sprite-loader": "3.7.3",
    "vue": "2.5.2",
    "vue-cookie": "1.1.4",
    "vue-router": "3.0.1",
    "vuex": "3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "7.1.2",
    "babel-core": "6.22.1",
    "babel-eslint": "7.1.1",
    "babel-jest": "21.0.2",
    "babel-loader": "7.1.1",
    "babel-plugin-dynamic-import-node": "1.2.0",
    "babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
    "babel-plugin-transform-runtime": "6.22.0",
    "babel-preset-env": "1.3.2",
    "babel-preset-stage-2": "6.22.0",
    "babel-register": "6.22.0",
    "chalk": "2.3.0",
    "chromedriver": "2.27.2",
    "copy-webpack-plugin": "4.0.1",
    "cross-spawn": "5.0.1",
    "css-loader": "0.28.0",
    "eslint": "3.19.0",
    "eslint-config-standard": "10.2.1",
    "eslint-friendly-formatter": "3.0.0",
    "eslint-loader": "1.7.1",
    "eslint-plugin-html": "3.0.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-node": "5.2.0",
    "eslint-plugin-promise": "3.5.0",
    "eslint-plugin-standard": "3.0.1",
    "eventsource-polyfill": "0.9.6",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "1.1.4",
    "friendly-errors-webpack-plugin": "1.6.1",
    "html-webpack-plugin": "2.30.1",
    "jest": "21.2.0",
    "jest-serializer-vue": "0.3.0",
    "nightwatch": "0.9.12",
    "node-notifier": "5.1.2",
    "optimize-css-assets-webpack-plugin": "3.2.0",
    "ora": "1.2.0",
    "portfinder": "1.0.13",
    "postcss-import": "11.0.0",
    "postcss-loader": "2.0.8",
    "rimraf": "2.6.0",
    "selenium-server": "3.0.1",
    "semver": "5.3.0",
    "shelljs": "0.7.6",
    "uglifyjs-webpack-plugin": "1.1.1",
    "url-loader": "0.5.8",
    "vue-jest": "1.0.2",
    "vue-loader": "^13.7.2",
    "vue-style-loader": "3.0.1",
    "vue-template-compiler": "2.5.2",
    "webpack": "3.6.0",
    "webpack-bundle-analyzer": "2.9.0",
    "webpack-dev-server": "2.9.1",
    "webpack-merge": "4.1.0"
  },
  "engines": {
    "node": ">= 8.11.1",
    "npm": ">= 5.6.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

1 webpack-dev-server

其中第8行如下： "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

1.1 使用 webpack-dev-server

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。让我们设置以下：

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

修改配置文件，告诉开发服务器(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')
    }
  };

以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。

让我们添加一个 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"
    }
  }

现在，我们可以在命令行中运行 npm start， 就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。试一下！ webpack-dev-server 带有许多可配置的选项。转到相关文档以了解更多。

现在，服务器正在运行，你可能需要尝试模块热替换(Hot Module Replacement)！

参考：webpack-dev-server

1.2 devServer设置

看一下项目中关于devServer的设置build/webpack.dev.conf.js中的devServer部分：

// these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  }

参考：开发中 Server(DevServer)

1.2.1 devServer.clientLogLevel

string

当使用内联模式(inline mode)时，在开发工具(DevTools)的控制台(console)将显示消息，如：在重新加载之前，在一个错误之前，或者模块热替换(Hot Module Replacement)启用时。这可能显得很繁琐。

你可以阻止所有这些消息显示，使用这个选项：

clientLogLevel: "none"

Usage via the CLI

webpack-dev-server --client-log-level none

可能的值有 none, error, warning 或者 info（默认值）。

1.2.2 devServer.historyApiFallback

boolean object

当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html。通过传入以下启用：

historyApiFallback: true

通过传入一个对象，比如使用 rewrites 这个选项，此行为可进一步地控制：

historyApiFallback: {
  rewrites: [
    { from: /^\/$/, to: '/views/landing.html' },
    { from: /^\/subpage/, to: '/views/subpage.html' },
    { from: /./, to: '/views/404.html' }
  ]
}

当路径中使用点(dot)（常见于 Angular），你可能需要使用 disableDotRule：

historyApiFallback: {
  disableDotRule: true
}

Usage via the CLI

webpack-dev-server --history-api-fallback

更多选项和信息，查看 connect-history-api-fallback 文档。

1.2.3 devServer.hot

boolean 启用 webpack 的模块热替换特性：

hot: true

Note that webpack.HotModuleReplacementPlugin is required to fully enable HMR. If webpack or webpack-dev-server are launched with the --hot option, this plugin will be added automatically, so you may not need to add this to your webpack.config.js. See the HMR concepts page for more information.

1.2.4 devServer.compress

boolean 一切服务都启用gzip 压缩：

compress: true

Usage via the CLI

webpack-dev-server --compress

1.2.5 devServer.host

string 指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问，指定如下：

host: "0.0.0.0"

Usage via the CLI

webpack-dev-server --host 0.0.0.0

1.2.6 devServer.port

number 指定要监听请求的端口号：

port: 8080

Usage via the CLI

webpack-dev-server --port 8080

1.2.7 devServer.open

boolean When open is enabled, the dev server will open the browser.

open: true

Usage via the CLI

webpack-dev-server --open

If no browser is provided (as shown above), your default browser will be used. To specify a different browser, just pass its name:

webpack-dev-server --open 'Google Chrome'

1.2.8 devServer.overlay

boolean object

Shows a full-screen overlay in the browser when there are compiler errors or warnings. Disabled by default. If you want to show only compiler errors:

overlay: true

If you want to show warnings as well as errors:

overlay: {
  warnings: true,
  errors: true
}

1.2.9 devServer.publicPath

string

此路径下的打包文件可在浏览器中访问。

假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 publicPath 是 "/"，所以你的包(bundle)可以通过 http://localhost:8080/bundle.js 访问。

可以修改 publicPath，将 bundle 放在一个目录：

publicPath: "/assets/"

你的包现在可以通过 http://localhost:8080/assets/bundle.js 访问。

确保 publicPath 总是以斜杠(/)开头和结尾。

也可以使用一个完整的 URL。这是模块热替换所必需的。

publicPath: "http://localhost:8080/assets/" bundle 可以通过 http://localhost:8080/assets/bundle.js 访问。

devServer.publicPath 和 output.publicPath 一样被推荐。

1.2.10 devServer.proxy

object

如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。

dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法，请查阅其文档。

在 localhost:3000 上有后端服务的话，你可以这样启用代理：

proxy: {
  "/api": "http://localhost:3000"
}

请求到 /api/users 现在会被代理到请求 http://localhost:3000/api/users。

如果你不想始终传递 /api ，则需要重写路径：

proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""}
  }
}

1.2.11 devServer.quiet

boolean

启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。

quiet: true

Usage via the CLI

webpack-dev-server --quiet

1.2.12 devServer.watchOptions

object

与监视文件相关的控制选项。

webpack 使用文件系统(file system)获取文件改动的通知。在某些情况下，不会正常工作。例如，当使用 Network File System (NFS) 时。Vagrant 也有很多问题。在这些情况下，请使用轮询：

watchOptions: {
  poll: true
}

如果这对文件系统来说太重了的话，你可以修改间隔时间（以毫秒为单位），将其设置为一个整数。

查看 WatchOptions 更多选项。

转载于:https://my.oschina.net/neumeng/blog/2239811