webpack04服务器配置

webpack配置

• entry
• output
  • filename
  • path
  • publicPath 。。 打包引入的基本路径，，，比如引入一个bundle.js,。引用之后的路径就是 publicPath+filename
    -devServer:
  • static : 静态文件的位置。。。
  • host
  • port
  • open
  • compress : 静态资源是否用gzip压缩
  • historyApiFallback: 服务器刷新页面会404，，因为如果是react，或者vue路由导过去的页面，，直接拉去服务器是没有的，会404，设置为true，会将所有404页面请求重定向到index.html
  • proxy ： 设置代理
    • changeOrigin ：改变请求来源，，
    • target
    • pathRewrite

# 使用webpack serve启动服务器"dependencies": {"axios": "^1.7.9","html-webpack-plugin": "^5.6.3","webpack": "^5.97.1","webpack-cli": "^6.0.1","webpack-dev-server": "^5.2.0"},

const HtmlWebpackPlugin = require("html-webpack-plugin")const path = require("path");
module.exports={mode:"development",devtool: "source-map",entry: "./src/index.js",output:{path:path.resolve(__dirname,"./dist"),filename:"bundle.js",publicPath:"/"},devServer:{static:["public",{directory: path.resolve(__dirname,"./abc"),watch:true}],// 静态文件的位置host:"0.0.0.0",// ，局域网可以通过ip访问  ==》 localhost会被解析成127.0.0.1，回环地址：主机自己发出去的包，直接被自己接收port:9000,open:true,compress:true, // 是否为静态文件开启gzipproxy:[{context:["/api"],target:"http://localhost:8080/",pathRewrite:{"^/api":""},changeOrigin:true}],historyApiFallback:true},plugins:[new HtmlWebpackPlugin({template:"./index.html"})]
}

webpack自动编译

webpack开启监听自动编译：

• 命令行执行 npx webpack --watch
• 在webpack.config.js中设置watch:true

但是这样只会监听到源码变化后，自动编译代码，，，浏览器不会自动刷新，，

webpack提供了一个 webpack-dev-server，，可以在监听到文件变化后，自动刷新浏览器

---

webpack编译react和vue

编译react

npm i babel-loader @babel/preset-env  @babel/preset-react

import React, {Component} from "react";
import ReactDOM from "react-dom/client"class App extends Component{constructor() {super();this.state = {message:"hello react"}}render() {return (<h3>{this.state.message}</h3>)}
}export default App

import App from "./App.jsx";const  sum = (a,b)=>{return a+b;
}console.log("123")
//
// import LogoImg from "../abc/logo.jpg"
import axios from "axios";axios.post("/api/users/login").then(res=>{console.log(res,"res")
})import ReactApp from "./App.jsx"import React from "react";
import ReactDOM from "react-dom/client";var root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(<App/>)

    module:{rules:[{test:/\.jsx?$/,exclude:/node_modules/,use:{loader:"babel-loader",options:{presets: [["@babel/preset-env"],["@babel/preset-react"]]}}}]},

webpack编译vue3

npm i vue vue-loader vue-complete-compiler

<template><div class="container">{{ message }}</div>
</template><script setup>import {ref} from "vue";const message = ref("hello vue")
</script><style>
.container{color: red;
}
</style>

主函数引入vue

import Vue, {createApp} from "vue"
import VueApp from "./app.vue"var app = createApp(VueApp);
app.mount("#root")

webpack中配置编译vue：
编译vue需要使用一个插件VueLoaderPlugin

const HtmlWebpackPlugin = require("html-webpack-plugin")// vue文件的加载，，还用到一个插件
// const VueLoaderPlugin = require("vue-loader/lib/plugin")
const {VueLoaderPlugin} = require("vue-loader")const path = require("path");
module.exports={mode:"development",devtool: "source-map",entry: "./src/index.js",output:{path:path.resolve(__dirname,"./dist"),filename:"bundle.js",publicPath:"/"},module:{rules:[{test:/\.jsx?$/i,exclude:/node_modules/,use:{loader:"babel-loader",options:{presets: [["@babel/preset-env"],["@babel/preset-react"]]}}},{test:/\.css$/i,use:["style-loader","css-loader"]},{test: /\.vue$/i,use:["vue-loader"]}]},devServer:{static:["public",{directory: path.resolve(__dirname,"./abc"),watch:true}],// 静态文件的位置host:"0.0.0.0",// ，局域网可以通过ip访问  ==》 localhost会被解析成127.0.0.1，回环地址：主机自己发出去的包，直接被自己接收port:9000,open:true,compress:true, // 是否为静态文件开启gzipproxy:[{context:["/api"],target:"http://localhost:8080/",pathRewrite:{"^/api":""},changeOrigin:true}],historyApiFallback:true},plugins:[new HtmlWebpackPlugin({template:"./index.html"}),new VueLoaderPlugin()]
}

webpackDevMiddleware

webpack-dev-server默认开启的是 express的服务，，如果我不想使用express，，而想使用其他的，比如koa，可以使用webpack-dev-middleware去定制服务器，，，

通过webpack的配置信息，将源代码打包成 一个中间件，，让服务器引用进去

npm i express webpack-dev-middleware

const express = require("express")
// 引入webpack，编译后面的文件
const webpack = require("webpack")
const webpackDevMiddleware = require("webpack-dev-middleware")const app = express()// 加载配置文件 ,,, webpack对这个信息进行编译
const config = require("../webpack.config")
const compiler = webpack(config)// 将编译之后的对象，，通过这个webpackDevMiddleware这个中间件去处理  变成express可以使用的中间件
var middleware = webpackDevMiddleware(compiler);// 使用这个中间件      =====>  webpack会根据配置，将源代码进行编译，编译完成之后放入express中间件中，，
app.use(middleware)app.listen(3000,()=>{console.log("服务器已经开启在3000端口。。。。")
})

webpack的resolve属性

resolve常用的属性：

• extensions ： 扩展名解析，这里写了之后，源文件就不用写后缀名
• mainFiles : 如果引入的是文件夹，，他会找这个文件夹下面指定名字的文件，，然后去拼接上extensions给出的后缀，进行解析
• alias: 别名

    resolve:{extensions:[".jsx",".js",".vue"],mainFiles:["index","main"],alias:{"@":path.resolve(__dirname,"./src")}},

gitee:https://gitee.com/water-kid/learn-webpack/tree/main/webpack04