3
ここでは、私は仮想bundle.jsを生成するために使用しています私のwebpack.config.jsコードです: -私はエラー「予期しないトークンのインポート」を取得し、私のコードでecma6インポートを使用することはできませんよ
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool :'inline-source-map', //this give us the line no. incase of error
entry:[
'webpack-dev-server/client?http://localhost:8080/',
'webpack/hot/only-dev-server',
'./src'
], //this is where webpack look for the files
output : {
path : path.join(__dirname, 'build'),
filename: 'bundle.js'
}, //this is where webpack create the virtual output
resolve: {
modulesDirectories :['node_modules','src'], //this is where webpack look for module directories
extensions : ['','.js'], // this is the extension for which webpack look for
},
module:{
loader :[
{
test: /\.jsx?$/, //this is to for we can use jsx file if not js file
exclude: /node_modules/, //the part which are not included in our app build
//loader: 'babel-loader'
loaders : ['react-hot','babel-loader','babel?presets[]=react,presets[]=es2015'], // the module which are used to load our app
}
]
},
plugins:[
new webpack.HotModuleReplacementPlugin(), //for live reloading
new webpack.NoErrorsPlugin() // stop app to run if there is any error
]
}
としましょう上手く動作していますが、classやimportなどのecmascript6キーワードは機能しません。 index.jsため
のWebPACK 1.13.1 ノードV6.3.1 NPM 3.10.3
package.json
{
"name": "react-todos",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"react": "^15.3.0",
"react-dom": "^15.3.0"
},
"devDependencies": {
"babel-cli": "^6.11.4",
"babel-core": "*",
"babel-loader": "*",
"babel-preset-es2015": "*",
"babel-preset-react": "*",
"react-hot-loader": "*",
"webpack": "*",
"webpack-devserver": "*"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
私のコード: -
import React from 'react';
import { render } from 'react-dom';
import App from 'component/app';
console.log("hiii")
render(<App />, document.getElementById('app'))
ありがとうございます。どうもありがとう :) – mayank