webpack5学习笔记-2

1、webpack-dev-server

npm install -D webpack-dev-server
把数据都写在了内存里，而不是硬盘的dist目录

基本配置

package.json

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --mode development",
  "serve": "webpack serve --mode development"
}

webpack-dev-middleware（了解）

这是一个容器，把webpack处理后的文件传递给一个服务器，webpack-dev-server在内部使用了它，也可以进行自定义配置
npm install --save-dev express webpack-dev-middleware
后端node

const express = require('express')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpack = require('webpack')

const app = express()

// 获取配置文件
const config = require('./webpack.config.js')
const compiler = webpack(config)

app.use(webpackDevMiddleware(compiler))

// 开启端口上的服务
app.listen(3000, () => {
  console.log('服务运行在 3000端口上')
})

2、HMR

只对局部发生数据变化的组件进行更新展示，在webpack.config.js中配置devServer，hot属性

module.exports = {
  mode: 'development',
  devtool: false,
  entry: './src/index.js',
  output: {
    filename: 'js/main.js',
    path: path.resolve(__dirname, 'dist')
  },
  target: 'web',
  devServer: {
    hot: true
  }
}

随便写个title文件就可以监听变化热更新

import './title'

if (module.hot) {
  module.hot.accept(['./title.js'], () => {
    console.log('title.js模块更新')
  })
}

react热更新

npm install react-hot-loader
https://github.com/gaearon/react-hot-loader
.babelrc

{
  "plugins": ["react-hot-loader/babel"]
}

App.js

import { hot } from 'react-hot-loader/root';
const App = () => <div>Hello World!</div>;
export default hot(App);

或者
npm i -D @pmmmwh/react-refresh-webpack-plugin react-refresh
webpack配置文件

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')

plugins: [
  new ReactRefreshWebpackPlugin()
]

babel.config.js

module.exports = {
  plugins: [
    ['react-refresh/babel']
  ]
}

Vue热更新（处理vue文件）

vue-loader
webpack里面处理Vue文件的时候就处理了热更新
npm install -D vue-loader vue-template-compiler
或者
npm i vue-loader@14 vue-template-compiler -D
vue3 使用正常版本
vue2 使用16版本之前
如果是vue-cli，不需要额外安装，热更新是开箱即用
14版本的vue-loader不需要写plugin

webpack.config.js

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

3、path

output: {
  filename: 'js/main.js',
  path: path.resolve(__dirname, 'dist'),
  publicPath: '/lg'
},
devServer: {
  hot: true,
  publicPath: '/lg',
  contentBase: path.resolve(__dirname, 'public'),
  watchContentBase: true
}

output中的：这是打包之后的资源输出目录
● publicPath：index.html内部的引用路径，域名+ publicPath + filename
● publicPath如果是’./‘，就变成了相对路径，devServer开启服务不能找到资源，默认情况是空的
● publicPath如果是’/'，就是绝对路径，本地打包的无法找到

devServer中的：
● publicPath: 指定本地服务所在的目录
● contentBase: 我们打包之后的资源如果说依赖其它的资源，此时就告知去哪找
● watchContentBase：监听被依赖的未打包其他资源更改

output和devServer里的publicPath要保持一致，devServer里的设置了之后，访问本地服务器要加上设置的值，localhost:8080/lg
如果output不加，则会访问不到打包出来的js

4、devServer常用配置

devServer: {
  hot: true,
  hotOnly: true,
  port: 4000,
  open: false,
  compress: true,
  historyApiFallback: true
}

hotOnly：修复语法错误等报错后，只更新修改的地方，而不是整体刷新
port：指定端口
open：启动服务时是否打开浏览器
compress：服务端开始gzip 压缩打包的文件
historyApiFallback：history路由模式下，刷新页面路径请求不到页面404，设置为true，页面替换为index.html，也可以传入对象，配置rewrites属性

5、proxy代理

devServer: {
  hot: true,
  proxy: {
    // /api/users
    // http://localhost:4000/api/users
    // https://api.github.com/api/users
    '/api': {
      target: 'https://api.github.com',
      pathRewrite: { "^/api": "" },// http://localhost:8080/api/users -> https://api.github.com/users
      changeOrigin: true//修改host为代理的
    }
  }
}

6、resolve模块解析原则

配置模块如何解析

resolve: {
  extensions: [".js", ".json", '.ts', '.jsx', '.vue'], //导入模块少写后缀名
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

7、source-map

source-map和之前的一样，webpack5没有大改动

8、编译TS

npm i ts-loader -D
webpack配置

{
  test: /\.ts$/,
  use: ['ts-loader']
}

但是无法处理ts里面写es6新的语法，使用babel-loader来处理TS
npm i @babel/preset-typescript -D

{
  test: /\.ts$/,
  use: ['babel-loader']
}

babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: 3
    }],
    ['@babel/preset-typescript']
  ]
}

但是编译时会忽略一些ts语法错误
所以可以在packag.json里新增编译命令，确定没问题了再打包

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "npm run ck && webpack",
  "serve": "webpack serve",
  "ck": "tsc --noEmit"
}