Question

这是我用于生成虚拟bundle.js的webpack.config.js代码： -

    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
        ]

    }

并且让工作正常但是这些ecmascript6关键字如class和import不起作用。

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"
      }

我的index.js代码： -

    import React from 'react';
    import { render } from 'react-dom';
    import App from 'component/app';

    console.log("hiii")
    render(<App />, document.getElementById('app'))

Answer 1

看起来webpack不是加载你的加载器。查看您的webpack配置文件，我看到一个可能的问题，可能会阻止webpack 加载加载器。您的模块loader字段缺少结尾s。 Webpack需要一个loaders字段，而您提供loader而不是被忽略。

module: {
  loaders: [
        ^

这很微妙，但可能是原因。

我无法在我的代码中使用ecma6 import获取错误“意外令牌导入”

1 个答案: