在 webpack.config.babel.js 中使用“导入”时出错

Posted 2023-02-22

【中文标题】在 webpack.config.babel.js 中使用“导入”时出错

【英文标题】：Error in using 'import' in webpack.config.babel.js

【发布时间】：2017-08-27 03:27:39

【问题描述】：

(function (exports, require, module, __filename, __dirname)  import path from 'path'
                                                              ^^^^^^
SyntaxError: Unexpected token import

当我使用webpack-dev-server --hot时出现此错误。

这似乎是因为它无法读取 import 或 webpack 不支持 import。我尝试使用babel-register，但它不起作用。有没有办法解决这个问题？请参阅下面的代码。

webpack.config.babel.js

import path from 'path'
import webpack from 'webpack'
import htmlPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

const vueLoaders = 
  html: 'pug-loader',
  css: ExtractTextPlugin.extract(
    use: 'css-loader',
    fallback: 'vue-style-loader'
  ),
  scss: 'vue-style-loader!css-loader!sass-loader',
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'


export default 
  entry: './client/main.js',
  output: 
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  ,

  plugins: [
    new ExtractTextPlugin('bundle.css'),
    new HtmlPlugin(
      title: 'sex',
      template: 'client/assets/index.pug'
    )
  ],

  module: 
    rules: [
      
        test: /\.css$/,
        use: ExtractTextPlugin.extract(
          use: 'css-loader', fallback: 'style-loader'
        )
      , 
        test: /\.s[a|c]ss$/,
        use: ExtractTextPlugin.extract(
          use: ['css-loader', 'sass-loader'], fallback: 'style-loader'
        )
      , 
        test: /\.pug$/,
        loader: 'pug-loader'
      , 
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      , 
        test: /\.vue$/,
        loader: 'vue-loader',
        options:  loaders: vueLoaders 
      , 
        test: /\.(png|jpe?g|gif|svg|ttf|woff2?|eot)$/,
        loader: 'file-loader',
        options:  name: '[name].[ext]?[hash]' 
      
    ]
  ,

  resolve: 
    alias: 
      'vue$': 'vue/dist/vue.common.js'
    
  ,

  devServer: 
    host: '0.0.0.0',
    historyApiFallback: true
  ,
  performance: 
    hints: false
  ,
  devtool: '#eval-source-map'


if (process.env.NODE_ENV === 'production') 
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin(
      'process.env':  NODE_ENV: '"production"' 
    ),
    new webpack.optimize.UglifyJsPlugin(
      sourceMap: true,
      compress:  warnings: false 
    ),
    new webpack.LoaderOptionsPlugin( minimize: true )
  ])

【参考方案1】：

babel-register 仅使用 babel 转换您需要的模块，您调用 require("babel-register");，而不是模块本身。

您可以使用中间步骤来使用 Webpack 配置。

webpack.config.js

require('babel-register');
module.exports = require('./webpack.config.babel.js');

webpack.config.babel.js

import path from 'path'
import webpack from 'webpack'
import HtmlPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

const vueLoaders = 
  html: 'pug-loader',
  css: ExtractTextPlugin.extract(
  ...

【参考方案2】：

Node 目前不支持 ES6 import 语法。同时使用 CommonJS require 语法。

const path = require('path')
const webpack = require('webpack')
const HtmlPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

【参考方案3】：

您已经创建了一个 webpack.config.js 并且在绑定执行webpack 时遇到了上述错误。因为你的 webpack 配置文件需要 babelified 才能使用它，

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

2) 现在创建一个新文件 webpack.config.js，仅包含以下 2 行

require('babel-register');
module.exports = require('./webpack.config.babel.js');

3) 与您的webpack.config.js 文件并行创建一个.babelrc 文件，其中包含以下内容。我们需要明确告诉 babel 使用什么预设。

  "presets": ["latest",'react', 'es2015','stage-2']

4) 将以下节点模块添加到您的依赖项（.babelrc 中使用的预设需要）

npm install babel-preset-env babel-preset-es2015 babel-preset-stage-2 babel-preset-latest babel-preset-react --save-dev

5) 你完成了。现在如果你执行webpack --progress --colors --watch 它应该可以工作。