Question

UPD：我想我已经明白了。问题是webpack配置：

从入口点删除 webpack-dev-server / client？http://127.0.0.1:8080/ 行。
从入口点删除 webpack / hot / only-dev-server 行。
删除了 devServer。 hot 选项。

一旦我完成了，设置就开始正常工作了。

我在Webpack遇到了一个非常奇怪的行为。 Webpack确实将条目index.js文件加载为bundle.js，但是我在index.js中编写的JavaScript代码不起作用。但是，bundle.js在文件的末尾有大约第9200行的代码。

换句话说，如果我运行应用程序并在浏览器中在localhost：8080打开页面，页面将加载，请求将发送给bundle.js，然后bundle.js文件将成功上传，但事后没有任何事情发生。

例如，如果我写'console.log（'Hello'）;'或者在bundle.js中有类似的东西，它不会向控制台返回任何内容。我无法从bundle.js中访问DOM。

真正奇怪的是，我可以导入index.js中的样式（它被编译为bundle.js），并且它们确实被应用了。

我删除了全局安装的webpack，以确保我不会遇到任何可能的冲突。
控制台和终端中没有错误。
我有一个工作设置，所以我比较了webpack配置，除了使用单引号和双引号之外，它们几乎相同。
我还决定从非工作设置中删除代码，只需将代码复制粘贴到工作设置中的相应文件中。基本上，我使用工作设置中的代码替换了app / router.js，server.js，package.json，webpack.config.js，views / index.pug和src / index.js中的代码。我删除了node_modules和yarn.lock，然后我运行了安装，一旦安装了所有内容，我就运行了应用程序，并且......我得到了相同的结果。
我删除了babel，并按照GitHub上babel-loader页面上的建议安装了最新版本的babel-loader。仍然没有变化。应用程序运行，但js没有。

这是我的webpack.config.js文件：

const webpack = require('webpack'),
  path = require('path'),
  ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://127.0.0.1:8080',
    'webpack/hot/only-dev-server',
    './src'
  ],
  output: {
    path: path.join(__dirname, '/public'),
    filename: 'bundle.js',
    chunkFilename: '[name].bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      },
      {
        test: /\.html$/,
        use: 'html-loader'
      },
      {
        test: /\.(css|sass|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /\.(jpg|png|svg|git)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      },
      {
        test: /\.(ttf|woff|woff2|eot)$/,
        use: 'file-loader'
      }
    ]
  },
  resolve: {
    modules: ['node_modules', 'src'],
    extensions: ['*', '.js', '.html', '.css']
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './public',
    hot: true,
    proxy: {
      '*': 'http://localhost:3000'
    }
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.NamedModulesPlugin(),
    new ExtractTextPlugin('styles.css')
  ]
};

这是package.json：

{
  "name": "webpack-broken",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@github.com:AndSviat/test.git",
  "author": "Sviatoslav Andrushko <andsviat@gmail.com>",
  "license": "MIT",
  "scripts": {
    "dev": "node server.js & webpack-dev-server --open"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-dynamic-import-webpack": "^1.0.1",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "html-loader": "^0.5.1",
    "node-sass": "^4.6.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "dependencies": {
    "dotenv": "^4.0.0",
    "express": "^4.16.2",
    "mongoose": "^4.13.1",
    "pug": "^2.0.0-rc.4"
  }
}

这是server.js文件：

require('dotenv').config();

const express = require('express'),
  router = require('./app/router'),
  path = require('path'),
  PORT = process.env.PORT || 3000;

const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.set('view engine', 'pug');

app.set('views', './views');

app.use(router);

app.listen(PORT, () => console.log(`Listening on port ${PORT}`));

这是app / router.js：

require('dotenv').config();

const express = require('express'),
  router = express.Router();

router.get('/', (req, res) => {
  res.render('index', {
    title: 'Hello From Express',
    heading: 'Simple App'
  });
});

module.exports = router;

这是src / index.js：

console.log('Hello');
alert('Hello')

document.body.appendChild(document.createElement('section'));
import './common.sass';

和src / styles.sass：

body
  color: #245b38
  background-color: #90baa7

最后，views / index.pug：

doctype
html(lang='en')
  head
    meta(charset='utf-8')
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    link(rel="stylesheet" href="/styles.css")
    title= title
  body
    h1= heading
    script(src='/bundle.js')

我想念什么？我认为剩下的唯一选择是销毁我的电脑，烧毁我的公寓，然后重新开始。

但是当我手动设置所有内容时，我没有任何错误或任何错误，并且JavaScript无论如何都无法正常工作。

Answer 1

根据您的webpack配置，您的bundle.js是在yourRootDirectory / public中创建的，但是在views目录的index.pug文件中，您正在查看目录中的bundle.js。如果从公共场所复制粘贴bundle.js可能会起作用。

Webpack加载输出文件bundle.js，但是来自条目文件index.js的JavaScript不起作用

1 个答案: