ECMA Script 6 Simple Course, Babel, Webpack Part 3
- Install webpack
- Adjust package.json
- Add webpack.config.js file
- Test it
Install WebPack
npm install --save-dev webpack
once installed, in package.json file the dependency are added
also install webpack cli
npm install --save-dev webpack-cli
At this point we have the package.json file like this
{
"devDependencies": {
"@babel/cli": "^7.14.8",
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"webpack": "^5.51.1"
},
"scripts": {
"build": "babel src -d output --watch"
}
}
Adjust package.json
change the script in package.json
just to conserve this babel command rename the script to build-babel
and create the build script with the command webpack
{
"devDependencies": {
"@babel/cli": "^7.14.8",
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"scripts": {
"build": "webpack",
"build-babel": "babel src -d output --watch"
}
}
in console type
npm run build
then the command webpack will execute, in this case with error, we need define config file
webpack.config.js in the main subdirectory of work
Add webpack.config.js file
code the config that webpack will have accord the documentation
const path = require('path');
module.exports = {
mode: 'development',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js',
},
};
in entry: code the input file that will be app.js, so create app.js in /src
change filename to bundle.js
and change path to path.join(__dirname,'/') to save the output bundle.js file on the root working directory
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/app.js',
output: {
path: path.join(__dirname, '/'),
filename: 'bundle.js',
},
};
our app.js only has this code to test
const message = 'testing webpack installation';
console.log(message);
test with
npm run build
to check for errors
Now config babel, following babel page Setup menu-> Webpack -> usage instructions,
npm install --save-dev babel-loader
and if not installed @babel/core
npm install --save-dev babel-loader
and if not installed @babel/core
{
"devDependencies": {
"@babel/cli": "^7.14.8",
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"scripts": {
"build": "webpack",
"build-babel": "babel src -d output --watch"
}
add in webpack.config.js
module:{
rules:[
{test:/\.js$, exclude: /node_modules/, loader: "babel-loader" }
]
}
accord to new documentation
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/app.js',
output: {
path: path.join(__dirname, '/'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
test our config running the build
$ npm run build
> @ build D:\Descargas\Tutorial2021\ReactCrashCourse2021\ES6
> webpack
asset bundle.js 1.23 KiB [emitted] (name: main)
./src/app.js 67 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 893 ms
the webpack was executed without errors. and at this point the bundle.js will have the next
> @ build D:\Descargas\Tutorial2021\ReactCrashCourse2021\ES6
> webpack
asset bundle.js 1.23 KiB [emitted] (name: main)
./src/app.js 67 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 893 ms
the webpack was executed without errors. and at this point the bundle.js will have the next
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./src/app.js":
/*!********************!*\
!*** ./src/app.js ***!
\********************/
/***/ (() => {
eval("var message = 'testing webpack installation';\nconsole.log(message);\n\n//# sourceURL=webpack:///./src/app.js?");
/***/ })
/******/ });
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./src/app.js"]();
/******/
/******/ })()
;
finally once the bundle.js file has been created, change the file index.html to load this file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ES6</title>
</head>
<body>
<h1>Curso ECMAstript6</h1>
<script src="bundle.js"></script>
</body>
</html>
eot
No hay comentarios:
Publicar un comentario