Bonjour,

Dans ma recherche de compréhension de webpack, un nouveau point me bloque .

script de ma page html :

<script type="text/javascript" src="/webpack/main.js"></script>
<script type="text/javascript" src="/static/semantic/semantic.min.js"></script>

• le fichier main.js je trouve dans un dossier "./dist"
• le fichier semantic.min.js dans un dossier "./public/semantic"

Je compile dans mon fichier main.js plusieurs fichiers.js provenant du dossier src grâce à webpack. Dans certain de ces fichiers j'y importe Jquery par un petit coup de "import $ from 'jquery'". Tout va bien jusqu'à là et mes commandes répondent correctement. sauf que je m’aperçois d'une erreur dans mon terminal :

Pourquoi semantic n'arrive pas à récupérer le jquery qui se trouve dans le script de main.js ? Pourtant si j’insère jquery dans le dossier public il ne me rend pas d'erreur... 

<script type="text/javascript" src="/static/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/static/semantic/semantic.min.js"></script>

Pouvez-vous m'aider s'il vous plait ?

Logique, tu as généré un code qui a son propre contexte (et les modules que tu as importés sont dans ce contexte). Jquery n'existe pas dans le contexte global.

2 solutions :

- Ce que tu as fait, ajouter jquery dans les balises scripts. Si tu retiens cette solution, je te conseille de définir jquery comme un "externals" dans ta conf webpack, ainsi jquery ne sera pas ajouté dans le bundle généré (ton main.js), mais le code fonctionnera tout de même puisque jquery sera récupéré au chargement de la page html.

- Importer semantic ui dans ton code source.

SpaceIn a écrit:

- Ce que tu as fait, ajouter jquery dans les balises scripts. Si tu retiens cette solution, je te conseille de définir jquery comme un "externals" dans ta conf webpack, ainsi jquery ne sera pas ajouté dans le bundle généré (ton main.js), mais le code fonctionnera tout de même puisque jquery sera récupéré au chargement de la page html.

Dans ce cas de figure, il faut que j'implante ces différentes lignes de code ci-dessous ?

SpaceIn a écrit:

- Importer semantic ui dans ton code source.

Oui, je préférais cette solution, j'ai essayé d'un coup de "npm install semantic-ui" de faire marcher semantic-ui, mais je n'y arrive . Pendant l'installation on pose plein de question auquel je ne sais pas apporter de réponse  . De plus, une fois tout ça installer correctement, je ne sais pas comment l'utiliser avec webpack:

question 1 : J'ai répondu "Custom"

Question 2 : j'ai répondu "No"

Question 3 : j'ai répondu "\src"

Question 4 : j'ai répondu "/src"

Question 5 : j'ai fait "enter"

Question 6 : J'ai répondu "Yes"

Question 7 : j'ai fait "enter". Il a choisi 744...

Question 8 : j'ai répondu "Build Both"

Question 9 à 12 : j'ai arrêté de réflechir et j'ai appuyé sur "enter" tout le temps

-
Edité par renjusyeager 26 mai 2018 à 18:03:00