相关疑难解决方法(0)

我对Webpack很新.我想我做错了.我想使用babel将ES6功能转换为ES5功能.所以我做了一些研究,发现了babel-loader.但是,我不确定我在做什么.

我运行了npm install babel-loader --save-dev,它被添加到我的package.json中

// package.json

{
  "name": "kanban",
  "version": "1.0.0",
  "description": "kanban",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "html-webpack-plugin": "^1.7.0",
    "json-loader": "^0.5.4",
    "webpack": "^1.12.9"
  }
}

// webpack.config.js

var path = require('path');
var HtmlwebpackPlugin =  require('html-webpack-plugin');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};

module.exports = {
  entry: PATHS.app,
  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },
  plugins: …

我在使用“dependOn”条目参数时无法让 Webpack 5 输出 es5 兼容代码。

我使用 Babel 来转译我的代码，效果很好，但除非我将 webpack 目标设置为“es5”，否则 webpack 本身会输出不兼容的代码。

我正在使用入口参数“dependOn”，它的行为与目标：“web”的预期一致，但是一旦我将其更改为“es5”，我就会收到“来自 Terser 的 main.build.js 中的错误”和“意外的令牌” : punc(:) [main.build.js:3,9]”。

删除“dependOn”参数允许其编译，但随后我将供应商库添加到每个条目中。

这是重现该问题的最小 webpack 配置（注释掉 target: "es5" 或 dependentOn: "vendor" 修复它）：

const path = require('path');

module.exports = {
    mode: "production",
    target: "es5",

    entry: {
        vendor: "./src/test.js",
        main: {
            dependOn: "vendor",
            import: ['./src/main.js']
        }
    },
    output: {
        filename: '[name].build.js',
        path: path.resolve(__dirname, 'dist')
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
}; …