webpack其余配置

webpack搭建本地服务器

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

javascript 复制代码
 npm install webpack-dev-server -D

安装后在package.json中添加:

javascript 复制代码
{
  "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文件保存在内存中

进行配置:

javascript 复制代码
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

javascript 复制代码
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

还可以配置代理:

javascript 复制代码
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指向同一个服务器了

javascript 复制代码
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就是帮助我们骗过服务器的校验的,帮我们改了东西

historyApiFallback

这是一个比较常见的属性,作用是解决SPA页面在路由跳转之后进行页面刷新时返回404的错误

像Vite什么的都是直接把这个配置为true的

webpack性能优化

相关推荐
zwjapple5 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem8 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊8 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术8 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing8 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止9 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall9 小时前
npm install安装的node_modules是什么
前端·npm·node.js
会飞的鱼先生9 小时前
Node.js-http模块
网络协议·http·node.js
烛阴9 小时前
简单入门Python装饰器
前端·python