aaronfrey/webpack.md

## webpack.md

      
    Raw
  

              webpack.md
            
          
    Webpack 5

Additional Training


Node.js
npm

Requirements


Node.js >= 10.13.0 (LTS)
ES5 Compliant Browser

Installation

$ npm install webpack webpack-cli --save-dev
Topics

Entry Points

An entry point indicates which module webpack should use to begin building out its internal dependency graph.
By default its value is ./src/index.js, but you can specify a different (or multiple entry points) by setting an entry property in the webpack configuration.
Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is src/index.js and will output the result in dist/main.js minified and optimized for production.
Output

The output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file.
Loaders

Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.
Potential Loaders


babel-loader - Loads ES2015+ code and transpiles to ES5 using Babel
sass-loader - Loads and compiles a SASS/SCSS file
eslint-loader - PreLoader for linting code using ESLint
vue-loader - Loads and compiles Vue Components

Plugins

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.