Webpack связывает файлы, но index.js не работает

Question

У меня есть файл index.js, который импортирует мой CSS и несколько пакетов, но после объединения всех компонентов и запуска сервера я заметил, что index.js не работает.Я сделал простой console.log в index.js, но он не был достигнут.

Я скопировал содержимое моего webpack.config файла из предыдущего проекта, который работал правильно, поэтому я не уверен, чтоэто файловая структура / ошибка пути или что нет.Есть мысли?

Структура каталогов:

webpack.config.js:

const path = require('path')
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')
var $ = require("jquery");

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'RecruitmentTracking.txt',
    inject: 'body'
});

module.exports = {
  entry: "./src/index.js", // removing the . fails the build
  output: {
    filename: './SiteAssets/scripts/RecruitmentTracking.js',
    path: path.resolve(__dirname, 'dist')
  },

  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    }, {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
    }, {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ],
  },
    devServer: {
        disableHostCheck: true
    },
    devtool: 'cheap-module-eval-source-map', // this helps to browser to point to the exact file in the console, helps in debug
    devServer: {
        contentBase: path.join(__dirname, 'src'),
        historyApiFallback: true // this prevents the default browser full page refresh on form submission and link change
    },
    plugins: [
        HtmlWebpackPluginConfig,
        new webpack.ProvidePlugin({
            "$": "jquery",
            "jQuery": "jquery",
            "window.jQuery": "jquery"
    })]
}

index.js:

import "./RecruitmentTracking.css";
import 'jquery';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import 'jquery-ui-bundle/jquery-ui.min.js';

console.log('this is index.js');

package.json:

{
  "name": "recruitmenttracking",
  "version": "1.0.0",
  "description": "Recruitment Initiatives Tracking",
  "main": "index.js", // ----- should a more specific file path be here?
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --config webpack.config.js",
    "dev-server": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.0",
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "jquery": "^3.3.1",
    "jquery-ui-bundle": "^1.12.1-migrate",
    "pdfmake": "^0.1.54",
    "popper": "^1.0.1"
  }
}

Answer 1

Что здесь происходит:

1 - веб-пакет компилирует и выводит в: './SiteAssets/scripts/RecruitmentTracking.js'

2 - HtmlWebpackPlugin, затем прочитает файл шаблона './src/index.html' и внедрит скрипт RecruitmentTracking.js в тело.

3 - затем выводит результат в dist/RecruitmentTracking.txt

Я не вижу никаких проблем, за исключением того, что файл является .txt, а не .html. и, очевидно, не будет интерпретироваться браузером.

Попробуйте вместо этого вывести в html-файл, он должен работать

Answer 2

Вы назвали выходной файл в HtmlWebpackPluginConfig как RecruitmentTracking.txt.измените его на index.html, и он должен работать

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './src/index.html', // webpack takes ./src/index.html as input file
  filename: 'index.html', // webpack processes the above input template and should output to index.html
  inject: 'body'
});

Answer 3

1) По какой-то причине вы настроили следующий плагин для вывода файла .txt.Поэтому не ожидайте, что браузер будет интерпретировать это как HTML-файл

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'RecruitmentTracking.txt',
    inject: 'body'
});

2) Также я считаю, что файл, который вы открываете в браузере, /dist/index.html и чтоФайл не загружает ваш файл JS.Попробуйте добавить следующую строку в /dist/index.html:

<script src"./SiteAssets/scripts/RecruitmentTracking.js"></script>

3) Если все вышеперечисленное работает, пожалуйста, все же рассмотрите более внимательный взгляд на (1)