未找到 Webpack 入口模块(通过教程) [英] Webpack Entry module not found (by tutorial)

问题描述

在 codeacademy 上找到本教程(链接到最后一页)，决定尝试这种部署和配置 js 应用程序的现代方式(决定尝试 ReactJS)

Found this tutorial (linked to last page) on codeacademy, decided to try this modern-way of deploying and configuring js apps (decided to try ReactJS)

就像它所说的那样一步一步地实现它，但是我解决了这个错误(当我尝试构建所有东西时)

Step by step implemented it just like it was told, but I edened up with this error (when I try to build everything)

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

ERROR in Entry module not found: Error: Can't resolve 'C:\Users\temp1\Documents\Learn\ReactJS\playaroundapp\index.html' in 'C:\Users\temp1\Documents\Learn\ReactJS\playaround' resolve 'C:\Users\temp1\Documents\Learn\ReactJS\playaroundapp\index.html' in 'C:\Users\temp1\Documents\Learn\ReactJS\playaround' using description file: C:\Users\temp1\Documents\Learn\ReactJS\playaround\package.json (relative path: .) Field 'browser' doesn't contain a valid alias configuration after using description file: C:\Users\temp1\Documents\Learn\ReactJS\playaround\package.json (relative path: .) No description file found no extension Field 'browser' doesn't contain a valid alias configuration C:\Users\temp1\Documents\Learn\ReactJS\playaroundapp\index.html doesn't exist .js Field 'browser' doesn't contain a valid alias configuration C:\Users\temp1\Documents\Learn\ReactJS\playaroundapp\index.html.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration C:\Users\temp1\Documents\Learn\ReactJS\playaroundapp\index.html.json doesn't exist as directory C:\Users\temp1\Documents\Learn\ReactJS\playaroundapp\index.html doesn't exist

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

我不知道这里出了什么问题.怎么来的?

I got no clue whats wrong here. How come?

推荐答案

看起来路径连接漏了一个斜线，试试

Looks like the path concatenation misses a slash, try

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

不过，可能更好的方法是使用 path 实用程序模块(https://nodejs.org/api/path.html) 像这样:

The probably better way would be, however, to use the path utility module (https://nodejs.org/api/path.html) like this:

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

这使得路径连接更不容易出错并且是独立于操作系统的(反斜杠 vs Windows 上的斜杠 vs 基于 *nix 的操作系统)

This makes path concatenation less error-prone and is OS independent (backslash vs slash on windows vs *nix based os)

这篇关于未找到 Webpack 入口模块(通过教程)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！