Bonjours à toutes et à tous.
Au secours s'il vous plait. Je suis débutant.
Après avoir installé VS Code, Git et Node.js, j'ai créé un dossier projetsjavascript à la racine.
Dans ce dossier, j'ai créé le dossier src et dans ce dossier src les fichiers:
index.html, index.js, babel.config.js, package.json, et webpack.config.js
Quand je tape la commande : npm run webpack au Terminal, l'erreur suivante s'affiche :
npm ERR! missing script: webpack
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\degma\AppData\Roaming\npm-cache\_logs\2020-03-26T15_21_06_792Z-debug.loglog
degma@DESKTOP-LHIG5C6 MINGW64 /c/projetsjavascript
$
Voici les codes des différents fichiers :
index.html :
--------------------------------
index.js
----------------------------------
babel.config.js
-------------------------------------
webpack.config.js
Mercie de bien vouloir m'aider et pour votre partage de connaissances . Guillaume
Au secours s'il vous plait. Je suis débutant.
Après avoir installé VS Code, Git et Node.js, j'ai créé un dossier projetsjavascript à la racine.
Dans ce dossier, j'ai créé le dossier src et dans ce dossier src les fichiers:
index.html, index.js, babel.config.js, package.json, et webpack.config.js
Quand je tape la commande : npm run webpack au Terminal, l'erreur suivante s'affiche :
npm ERR! missing script: webpack
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\degma\AppData\Roaming\npm-cache\_logs\2020-03-26T15_21_06_792Z-debug.loglog
degma@DESKTOP-LHIG5C6 MINGW64 /c/projetsjavascript
$
Voici les codes des différents fichiers :
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src="dist/es6.js"></script>
</head>
<body>
<h1>Mon application</h1>
</body>
</html>
--------------------------------
index.js
let test = "123";
console.log(test);
console.log($);
----------------------------------
babel.config.js
module.exports = {
presets: [["@babel/preset-env"]]
};
[code]
-----------------------------------
package.json
[code]
{
"name": "projetsjavascript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack",
"start:": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/cli": "^7.8.4",
"@babel/preset-env": "^7.9.0",
"babel": "^6.23.0",
"html-webpack-plugin": "^3.2.0",
"jshint": "^2.11.0",
"loader": "^2.1.1"
},
"devDependencies": {
"@babel/core": "^7.9.0",
"babel-loader": "^8.1.0",
"path": "^0.12.7",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
-------------------------------------
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
main: path.join(_dirname, "src/index.js")
},
output: {
path: path.join(_dirname,"dist"),
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /\.js/,
exclude: /(node_modules)/,
use: ["babel-loader"]
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: path.join(_dirname, "./src/index.html")
})
],
stats: "minimal",
devtool: "source-map",
mode: "development",
devServer: {
open: false,
contentBase: "./dist",
inline: true,
port: 4000
}
};
Mercie de bien vouloir m'aider et pour votre partage de connaissances . Guillaume