代码之家  ›  专栏  ›  技术社区  ›  DanilGholtsman

未找到网页输入模块(按教程)

  •  0
  • DanilGholtsman  · 技术社区  · 8 年前

    建立 this tutorial ReactJS )

    一步一步地实现它,就像它被告知的那样,但我最终遇到了这个错误(当我尝试构建一切时)

    未找到输入模块中的错误:错误:无法解决 C:\Users\temp1\Documents\Learn\ReactJS\playaroundapp\index。html'输入 “C:\Users\temp1\Documents\Learn\ReactJS\playaround” “C:\Users\temp1\Documents\Learn\ReactJS\playaround” (相对路径:.) 使用描述文件后:C:\Users\temp1\Documents\Learn\ReactJS\playaround\package.json (相对路径:.) 无扩展名 字段“browser”不包含有效的别名配置 C: \Users\temp1\Documents\Learn\ReactJS\playaroundapp\index.html 不存在 .js 字段“browser”不包含有效的别名配置 不存在 字段“browser”不包含有效的别名配置 C: \Users\temp1\Documents\Learn\ReactJS\playaroundapp\index.html.json 作为目录

    webpack.config.js :

    /** webpack required stuff */
    var HTMLWebpackPlugin = require('html-webpack-plugin');
    
    var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
            template: __dirname + 'app/index.html',
            filename: 'index.html',
            inject: 'body',
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency'
        });
    
    /** thing which traces stuff and transforms in teh better way with babel(?) */
    module.exports = {
        entry: __dirname + '/app/index.js',
        module:{
            loaders:[
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader'
                }
            ]
        },
        output:{
            filename: 'transformed.js',
            path: __dirname + '/build'
        },
        stats: {
                colors: true,
                modules: true,
                reasons: true,
                errorDetails: true
        },
        plugins: [HTMLWebpackPluginConfig]     
    };
    

    以及 package.json :

    {
      "name": "playaround",
      "version": "1.0.0",
      "description": "just test prj",
      "main": "index.js",
      "scripts": {
        "build": "webpack",
        "start": "webpack-dev-server"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "react": "^15.6.1",
        "react-dom": "^15.6.1"
      },
      "devDependencies": {
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-preset-react": "^6.24.1",
        "html-webpack-plugin": "^2.29.0",
        "webpack": "^3.3.0",
        "webpack-dev-server": "^2.6.1"
      }
    }
    

    1 回复  |  直到 8 年前
        1
  •  1
  •   MattDiMu    8 年前

    看起来路径连接缺少斜线,请尝试

    var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
            template: __dirname + '/app/index.html',
    ...
    

    然而,更好的方法可能是使用 path https://nodejs.org/api/path.html )就像这样:

    const path = require('path')
    ...
    template: path.join(__dirname, 'app', 'index.html')
    ...
    

    这使得路径连接不容易出错,并且与操作系统无关(在windows上是反斜杠还是斜杠,在基于*nix的操作系统上是反斜杠还是斜杠)

    推荐文章