Je ne fais que gratter la surface de la construction de mon environnement de développement avec webpack, webpack-dev-server et le rechargement de modules à chaud. Je veux éventuellement pouvoir ajouter des composants de réaction à un site principalement statique (pour que le SEO ait le bénéfice d'avoir du HTML explorable.) J'ai décidé de ne pas utiliser Gulp ou Grunt, mais j'utiliserai uniquement des scripts npm pour exécuter les commandes shell pour le développement, le test, la construction et la publicationComment obtenir un bundle Webpack simple en utilisant webpack-dev-server
Je n'ai pas pu obtenir les navigateurs pour lire mon fichier bundle.js généré par webpack. bouilli ma bibliothèque jusqu'à la plus simple index.html et index.js que vous pouvez voir ci-dessous
la sortie d'erreur sur la console est:.
Uncaught ReferenceError: handleClick is not defined
at HTMLButtonElement.onclick ((index):7)
Le émis bundle.js fichier doit être où l'erreur est:
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
const handleClick =() => {
document.getElementById("demo").innerHTML = "Hello World!";
};
/***/ })
/******/ ]);
Mon fichier index.html:
<html>
<body>
<p id="demo">Simple JS demo</p>
<script src="bundle.js"></script>
<button type="button" onclick='handleClick()'>Click Me!</button>
</body>
</html>
Mon fichier index.js:
const handleClick =() => {
document.getElementById("demo").innerHTML = "Hello World!"
}
Mon webpack. fichier config.js:
const config = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: '/home/andrew/code/my-site/public',
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
}
}
]
}
};
module.exports = config;
Mon npm start script:
"scripts": {
"start": "webpack-dev-server --content-base public/"
}
J'ai webpack installé dans le monde pour que je puisse générer le fichier bundle.js dans le public/dossier avec la commande webpack, bien que le fichier npm start émet bundle.js de toute façon.
Il doit y avoir une erreur simple que je fais.
solution via @Marek Takac: L'erreur est que la portée de la fonction handleClick() est pas globale. Cela peut être résolu en exportant le module à partir du fichier index.js
module.exports = {
handleClick: handleClick
}
et en utilisant les options de output.library and output.libraryTarget webpack pour définir une variable globale.
Voir aussi de webpack exports-loader
Merci pour la réponse, je ne crois pas que la portée soit le problème ici cependant. Remplacer mon bundle.js dans le dossier public avec index.js (et le script 'src =' dans le fichier html) puis en ouvrant simplement le fichier index.html dans le navigateur (au lieu de le servir avec webpack-dev-server), le script fonctionne. Je n'utilise pas encore de réaction, et j'ai assez bien étudié les docs du webpack ... – Drew2
Bon, que se passe-t-il si vous 'consolez.log' quelque chose de votre fichier 'index.js'? Est-ce qu'il enregistre réellement quelque chose à la console? –
@ Drew2 c'est un problème avec la portée. Vérifiez bundle.js et vous verrez que le fichier entier est une nouvelle portée sans accès aux globals. Si vous essayez réellement ce que je suggère dans ma réponse, vous verrez que cela fonctionne :) –