webpack 构建同时适用于手机和电脑的调试服务器

Posted 2020-10-24 吃个石头

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‘
          }
        }
      }
    ]
  },
}