From 0fe06dae64b66aaca2f6f11546ee4bbba0373abe Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Sat, 25 Aug 2018 19:10:36 -0400 Subject: [PATCH] webpack --- Webpack.md | 337 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 337 insertions(+) create mode 100755 Webpack.md diff --git a/Webpack.md b/Webpack.md new file mode 100755 index 0000000..9e33b92 --- /dev/null +++ b/Webpack.md @@ -0,0 +1,337 @@ +# Webpack + +- Webpack assembles your code and uses plug-ins to add additional features +- The only thing it does by itself is deal with ES2015 import/export statements + +## Lesson Objectives + +1. Install/Run Webpack +1. Create default export +1. Create a named export +1. Import only certain exports of file +1. Run webpack with NPM +1. Run webpack with Babel +1. Run webpack with JSX +1. Run webpack dev server + +## Install/Run Webpack + +``` +npm init +npm install webpack --save-dev +``` + +Create a test file: + +``` +mkdir js +touch js/index.js +``` + +Add basic log to `index.js`: + +```javascript +console.log('hi'); +``` + +Create a `dist` folder: + +``` +mkdir dist +``` + +We can now run: + +``` +./node_modules/.bin/webpack js/index.js dist/bundle.js +``` + +Create a basic HTML file (`index.html`): + +```html + + + + + + + + + + + +``` + +Run it in the browser: + +``` +open index.html +``` + +## Create default export + +Create a fake library (`js/mylib.js`) + +```javascript +const myFunc = function(){ + console.log('included!'); +} + +export default myFunc; +``` + +include it in `js/index.js` + +```javascript +import defaultImport from './mylib.js'; +defaultImport(); +``` + +## Create a named export + +Create the export in `js/mylib.js`: + +```javascript +export const myFunc2 = function(){ + console.log('also included'); +} +``` + +**NOTE** The export can be defined when the export is created. This can happen for default and named exports + +Import the function in `js/index.js`: + +```javascript +import defaultImport, {myFunc2 as renamedExport} from './mylib.js'; +defaultImport(); +renamedExport(); +``` + +If you don't want to rename the import in `js/index.js`: + +```javascript +import defaultImport, {myFunc2} from './mylib.js'; +defaultImport(); +myFunc2(); +``` + +We can of course set exports to variables in `js/mylib.js`: + +```javascript +const savedFunc = function(){ + console.log('also included'); +} + +export {savedFunc as myFunc2} +``` + +If the variable name is the same as the export name: + +```javascript +const myFunc2 = function(){ + console.log('also included'); +} + +export {myFunc2} +``` + +## Import only certain exports of file + +You can have multiple named exports in `js/mylib.js`: + +```javascript +const unnecessary = function(){ + console.log('unnecessary'); +} + +export { + myFunc2, + unnecessary as omitme +} +``` + +If you don't import them in `js/index.js`, they won't work: + +```javascript +import defaultImport, {myFunc2} from './mylib.js'; +defaultImport(); +myFunc2(); +omitme(); +``` + +## Run webpack with NPM + +Create `webpack.config.js` to simplify the terminal command + +```javascript +module.exports = { + entry: './js/index.js', + output: { + filename: 'dist/bundle.js' + } +}; +``` + +Now we can run: + +``` +./node_modules/.bin/webpack +``` + +We can put this command in our `package.json` file: + +```javascript +"scripts": { + "build": "webpack" +}, +``` + +and run + +``` +npm run build +``` + +## Run webpack with Babel + +First install the core transpiler, the loader which loads babel-plugins, and the es2015 plugin for babel: + +``` +npm install babel-core babel-loader babel-preset-es2015 --save-dev +``` + +Modify the webpack config to use these: + +```javascript +module.exports = { + entry: './js/index.js', + output: { + filename: 'dist/bundle.js' + }, + module: { + rules: [ + { + test: /\.(js|jsx)$/, //for all files that end with js/jsx + use: { + loader: 'babel-loader', //use the babel loader to load: + options: { + presets: ["es2015"] //the es2015 compiler + } + } + } + ] + } +}; +``` + +Now use some ES2015 syntax in `js/index.js`: + +```javascript +class Foo { + bar(){ + console.log('classes!'); + } +} +``` + +The result in `dist/build.js` is the ES5 version: + +```javascript +var Foo = function () { + function Foo() { + _classCallCheck(this, Foo); + } + + _createClass(Foo, [{ + key: 'bar', + value: function bar() { + console.log('classes!'); + } + }]); + + return Foo; +}(); +``` + +## Run webpack with JSX + +Install react core, the dom manipulator, and the babel transpiler plugin: + +``` +npm install react react-dom babel-preset-react --save-dev +``` + +In `webpack.config.js` use the `babel-loader` to load the `react` plugin: + +```javascript +use: { + loader: 'babel-loader', + options: { + presets: ["es2015", "react"] + } +} +``` + +Add a `main` tag and move our `script` tag to the bottom of `index.html` + +```html + + + + + + + +
+ + + +``` + +Write some react in `js/index.js`: + +```javascript +import ReactDOM from 'react-dom'; //import react-dom from npm install dir +import React from 'react'; //import react from npm install dir + +ReactDOM.render( +

Hello, world!

, + document.querySelector('main') +); +``` + +## Run webpack dev server + +Webpack dev server is an "all-in-one" package that + +- provides a basic static file server that serves your front-end static html/css/js files +- watches your files and runs webpack when any of them change +- reloads your browser whenever webpack is run + +Install it: + +``` +npm install webpack-dev-server --save-dev +``` + +Alter `package.json` to use webpack-dev-server instead of webpack + +```javascript +"scripts": { + "build": "webpack-dev-server --open" +}, +``` + +Now you can run + +``` +npm run build +``` + +and it will open up your browser automatically. Change a file, and see it reload. + +**NOTE** Webpack doesn't actually write the transpiled files to disk. Instead it serves them from memory. You can delete the `dist` directory + +``` +rm -r dist +```