webpack 構建同時適用於手機和電腦的調試伺服器

標籤：his   mob   plugins   hash   server   ble   模板   src   電腦   

plugins

  plugins: [    new HtmlWebpackPlugin({ // 使用模板同時產生 pc.html和mobile.html      title: ‘pc‘,      filename: ‘pc.html‘,      hash: true,      template: path.resolve(__dirname, ‘../src/template.html‘),      chunks: [‘pc‘] // 只注入pc.js    }),    new HtmlWebpackPlugin({       title: ‘mobile‘,      hash: true,      filename: ‘mobile.html‘,       template: path.resolve(__dirname, ‘../src/template.html‘),      chunks: [‘mobile‘] // 只注入mobile.js    }),  ]

 webpack-dev-server

devServer: {    historyApiFallback: {      rewrites: [      {        from: /.*/, // 讓request url 重寫，這兒預設是請求html檔案會運行to方法。        to(ctx) {          if (isMoble(ctx.request.get(‘user-agent‘))) { // 擷取請求客服端資訊，如果是mobile,重新導向到mobile.html。            console.log(‘mobile‘)            return ‘/mobile.html‘ // 若為手機端，地址改為mobile.html          } else {            console.log(‘pc‘) // 若為pc端，地址改為pc.html            return ‘/pc.html‘          }        }      }    ]  },}

 

webpack 構建同時適用於手機和電腦的調試伺服器