Preact Setup Timelapse
Notes from setting up a Preact-based SPA from ground up.
# Initialize the project
# Install webpack stuff
npm install firstname.lastname@example.org email@example.com firstname.lastname@example.org --save-dev
I had to install those specific versions. Webpack 4-beta didn’t work for me.
email@example.com game me this delightful error
TypeError: Cannot read property 'plugin' of undefined
stylelint-loader didn’t work with Webpack 4 and
webpack-dev-server. Frontend development is exciting.
Added two commands to
package.json: one that builds the project and another that launches the live-reloading dev server.
npm i -D babel-loader @babel/core @babel/preset-env
I updated the Webpack config to use the loader and tested.
npm i -D html-webpack-plugin
At this point, running
npm start successfully showed me my SPA.
Preact and a simple SPA
npm i -D preact
src/App.js to import Preact and display a simple component.
npm i -D babel-plugin-transform-react-jsx
# Linting. Using the AirBnB guide. Make sure ESLint doesn't barf on JSX
npm i -D eslint \
Clean Before Build
npm i -D clean-webpack-plugin
Updated Webpack to use the plugin. Easy-peasy.
Uglify JS Output
npm i -D uglifyjs-webpack-plugin
And updated Webpack.
Wanted to add Sass support and create a separate, compiled, minified file
App.css in the output
npm i -D extract-text-webpack-plugin style-loader css-loader sass-loader node-sass
Add Sass Linting
# Does not work with Webpack 4 beta and the dev server
npm i -D stylelint stylelint-webpack-plugin stylelint-config-standard
Assets → Base64
# Does not work with Webpack 4 beta
npm i -D base64-inline-loader