webpack定制化 高级配置[热更新、热打包、别名、调试]

前提：
webpack5及其对应配套内容
node16.13.2

本文作用在webpack.config.js

webpack定制化 基础配置[基础、配置、初运行]

一、高级配置

1.webpack-dev-server

解释：功能有热更新(把内容先打包到内存，速度快，但不会写到本地文件)，这里还会额外介绍如何实时打包到文件而不是内容

安装：npm i webpack-dev-server -D #本文版本4.10.1其需要与webpack版本相匹配对应

注意：需要提前安装html-webpack-plugin插件，当热更新打包开始后，默认打开public文件夹（这里面需要放着模板[html-webpack-plugin来这里调用]）

成功标志：开发者工作里面打印出[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.表示启动热更新服务器成功

• 热更新：
  BUG说明：①在pageage.json里面output路径要保持默认或path: path.resolve(__dirname, './dist')，不然就会无法运行服务器热更新；②webpack默认支持打包img的时候不要设置路径使用默认的，不然会出错；③插件MiniCssExtractPlugin不能用于热更新需要style-loader
  webpack.config.js

  
  module.exports = {
      // 其他省略....
    
      // 配置 webpack-dev-server的选项
      devServer: {
          host: '127.0.0.1',  // 配置启动ip地址
          port: 5002,  // 配置端口
          open: false// 配置是否自动打开浏览器
          // static:'./public' //可以更改服务器打开的文件（需要是上面提到插件打开的路径）
      }
  }
  

  package.json

  // scripts里面加入下面的第二行“start”这个
    "scripts": {
      "start": "webpack serve"
    },
  

• 实时打包到文件：
  解释：其可以在文件修改后，实时打包修改到文件而不是写入内存，这种模式很适合前后端半分离开发。如一个html一部分需要后端模板，一部分需要vue。这样的方式及其方便测试。
  配置：

  package.json

  // scripts里面加入下面的第二行“watch”这个
    "scripts": {
      "watch": "webpack --watch"
    },
  

2.起别名

解释：有时文件路径层次多深很多，引用起来会看起来很麻烦，如../../../public

配置：

const path = require('path')
module.exports = {
  // 之前的配置
  resolve: {
    // 路径别名
    alias: {
      '@': path.resolve('./src'),
	  '@co':path.resolve(__dirname,'src/components')
    },
    // 引入文件时省略后缀
    extensions: ['.js', '.ts', '.less', '.vue'],
  },
}

使用：import '@/css/loser.css'

3.source-map

解释：众所周知，前端项目可以在开发者工具当中源代码进行调试，但是webpack使用的js经过压缩转换，难以打包调试，这时就需要该内容

• eval-cheap-module-source-map
  解释：能具体定位到源码位置和源码展示，适合开发模式，体积较小

  配置：

  // 与input、output同级
  devtool: 'eval-cheap-module-source-map',
  

• nosources-source-map
  解释：只能定位源码位置，不能源码展示，体积较小，适合生产模式
  配置：

  // 与input、output同级
  devtool: 'nosources-source-map',
  

结语：请把本系列都看完再投入开发环境，优化配置很重要

这篇好文章是转载于：学新通技术网