開發(fā)服務器&自動化

每次寫完代碼都需要手動輸入指令才能編譯代碼，太麻煩了，我們希望一切自動化，即修改代碼后服務器瀏覽器自動刷新。

1. 下載包

npm i webpack-dev-server -D

2. 配置

• webpack.config.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 將 js 文件輸出到 static/js 目錄中
    clean: true, // 自動將上次打包目錄資源清空
  },
  module: {
    rules: [
      {
        // 用來匹配 .css 結尾的文件
        test: /.css$/,
        // use 數(shù)組里面 Loader 執(zhí)行順序是從右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的圖片會被base64處理
          },
        },
        generator: {
          // 將圖片文件輸出到 static/imgs 目錄中
          // 將圖片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件擴展名
          // [query]: 添加之前的query參數(shù)
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /.js$/,
        exclude: /node_modules/, // 排除node_modules代碼不編譯
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定檢查文件的根目錄
      context: path.resolve(__dirname, "src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 為模板創(chuàng)建文件
      // 新的html文件有兩個特點：1. 內(nèi)容和源文件一致 2. 自動引入打包生成的js等資源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  // 開發(fā)服務器
  devServer: {
    host: "localhost", // 啟動服務器域名
    port: "3000", // 啟動服務器端口號
    open: true, // 是否自動打開瀏覽器
  },
  mode: "development",
};

3. 運行指令

npx webpack serve

注意運行指令發(fā)生了變化

并且當你使用開發(fā)服務器時，所有代碼都會在內(nèi)存中編譯打包，并不會輸出到 dist 目錄下。

開發(fā)時我們只關心代碼能運行，有效果即可，至于代碼被編譯成什么樣子，我們并不需要知道。文章來源地址http://www.zghlxwxcb.cn/news/detail-831269.html

到了這里，關于【W(wǎng)ebpack】自動執(zhí)行開發(fā)服務器 devServer的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！