📦 WEBPACK SIMPLE PROJECT 💥

CREATED ON 3.11.2019

DESCRIPTION

Webpack project ready to use to perform a simple task:

• Resolve static resources producing a bundle

  * Fig. 1: Webpack official site https://webpack.js.org/ *
  

Webpack works as follow:

• Read an entry file Javascript entry: "./index.js",
• Resolve all dependencies (in this case only Js scripts) producing a bundle output: {filename: "bundle.js}"; bundle is added in html page
  • Dynamic Import (Ref: https://webpack.js.org/guides/code-splitting/)
    • 'script_1.js' and 'script_2.js' are dynamically imported
  • 'script_3.js' is imported synchronously
• Produce source-map
• Serve project with devServer on port 3001

🗃Branch master🗃

• Added HtmlWebpackPlugin plugin to watch html index file

• Added JavaScriptObfuscator plugin(it is commented in webpack.config.js; de-commend to reintegrate)

• Added BundleAnalyzerPlugin plugin to show details on bundle(it is commented in webpack.config.js; de-commend to reintegrate)

✨Branch feature/webpack-react ✨

• Added and configured Babel loader to transpile React code

• Rendered a simple React component to a hook in html

  ReactDOM.render(ExamplePage(), document.getElementById('example-react-container'));

WHAT WE NEED

• Node JS (tested on v12.14.1)

🚸USAGE🚸

• npm install
• npm run build
• npm run start

AUTHOR: IR