Webpack构建基础配置

通过webpack.config.js文件进行配置项编写

与Vite不同，webpack配置文件只需要暴露一个对象即可，包含entry，output，module，plugin，devServer等

基本配置项

entry

打包后的入口文件

entry: path.join(__dirname, './scr/main.js')

output

配置打包后文件输出的文件夹地址和出口文件名

output: {
    path: path.join(__dirname,'/dist'),
    filename: 'bundle.js'
},

mode

打包环境

mode: 'production'

module

此处配置各种文件loader

loader用来将各种文件翻译成浏览器能够阅读的js css文件

module: {
    rules: []
}

将每个loader配置对象放到rules数组中，rules实际上是一个栈，每次构建都会从最后一个loader开始读取

在loader配置对象中，use[]也是用栈的思想，loader加载器从右向左读取

module: {   
     rules:[ 
         {
             test: /\.css$/, 
             use: ['style-loader','css-loader'] 
         }，
         {
              test: /\.less$/,
              use: ['style-loader','css-loader','less-loader']
          }
     ]
 }
 //读取顺序
 // less-loader css-loader style-loader css-loader style-loader

plugins

plugins是一个数组，与Vite的plugins相似，用来拓展构建工具的功能

plugins:[
    new htmlWebPackPlugin({
        template:path.join(__dirname,'./src/index.html'),
        filename:'index.html'
    })
],

devServer

devServer可以帮助开发者自动打包

host：主机地址，默认值localhost

port：监听的端口

open：是否自动打开浏览器

compress：是否压缩静态资源

proxy：反向代理，与vite相同，通过匹配字符串，进行网络请求地址转发和路径重写

devServer: {
    open:true,
    host: '0.0.0.0',
    port:8888,
    compress:true,
    proxy: {
      '/api': {
        target: 'http://localhost:8888',
         pathRewrite: {
          "^/api": "/test-api"
        },
        secure: false,
        changeOrigin: true, //开启跨域
      }
    }
  }