4
votes

webpack regroupe les fichiers mais index.js n'est pas en cours d'exécution

J'ai un fichier index.js qui importe mon CSS et quelques paquets, mais après avoir tout regroupé et démarré le serveur, j'ai remarqué que index.js ne fonctionnait pas. J'ai fait un simple console.log dans index.js et il n'est pas atteint.

J'ai copié le contenu de mon fichier webpack.config d'un projet précédent qui fonctionnait correctement, donc je ne suis pas sûr qu'il s'agisse d'une erreur de structure / chemin de fichier ou autre. Des idées?

Structure du répertoire:

webpack.config.js:

XXX

index.js:

{
  "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"
  }
}

package.json:

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

javascript jquery webpack bundle

3 commentaires

Vous créez du code HTML dans 'Recruitment Tracking.text', vous devez le changer en index.html

@nucleartux J'ai un fichier index.html dans / dist et le fichier .txt est là parce qu'il est téléchargé dans un CMS.

@ Freedomn-m Voulez-vous dire les chemins relatifs dans webpack.config.js?

3 Réponses :

4
votes

Ce qui se passe ici est:

1 - webpack se compile et sort dans: './SiteAssets/scripts/RecruitmentTracking.js'

2 - HtmlWebpackPlugin, lira alors le fichier modèle './src/index.html' , et injectera le script RecruitmentTracking.js dans le corps.

3 - puis, il affiche le résultat dans dist/RecruitmentTracking.txt

Je ne vois aucun problème, à part le fait que le fichier est un .txt et non un .html. et ne serait évidemment pas interprété par le navigateur.

Essayez plutôt de créer un fichier html, cela devrait fonctionner

0 commentaires

1
votes

1) Pour une raison quelconque, vous avez configuré le plugin suivant pour générer un fichier .txt . Ne vous attendez donc pas à ce que le navigateur interprète cela en tant que fichier html

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

2) De plus, je crois que le fichier que vous ouvrez dans le navigateur est /dist/index.html et ce fichier ne charge pas votre fichier js. Essayez d'ajouter la ligne suivante dans /dist/index.html:

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

3) Si cela fonctionne, veuillez pensez toujours à regarder de plus près (1)

0 commentaires

1
votes

Vous avez nommé le fichier de sortie dans HtmlWebpackPluginConfig comme RecruitmentTracking.txt . changez-le en index.html et cela devrait fonctionner

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'
});

0 commentaires