当前位置：首页 > backend >正文

webpack其余配置

backend 2025/6/25 11:21:23

webpack搭建本地服务器

首先是要安装一个webpack-dev-server

 npm install webpack-dev-server -D

安装后在package.json中添加：

{"name": "babel_core_demo","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","ts-check": "tsc --noEmit","ts-check-watch": "tsc --noEmit --watch","serve": "webpack serve"},"author": "","license": "ISC","description": "","devDependencies": {"@babel/cli": "^7.27.2","@babel/core": "^7.27.4","@babel/plugin-transform-block-scoping": "^7.27.5","@babel/preset-env": "^7.27.2","@babel/preset-react": "^7.27.1","babel-loader": "^10.0.0","html-webpack-plugin": "^5.6.3","ts-loader": "^9.5.2","webpack": "^5.99.9","webpack-cli": "^6.0.1","webpack-dev-server": "^5.2.2"},"dependencies": {"@babel/preset-typescript": "^7.27.1"}
}

然后在终端中运行npm run serve就可以开启本地服务器了

webpack-dev-server使用了一个库叫memfs（memory-fs webpack自己写的）

它在编译之后不会写入到任何的输出文件，而是将bundle文件保存在内存中

进行配置：

const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, './build'),filename: 'bundle.js',clean: true},resolve: {extensions: ['.js', '.jsx', '.ts']},module: {rules: [{test: /\.jsx?$/,use: {loader: 'babel-loader',options: {presets: [["@babel/preset-env", { targets: ">5%" }],"@babel/preset-react"]}}},{test: /\.ts$/,use: 'babel-loader'}]},plugins: [new HtmlwebpackPlugin({template: './index.html',filename: 'index.html' })],devServer: {static: {directory: path.resolve(__dirname, './build')},open: true,port: 8080,historyApiFallback: true}
}

devServer的static

devServer中的static 对于我们的直接访问打包后的资源并没有太大的作用，它的主要作用是如果我们打包后的资源又依赖于其他的一些资源，那么就需要指定从哪里来查找这个内容

打包之后浏览器无法通过相对路径找到文件夹，所以我们需要设置static

const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, './build'),filename: 'bundle.js',clean: true},resolve: {extensions: ['.js', '.jsx', '.ts']},module: {rules: [{test: /\.jsx?$/,use: {loader: 'babel-loader',options: {presets: [["@babel/preset-env", { targets: ">5%" }],"@babel/preset-react"]}}},{test: /\.ts$/,use: 'babel-loader'}]},plugins: [new HtmlwebpackPlugin({template: './index.html',filename: 'index.html' // 或保持 'end.html' 但记得改访问地址})],devServer: {static: [path.resolve(__dirname, './public'),path.resolve(__dirname, './build')],open: true,port: 8080,historyApiFallback: true}
}

hotOnly、host配置

hotOnly是当代码编译失败时是否刷新整个页面

默认情况下当代码编译失败修复之后我们会重新刷新整个页面

如果不希望重新刷新整个页面，那可以设置hotOnly为true（现在被删了）

host可以设置主机地址，默认是localhost，如果希望其他地方也可以访问那可以设置0.0.0.0

这俩玩意的区别：

open是是否打开浏览器，默认值是false，设置为true会打开浏览器

也可以设置为类似于google chorme等值

compress是否为静态文件开启gzip compression（在开发服务器中，所有通过 HTTP 返回的静态资源（如 .js、.css 等），会开启 gzip 压缩传输。

gzip 是一种压缩格式，它可以减小传输文件的大小，加快加载速度）

默认值是false，也可以设置为true

proxy代理配置

解决跨域问题可以：

静态资源和服务器部署在一起

服务器中开启cors

node本地服务

Nginx

还可以配置代理：

const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, './build'),filename: 'bundle.js',clean: true},resolve: {extensions: ['.js', '.jsx', '.ts']},module: {rules: [{test: /\.jsx?$/,use: {loader: 'babel-loader',options: {presets: [["@babel/preset-env", { targets: ">5%" }],"@babel/preset-react"]}}},{test: /\.ts$/,use: 'babel-loader'}]},plugins: [new HtmlwebpackPlugin({template: './index.html',filename: 'index.html' // 或保持 'end.html' 但记得改访问地址})],devServer: {static: [path.resolve(__dirname, './public'),path.resolve(__dirname, './build')],open: true,port: 8080,historyApiFallback: true,proxy:{'/api':{target:'http://localhost:9000',pathRewrite:{'^/api':''},}}}
}

这个跨域问题解决了是因为配置了代理之后静态资源和API指向同一个服务器了

const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, './build'),filename: 'bundle.js',clean: true},resolve: {extensions: ['.js', '.jsx', '.ts']},module: {rules: [{test: /\.jsx?$/,use: {loader: 'babel-loader',options: {presets: [["@babel/preset-env", { targets: ">5%" }],"@babel/preset-react"]}}},{test: /\.ts$/,use: 'babel-loader'}]},plugins: [new HtmlwebpackPlugin({template: './index.html',filename: 'index.html' // 或保持 'end.html' 但记得改访问地址})],devServer: {static: [path.resolve(__dirname, './public'),path.resolve(__dirname, './build')],open: true,port: 8080,historyApiFallback: true,proxy:{'/api':{target:'http://localhost:9000',pathRewrite:{'^/api':''},},changeOrigin:true,}}
}

这个changeOrigin就是帮助我们骗过服务器的校验的，帮我们改了东西