Here is my webpack config:
import webpack from 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
export default {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /.js$/,
use: [
{
loader:'babel-loader',
options: { presets: ['es2015'] }
}
],
exclude: /node_modules/
},
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: 'app/index.html'})
]
}
and here is package.json:
{
"name": "gitbattle",
"version": "0.0.1",
"description": "React App Github Battle",
"main": "app.js",
"scripts": {
"create" :"webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "github.com/JayBee007/github_battle.git"
},
"keywords": [
"react",
"github",
"battle",
"webpack",
"babel"
],
"author": "Javed",
"license": "MIT",
"bugs": { "url": "github.com/JayBee007/github_battle/issues" },
"homepage": "github.com/JayBee007/github_battle",
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.1",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.17.0",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
}
}
Whenever I run npm run create it is unable to find import token. Everything works when I use ES5!
Gabor
developer
The problem is you are using ES6 syntax within your
webpack.config.jsfile. For the config file you should only use ES5 because it will be executed by NodeJS which does not yet supportimport/exportsyntax.Webpack doesn't transpile (via
babel-loader) the config file; only the./app/index.jsentry point, as specified in the config fileP.S.: If you would also like to use ES6 in webpack files, you can use
babel-register.