webpack其余配置

news2025/6/9 14:39:10

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就是帮助我们骗过服务器的校验的，帮我们改了东西