Vue3+TS Day09 - webpack-dev-serv

一、webpack 搭建本地服务器

1、为什么 webpack 要搭建本地服务器？

• 目前我们开发代码，为了运行需要有两个操作：
• 【操作一】npm run build，编译相关的代码；
• 【操作二】通过live server 或者直接通过浏览器，打开 index.html 代码，查看效果；
• 这个过程经常操作会影响我们的开发效率，我们希望可以做到，当【文件发生变化】时，可以【自动完成编译和展示】

image.png

2、要监听代码的改变，并且自动打包方式一【watch 模式】

image.png

3、要监听代码的改变，并且自动打包且刷新浏览器【方式二】

• webpack-dev-server

image.png

4、什么是 webpack-dev-server 里面的 HMR？Vue 怎么支持 HMR 的？

image.png image.png image.png

5、HMR 的原理？

image.png image.png

6、webpack-dev-server 的一些其他配置项？借助哪个属性可以解决跨域问题？

image.png image.png image.png image.png

二、webpack 的 resolve 模块

1、我们 import 或者 require 的时候，为什么下面写法都能找到对应的文件？

import axios from "axios";
import { sum } from "@/js/math";
const {priceFormat} = require("./js/format.js");

• 这是因为有内置 webpack 的 【enhanced-resolve】模块帮忙处理路径问题

image.png image.png

2、关于【enhanced-resolve】一些比较常用的配置？

image.png

三、webpack 的 webpack.config.js 文件分离

1、在 webpack.config.js 文件 中，有些配置是【开发环境】的，有些配置是【生产环境】的如何进行分离？

• 安装 npm install webpack-merge -D
• 抽取开发环境的配置到 【./config/webpack.dev.config.js】
• 抽取生产环境的配置到 【./config/webpack.prod.config.js】
• 抽取公共的配置到 【./config/webpack.comm.config.js】
• 在 package.json 文件中配置 script

  "scripts": {
    "build": "webpack --config ./config/webpack.prod.config.js",
    "serve": "webpack serve --config ./config/webpack.dev.config.js"
  },

• 抽取公共的配置到 【./config/webpack.comm.config.js】

const path = require('path');

// plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack')
const { VueLoaderPlugin } = require('vue-loader/dist/index');

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js",
    // assetModuleFilename: "img/[name]_[hash:6][ext]"
  },
  resolve: {
    extensions: [".js", ".json", ".mjs", ".vue", "ts"],
    alias: {
      "@": path.resolve(__dirname, "../src")
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
      }, {
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name]_[hash:6][ext]"
        }
      }, {
        rules: [
          {
            test: /\.m?js$/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
      }, {
        test: /\.vue$/,
        loader: "vue-loader"
      }
      // {
      //   test: /\.(jpe?g|png|gif|svg)$/,
      //   use: {
      //     loader: "url-loader",
      //     options: {
      //       // outputPath: "img",
      //       name: "img/[name]_[hash:6].[ext]",
      //       limit: 10 * 1024
      //     }
      //   }
      // }
      // {
      //   test: /\.(eot|ttf|woff2?)$/,
      //   use: {
      //     loader: "file-loader",
      //     options: {
      //       // outputPath: "font",
      //       name: "font/[name]_[hash:6].[ext]"
      //     }
      //   }
      // }
    ]
  },
  plugins: [

    new HtmlWebpackPlugin({
      title: "webpack 案例",
      template: "./public/index.html"
    }),
    new DefinePlugin({
      BASE_URL: "'./'",
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false
    }),
    new VueLoaderPlugin()
  ]
}

• 抽取开发环境的配置到 【./config/webpack.dev.config.js】

const { merge } = require('webpack-merge');

const commonConfig = require('./webpack.comm.config');

module.exports = merge(commonConfig, {
    // 设置模式
    // development 开发阶段，会设置 development
    // production 准备打包上线的时候，设置 production
    mode: "development",

    // 设置 source-map，建立 js 映射文件，方便调试代码和错误
    devtool: "source-map",
    devServer: {
        hot: true,
        proxy: {
            "/cip": {
                target: "https://www.cip.cc/",
                pathRewrite: {
                    "^/cip": ""
                },
                secure: false,
                changeOrigin: true
            }
        }
    }
})

• 抽取生产环境的配置到 【./config/webpack.prod.config.js】

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { merge } = require('webpack-merge');

const commonConfig = require('./webpack.comm.config');

module.exports = merge(commonConfig, {
    mode: "production",
    plugins: [
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: "public",
                    globOptions: {
                        ignore: [
                            '**/.DS_Store',
                            '**/index.html'
                        ]
                    }
                }
            ]
        }),
    ]
})