demo18 webpack-dev-server (開發模式)

1.development vs production

development 模式:

在開發環境中，咱們但願可以更加方便的進行開發以及調試代碼，當項目運行起來後，能夠自動打開瀏覽器，webpack 可以經過監聽代碼的修改，自動從新編譯打包，而且實時刷新瀏覽器。

production 模式:

在生產模式中，咱們但願可以獲得一個更小的 bundle，更輕量的 source >map，從而改善加載時間。

若是沒有設置 mode ，webpack 默認以 production 模式進行打包。

2.webpack-dev-server

webpack-dev-server 是 webpack 官方提供的一個小型 Express 服務器。 經過配置它能夠在開發模式下爲 webpack 打包生成的靜態資源文件啓動一個 web 服務器，並檢測代碼的變化進行實時更新。

注意：webpack-dev-server只能工做於 development 模式。

webpack4提供了一個 devServer 的選項，來配置 webpack-dev-server。

devServer 的配置項挺多的，詳見文檔：www.webpackjs.com/configurati…

• contentBase: 設置靜態資源的路徑，默認是當前工做目錄。

• hot: 設置熱更新功能，實現不刷新瀏覽器就能對修改到的模塊進行熱更新。

• open： devServer 自動打開瀏覽器

• overlay: 配置當 webpack 編譯警告或出錯時，是否在瀏覽器顯示

  overlay: true // 顯示錯誤
  或
  overlay: {
    warnings: true, // 顯示警告
    errors: true // 顯示錯誤
  }
  複製代碼

• port: 指定要監聽請求的端口號

• proxy: devServer 是一個基於 express 的後端服務，在後端中是沒有跨域的限制的（由於跨域是瀏覽器的行爲），所以，經過這個代理，瀏覽器就不會出現跨域的問題了。好比經過以下配置把 /api 代理到 xxx.xxx.xxx.xxx/api

  proxy: {
    "/api": "http://xxx.xxx.xxx.xxx/api"
  }
  複製代碼

• historyApiFallback: 當使用 HTML5 History API 時，默認狀況下任意的 404 響應都被替換爲 index.html。 能夠經過以下修改配置

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

3.安裝相關依賴

注意: webpack-dev-server 依賴於 webpack 和 webpack-cli，因此須要在本地安裝 webpack 和 webpack-cli。

npm install -D webpack-dev-server
npm install -D webpack webpack-cli
npm install -D css-loader url-loader file-loader 
npm install -D mini-css-extract-plugin 
npm install -D html-webpack-plugin clean-webpack-plugin
複製代碼

4.目錄結構

// `--` 表明目錄， `-` 表明文件
  --demo18
    --src
      --assets
        --fonts
          -icomoon.css
          -icomoon.eot //3KB
          -icomoon.svg //5KB
          -icomoon.ttf //3KB
          -icomoon.woff //3KB
        --styles
          -app.css
      -app.js
    -index.html
    -webpack.config.js
複製代碼

src/assets/fonts/icomoon.css

@font-face {
  font-family: "icomoon";
  src: url("./icomoon.eot?nn7hff");
  src: url("./icomoon.eot?nn7hff#iefix") format("embedded-opentype"),
    url("./icomoon.ttf?nn7hff") format("truetype"),
    url("./icomoon.woff?nn7hff") format("woff"),
    url("./icomoon.svg?nn7hff#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-wechat:before {
  content: "\e900";
  color: #7bb32e;
}
.icon-github:before {
  content: "\e902";
}
.icon-envelop:before {
  content: "\e945";
}
複製代碼

src/assets/styles/app.css

.icons-box {
  width: 500px;
  height: 100px;
  margin: auto;
  margin-top: 180px;
}

.icons-box i {
  font-size: 100px;
  margin-left: 20px;
}
複製代碼

src/app.js

import "./assets/fonts/icomoon.css";
import "./assets/styles/app.css";
複製代碼

5.編寫webpack配置文件

webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  mode: "development", // 開發模式
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: '/', // 打包後資源文件的引用會基於此路徑
    path: path.resolve(__dirname, "dist"), // 打包後的輸出目錄
    filename: "[id].[name].[chunkhash:8].bundle.js", // 在development模式下,id爲name
    chunkFilename: "[id].[name].[chunkhash:8].chunk.js"
  },
  devtool: "source-map", // 
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 8000,
    hot: false,
    overlay: true,
    historyApiFallback: {
      rewrites: [{ from: /.*/, to: "/index.html" }]
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      },
      {
        test: /\.(eot|woff2?|ttf|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[name]-[hash:5].min.[ext]",
              limit: 3000,
              publicPath: "fonts/",
              outputPath: "fonts/"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ // 自動生成html,而且自動導入全部依賴同步包
      filename: "index.html",
      template: "./index.html",
      minify: {
        // collapseWhitespace: true // 壓縮
      }
    }),
    new MiniCssExtractPlugin({
      filename: "[id].[name].[chunkhash:8].css",
      chunkFilename: "[id].[name].[chunkhash:8].css"
    }),
    new CleanWebpackPlugin(["dist"])
  ]
};
複製代碼

6.修改package.json

package.json 添加 script 腳本

"scripts": {
    "dev": "webpack-dev-server --open"
  },
複製代碼

7.執行打包命令

npm run dev
複製代碼

運行成功後，會自動打開瀏覽器並顯示 index.html 頁面，修改 css 或 js 代碼後，瀏覽器會自動刷新。

8.源碼地址

demo 代碼地址: github.com/SimpleCodeC…

倉庫代碼地址(及目錄): github.com/SimpleCodeC…