https://github.com/jl-olemar/rickandmortyapi
Api de Rick and Morty, conocimientos prácticos de Webpack.
https://github.com/jl-olemar/rickandmortyapi
api-rest javascript rickandmortyapi sass webpack
Last synced: 2 months ago
JSON representation
Api de Rick and Morty, conocimientos prácticos de Webpack.
- Host: GitHub
- URL: https://github.com/jl-olemar/rickandmortyapi
- Owner: JL-OLEMAR
- Created: 2021-06-27T04:59:00.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-27T05:35:15.000Z (about 5 years ago)
- Last Synced: 2025-03-30T16:47:28.574Z (over 1 year ago)
- Topics: api-rest, javascript, rickandmortyapi, sass, webpack
- Language: JavaScript
- Homepage: https://JL-OLEMAR.github.io/RickAndMortyApi/
- Size: 2.21 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Webpack Template
This project was created in order that it can be used for different projects, personal, business, you can give it the use you want.
## Available Scripts
To start clone the project and use:
### `yarn` or you can also use `npm install`
To start the server in your browser:
### `yarn dev` or you can also use `npm run dev`
To create your production files:
### `yarn build` or you can also use `npm run build`
## What does this template bring?
This template already has installed what is necessary to be able to be used in its entirety
* `ReactJS and ReactDOM`
* `JSX | JS`
* `CSS | SASS`
### The webpack.common.js is configured as follows:
```js
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
/** @type {import('webpack').Configuration} */
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "../dist"),
filename: "[name].[contenthash].js",
publicPath: "",
},
module: {
rules: [
{
use: "babel-loader",
test: /\.(js|jsx)$/,
exclude: /node_modules/,
},
{
type: "asset",
test: /\.(png|svg|jpg|jpeg|gif)$/i,
},
],
},
resolve: {
extensions: [".js", ".json", ".jsx"],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],
};
```
### The webpack.prod.js is configured as follows:
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { merge } = require("webpack-merge");
const common = require("./webpack.common");
/** @type {import('webpack').Configuration} */
const prodConfig = {
mode: "production",
devtool: "source-map",
module: {
rules: [
{
test: /\.(css|scss|sass)$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
],
},
optimization: {
splitChunks: {
chunks: "all",
name: false,
},
},
plugins: [new MiniCssExtractPlugin()],
};
module.exports = merge(common, prodConfig);
```
### The webpack.dev.js is configured as follows:
```js
const { merge } = require("webpack-merge");
const common = require("./webpack.common");
/** @type {import('webpack').Configuration} */
const devConfig = {
mode: "development",
devServer: {
port: 3000,
contentBase: "../dist",
open: "brave",
},
target: "web",
devtool: "eval-source-map",
module: {
rules: [
{
test: /\.(css|scss|sass)$/,
use: ["style-loader", "css-loader", "sass-loader"],
}
]
}
};
module.exports = merge(common, devConfig);
```
If you have knowledge of webpack you can modify the exit route to your liking
## About
As explained above, this project has many purposes and if you want to use them in your projects, do not hesitate to do so.