Question

使用Webpack我得到名为app.js的输出文件。 app.js文件在计算机和移动设备上运行良好。但在安卓版本低于5 app.js的手机根本不工作。甚至app.js中的Bootstrap js文件也无法正常工作。有一些es6代码所以我将它们转换为es5以在所有设备上工作。我想知道问题是什么？

这是我的webpack配置：

var path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');


module.exports = {
   mode: 'production',
   entry: {
      app: [
         './resources/js/index.js'
      ]
   },

   output: {
      path: path.resolve(__dirname, 'app/assets/js'),
      filename: 'app.js'
   },

   module: {
      rules: [
         {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
               loader: "babel-loader?presets[]=es2015"
            }
         },
         {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
               fallback: 'style-loader',
               use: [
                  {
                     loader: 'css-loader'
                  }, 
                  {
                     loader: 'postcss-loader',  
                     options: {
                        plugins: [
                           autoprefixer({
                              browsers:['ie >= 8', 'last 4 version']
                           })
                        ],
                        sourceMap: true
                     }
                  },
                  {
                     loader: 'sass-loader'
                  }
               ]
            })
         }
      ]
   },


   plugins: [
      new ExtractTextPlugin({ filename: '../css/main.css' }),
      new webpack.ProvidePlugin({ 
         $: 'jquery',
         jQuery: 'jquery',
         'window.jQuery': 'jquery',
         Popper: 'popper.js',
         WOW: 'wow.js'
      })
   ],

};

Answer 1

webpack实际上是一个构建工具。可以做的是，您在ES6中编写的代码被转换为ES5，这是大多数浏览器理解的方式。您需要检查的一件事就是检查是否已经放置了与旧浏览器不兼容的任何JavaScript代码。因为您可以看到桌面上的更改意味着您的捆绑是正确的，但存在一些兼容性问题。

Webpack app.js无法在移动设备上运行

1 个答案: