[英]Error in using 'import' in webpack.config.babel.js
(function (exports, require, module, __filename, __dirname) { import path from 'path'
^^^^^^
SyntaxError: Unexpected token import
This error occurs when I use webpack-dev-server --hot
. 当我使用
webpack-dev-server --hot
时会发生此错误。
It seems like this occurs because it can't read import
or webpack doesn't support import
. 这似乎是因为它无法读取
import
或webpack不支持import
。 I tried to use babel-register
but it doesn't work. 我试图使用
babel-register
但它不起作用。 Is there any way to solve this problem? 有什么方法可以解决这个问题吗? Refer to the code below.
请参阅下面的代码。
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({
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 })
])
}
babel-register
only transforms the modules you require with babel where you call require("babel-register");
babel-register
只能用你需要的babel转换你需要的模块require("babel-register");
, not the module itself. ,而不是模块本身。
You can use an intermediate step to make this work with the Webpack configuration. 您可以使用中间步骤来使用Webpack配置。
require('babel-register');
module.exports = require('./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({
...
Node does not support ES6 import
syntax at the moment. Node目前不支持ES6
import
语法。 Use CommonJS require
syntax in the meanwhile. 同时使用CommonJS
require
语法。
const path = require('path')
const webpack = require('webpack')
const HtmlPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
You have created a webpack.config.js and when tying to execute webpack
you are getting above error. 您已经创建了一个webpack.config.js,并且在绑定执行
webpack
您遇到了上述错误。 Cause your webpack config file need to be babelified
before you can use it, 导致你的WebPack配置文件需要被
babelified
之前,你可以使用它,
1) Rename your webpack.config.js
to webpack.config.babel.js
. 1)将
webpack.config.js
重命名为webpack.config.babel.js
。
2) Now create a new file webpack.config.js
with just the following 2 lines 2)现在使用以下2行创建一个新文件
webpack.config.js
require('babel-register');
module.exports = require('./webpack.config.babel.js');
3) create a .babelrc
file in parallel to your webpack.config.js
file with following content. 3)与
.babelrc
文件并行创建一个.babelrc
文件, webpack.config.js
包含以下内容。 We need to tell babel explicitly what preset to use. 我们需要明确告诉babel使用什么预设。
{
"presets": ["latest",'react', 'es2015','stage-2']
}
4) add following node modules to your dependency ( Required for presets used in .babelrc
) 4)将以下节点模块添加到您的依赖项中(对于
.babelrc
使用的预设是.babelrc
)
npm install babel-preset-env babel-preset-es2015 babel-preset-stage-2 babel-preset-latest babel-preset-react --save-dev
5) You are done . 5)你完成了。 Now if you execute
webpack --progress --colors --watch
it should work. 现在如果你执行
webpack --progress --colors --watch
它应该工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.