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 <
 
[email protected]>",
  "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