0xAnon 0xAnon101

## .md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                0xAnon101
                / .md
            
            
              Last active
              September 24, 2018 11:08
            
              
                Breif Description of what happens in browser when a Javascript code executes?
              
          
    How Does Javascript Run Your Code?

Google Chrome  has V8 Javascript engine and Mozilla has SpiderMonkey Engine to run JS code.
var num = 2;
function pow(num) {
    return num * num;
}

  
## .js
module.exports  = (env,argv) => {

    return {
    optimization: {
        nodeEnv: argv.mode
    },
    module: {
        rules: [
            {
                test: /\.js$/,

## .json
{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

## .js
import React from "react";
import ReactDOM from "react-dom";
import App from './Containers/App';


ReactDOM.render(<App />, document.getElementById("index"));

## .html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React and Webpack4</title>
</head>
<body>
  <section id="index">

## .js
const HtmlWebPackPlugin = require('html-webpack-plugin');
const htmlPlugin =  new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
})

module.exports  = (env,argv) => {
    return {
    optimization: {
        nodeEnv: argv.mode

## .js
const HtmlWebPackPlugin = require('html-webpack-plugin');
const htmlPlugin =  new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
})

module.exports  = (env,argv) => {
    return {
    optimization: {
        nodeEnv: argv.mode

## .js
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin =  require('mini-css-extract-plugin');

const miniCssPlugin = new MiniCssExtractPlugin({
    filename: '[name].[hash].css',
    chunkFilename:  '[id].[hash].css',
})

const htmlPlugin =  new HtmlWebPackPlugin({
    template: "./src/index.html",

## .js
import React from "react";

const App = () => {
    return <div className={classes.app}>Hello React!</div>;
  };

export default App;

## .scss
.app {
    width: 100px;
    height: 100px;
    background: #000;
    color: #fff;
}
	module.exports = (env,argv) => {

	return {
	optimization: {
	nodeEnv: argv.mode
	},
	module: {
	rules: [
	{
	test: /\.js$/,
	import React from "react";
	import ReactDOM from "react-dom";
	import App from './Containers/App';


	ReactDOM.render(<App />, document.getElementById("index"));
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>React and Webpack4</title>
	</head>
	<body>
	<section id="index">
	const HtmlWebPackPlugin = require('html-webpack-plugin');
	const htmlPlugin = new HtmlWebPackPlugin({
	template: "./src/index.html",
	filename: "./index.html"
	})

	module.exports = (env,argv) => {
	return {
	optimization: {
	nodeEnv: argv.mode
	const HtmlWebPackPlugin = require('html-webpack-plugin');
	const MiniCssExtractPlugin = require('mini-css-extract-plugin');

	const miniCssPlugin = new MiniCssExtractPlugin({
	filename: '[name].[hash].css',
	chunkFilename: '[id].[hash].css',
	})

	const htmlPlugin = new HtmlWebPackPlugin({
	template: "./src/index.html",
	import React from "react";

	const App = () => {
	return <div className={classes.app}>Hello React!</div>;
	};

	export default App;
	.app {
	width: 100px;
	height: 100px;
	background: #000;
	color: #fff;
	}