Tôi có tệp index.js nhập CSS và một số gói, nhưng sau khi gói mọi thứ và khởi động máy chủ, tôi nhận thấy rằng tệp index.js không chạy. Tôi đã tạo một cái đơn giản trong index.js console.log Nhưng nó đã không đạt được.

Tôi đã sao chép của tôi từ một dự án trước đó hoạt động tốt webpack.config Nội dung của tệp, vì vậy tôi không chắc đây có phải là lỗi đường dẫn/cấu trúc tệp hay không. Có ý tưởng gì không?

Cấu trúc thư mục:

webpack.config.js:

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

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    mẫu: './src/index.html',
    tên tệp: 'RecruitmentTracking.txt',
    tiêm: 'cơ thể'
});

module.exports = {
  entry: "./src/index.js", // việc xóa .
  đầu ra: {
    tên tệp: './SiteAssets/scripts/RecruitmentTracking.js',
    đường dẫn: path.resolve(__dirname, 'dist')
  },

  mô-đun: {
    quy tắc: [{
      trình tải: 'trình tải babel',
      kiểm tra: /\.js$/,
      loại trừ: /node_modules/
    }, {
        kiểm tra: /\.css$/,
        sử dụng: ['trình tải kiểu', 'trình tải css']
    }, {
        kiểm tra: /\.(png|svg|jpg|gif)$/,
        sử dụng: [
          'trình tải tập tin'
        ]
      }
    ],
  },
    máy chủ nhà phát triển: {
        vô hiệu hóaHostCheck: đúng
    },
    devtool: 'cheap-module-eval-source-map', // điều này giúp trình duyệt trỏ đến tệp chính xác trong bảng điều khiển, giúp gỡ lỗi
    máy chủ nhà phát triển: {
        contentBase: path.join(__dirname, 'src'),
        historyApiFallback: true // điều này ngăn việc làm mới toàn bộ trang của trình duyệt mặc định khi gửi biểu mẫu và thay đổi liên kết
    },
    plugin: [
        HtmlWebpackPluginConfig,
        webpack.ProvidePlugin mới ({
            "$": "jquery",
            "jQuery": "jquery",
            "window.jQuery": "jquery"
    })]
}

chỉ mục.js:

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

console.log('đây là index.js');

gói.json:

{
  "name": "theo dõi tuyển dụng",
  "phiên bản": "1.0.0",
  "description": "Theo dõi sáng kiến ​​tuyển dụng",
  "main": "index.js", // ----- có nên đặt đường dẫn tệp cụ thể hơn ở đây không?
  "kịch bản": {
    "test": "echo \"Lỗi: không có xét nghiệm nào được chỉ định\" && exit 1",
    "start": "webpack-dev-server --open --mode phát triển",
    "xây dựng": "webpack --config webpack.config.js",
    "dev-server": "webpack-dev-server"
  },
  "tác giả": "",
  "giấy phép": "ISC",
  "devPhụ thuộc": {
    "@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",
    "trình tải tập tin": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "gói web": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "phụ thuộc": {
    "@babel/polyfill": "^7.4.0",
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "jquery": "^3.3.1",
    "jquery-ui-bundle": "^1.12.1-di chuyển",
    "pdfmake": "^0.1.54",
    "popper": "^1.0.1"
  }
}

câu trả lời hay nhất

Điều đang xảy ra ở đây là:

1 - webpack biên dịch và xuất ra:'./SiteAssets/scripts/RecruitmentTracking.js'

2 - HtmlWebpackPlugin, sau đó sẽ đọc tệp mẫu'./src/index.html', và chèn vào văn bảnTuyển dụngTracking.jskịch bản.

3 - Sau đó nó xuất kết quả thành dist/RecruitmentTracking.txt

Tôi không thấy bất kỳ vấn đề nào khác ngoài tệp .txt thay vì .html. Rõ ràng là không được trình duyệt giải thích.

Hãy thử xuất ra tệp html và nó sẽ hoạt động

Về javascript - tệp gói webpack nhưng index.js không chạy, chúng tôi tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/55406965/