Question

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

一步一步地实现了它，就像它被告知的那样，但是我对这个错误感到厌烦（当我尝试构建所有内容时）

找不到输入模块中的错误：错误：无法解决＆＃39; C：\用户\ temp1目录\文件\了解\ ReactJS \ playaroundapp \的index.html＆＃39;在＆＃39; C：\用户\ temp1目录\文件\了解\ ReactJS \ playaround＆＃39; 解决＆＃39; C：\ Users \ temp1 \ Documents \ Learn \ ReactJS \ playaroundapp \ index.html＆＃39;在＆＃39; C：\用户\ temp1目录\文件\了解\ ReactJS \ playaround＆＃39; 使用描述文件：C：\ Users \ temp1 \ Documents \ Learn \ ReactJS \ playaround \ package.json （相对路径：。） Field＆＃39;浏览器＆＃39;不包含有效的别名配置使用描述文件后：C：\ Users \ temp1 \ Documents \ Learn \ ReactJS \ playaround \ package.json （相对路径：。）找不到描述文件没有延期 Field＆＃39;浏览器＆＃39;不包含有效的别名配置 C：\用户\ temp1目录\文件\学习\ ReactJS \ playaroundapp \ index.html在不存在 .js文件 Field＆＃39;浏览器＆＃39;不包含有效的别名配置 C：\用户\ temp1目录\文件\学习\ ReactJS \ playaroundapp \ index.html.js 不存在以.json Field＆＃39;浏览器＆＃39;不包含有效的别名配置 C：\用户\ temp1目录\文件\学习\ ReactJS \ playaroundapp \ index.html.json 不存在作为目录 C：\用户\ temp1目录\文件\学习\ ReactJS \ playaroundapp \ index.html在不存在

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

我不知道这里有什么问题。怎么样？

Answer 1

看起来路径连接错过了斜线，请尝试

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')
...

这使得路径连接不易出错并且与操作系统无关（反斜杠vs基于windows vs * nix的os斜杠）

找不到Webpack Entry模块（通过教程）

1 个答案: