diff --git a/blog/themes/.DS_Store b/blog/themes/.DS_Store index f9bd41c..46c97ad 100644 Binary files a/blog/themes/.DS_Store and b/blog/themes/.DS_Store differ diff --git a/blog/webpack-structure.md b/blog/webpack-structure.md index e223496..5c8d3da 100644 --- a/blog/webpack-structure.md +++ b/blog/webpack-structure.md @@ -4,4 +4,48 @@ Following this tutorial: ## Initialise project -Run `npm i webpack --save-dev` to install webpack locally and add it as a dev dependency to your `package.json`. +Initialise a git repo for your project and clone it down. + +Create an empty `package.json` file: + +```json +{} +``` + +Run `yarn add --dev webpack webpack-cli` to install webpack locally and add it as a dev dependency to your `package.json`. + +You should add `main`, `license` and `scripts` to the `package.json` object. At this point your `package.json` should look like: + +```json +{ + "main": "webpack.config.js", + "license": "MIT", + "scripts": { + "build": "webpack --config webpack.prod.js", + "watch": "webpack --watch --progress --colors --config webpack.dev.js" + }, + "dependencies": {}, + "devDependencies": { + "webpack": "^4.43.0", + "webpack-cli": "^3.3.11" + } +} +``` + +You should create the file structure for your project. + +TODO: Link to the webpack-filestructure note in Trilium. + +We will create `./src/js` and `./src/scss` folders. We create a `./dist` folder for webpacks output and we create a `./static` folder for anything that needs to be outside the bundle. + +Inside `./src/js` we will create an `App.js`. Inside `./src` we will create a `main.js`. + +At this point your `./src` directory should look like: + +```text +./src +├── js +│ └── App.js +├── main.js +└── scss +``` diff --git a/tasks.todo b/tasks.todo index a9a9444..f01a23a 100644 --- a/tasks.todo +++ b/tasks.todo @@ -109,6 +109,7 @@ Tasks: ☐ Look at the chunky themes webpack.prod.js - document all the extra modules being used. ☐ Add the lunr index build to the webpack bundle. ☐ Include lunr in the bundle + any other modules needed for search. + ☐ Use webpack to fill a html partial for the baseof.html file (see the notes). Tutorials: ☐ https://www.integralist.co.uk/posts/python-asyncio/ @@ -119,5 +120,5 @@ Tasks: ☐ Create new theme entirely, using a fresh webpack configuration. ☐ Move the AOS from the partials css and js into a webpack configuration. - Webpack: - ☐ Use webpack to fill a html partial for the baseof.html file (see the notes). + CSS: + ☐ Document using a fullscreen wallpaper (front-background in _variables.scss)