Question

尝试将webpack运行到我的JS文件夹中时，我收到此错误

$ node_modules/.bin/webpack --config webpack.js 
/Users/xxx/Documents/js/webpack.js:1
(function (exports, require, module, __filename, __dirname) { import config from './'
                                                          ^^^^^^
SyntaxError: Unexpected token import
at new Script (vm.js:51:7) ...

我的.babelrc文件包含：

{
  "presets": ["env"]
}

webpack.cofig.js主要内容是：

import config from './'
import path from 'path'
import deepMergeWithArray from '../lib/deepMergeWithArray.js'
import webpack from 'webpack'
import WebpackNotifierPlugin from 'webpack-notifier'
import ProgressBarPlugin from 'progress-bar-webpack-plugin'

export default function() {
...
let __defaults = {
    debug: false,
    watch: false,
    devtool: false,
    context: devJS,
    entry: {},

    output: {
        filename: '[name].js',
        chunkFilename: chunks,
        path: distJS
    },
    module: {
        rules: [
            {
              test: /\.(js|jsx)$/,
              exclude: /(node_modules|bower_components)/,
              use: {
                loader: 'babel-loader',
                options: {  // << add options with presets env
                  presets: ['env']
                }
              }
            }
          ],
         ...
        ]
    },

    plugins: [
        new ProgressBarPlugin(),
        new WebpackNotifierPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(true),
        new webpack.ProvidePlugin(providePluginDefaults),

        new webpack.DefinePlugin({
            DEBUG: config.options.debug,
            STAGE: env === 'development' ? 'dev' : 'dist'
        }),

        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        )
    ]
}
__defaults.entry[filename] = './main.js'
__defaults.entry[vendor] = [
    'jquery',
    'lodash',
    'mediator-js',
    'fastclick',
    'skrollr',
    'is_js',
    'jquery-validation',
    'babel-polyfill'
]

if(env === 'development') {
    __defaults.devtool = 'source-map';
    __defaults.debug = true;
}

if(env === 'distribution') {
    __defaults.plugins.push(
        new webpack.optimize.CommonsChunkPlugin({
            name: vendor,
            minChunks: Infinity
        }),
        //new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 20 }),
        new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000}),
        new webpack.optimize.AggressiveMergingPlugin({
            minSizeReduce: 1.5,
            moveToParents: true
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: false,
            compress: {
                warnings: false,
                sequences: true,
                dead_code: true,
                conditionals: true,
                booleans: true,
                unused: true,
                if_return: true,
                join_vars: true,
                drop_console: true
            },
            mangle: {
                except: ['$super', '$', 'exports', 'require']
            },
            output: {
                comments: false
            }
        })
    )
}

let __project = {

    resolve: {
        alias: {
            validate           : 'jquery-validation',
            'validate-methods' : 'jquery-validation/dist/additional-methods.js',
            'jquery-easing'    : 'jquery.easing/jquery.easing.min.js',
            datepicker         : 'jquery-ui/datepicker.js',
            tooltipster        : 'tooltipster/js/jquery.tooltipster.js',
            lazyloadxt         : 'lazyloadxt/dist/jquery.lazyloadxt.extra.js',
            modernizr          : 'modernizr/modernizr.js',
            'jquery-base'      : 'jquery/dist/jquery.js',
            'handlebars'       : require.resolve('handlebars/runtime')
        }
    },

    module: {
        noParse: [
            /[\\\/]i18next[\\\/]bin[\\\/]index\.js$/,
            /[\\\/]i18next-xhr-backend[\\\/]bin[\\\/]index\.js$/
        ],
        loaders: [
            {
                test: require.resolve("jquery"),
                loader: 'expose?jQuery'
            },
            {
                test: /(flickity|flickity-imagesloaded)/,
                loader: 'imports?define=>false&this=>window'
            },
            {
                test: /[\\\/]lazyloadxt[\\\/]dist[\\\/]jquery.lazyloadxt\.js$/,
                loader: 'exports?jQuery.fn.lazyLoadXT'
            },
            {
                test: /[\\\/]bower_components[\\\/]tooltipster[\\\/]js[\\\/]jquery.tooltipster\.js$/,
                loader: 'exports?jQuery.fn.tooltipster'
            },
            {
                test: /[\\\/]bower_components[\\\/]modernizr[\\\/]modernizr\.js$/,
                loader: "imports?this=>window!exports?window.Modernizr"
            },
            {
                test: /isotope\-|fizzy\-ui\-utils|desandro\-|masonry|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
                loader: 'imports?define=>false&this=>window'
            },
            {
                test: /\.json$/,
                exclude: /node_modules/,
                loader: 'json-loader'
            }
        ]
    },

    plugins: [
        //new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
        new webpack.ProvidePlugin(Object.assign(providePluginDefaults, {
            'moment'        : 'moment',
            i18n            : 'i18next',
            'window.i18n'   : 'i18next'
        }))
    ]
}

return deepMergeWithArray(__defaults, __project)

}

我对这些技术完全是新手。我只是想使用该脚本和源JS代码生成几个缩小的JS文件，但我还没有。

我使用的版本是下一个：

$ node -v
v9.10.1
$ npm -v
5.6.0
$ ./node_modules/.bin/webpack -v
4.5.0

非常感谢任何帮助。

Answer 1

确保您已安装babel-cli和babel-preset-env。

将您的webpack.config.js重命名为webpack.config.babel.js

再次尝试运行webpack。 npx webpack --config ./webpack.config.babel.js

Answer 2

尝试使用此

更新.babelrc代码

{
 "presets": [
    ["env", {"modules": false}],
    "stage-0",
    "react"
  ]
}

无法运行webpack + ES6

2 个答案: