• Setup
  • Generate your HTML
    • Using merge-markdown
  • Update webpack.config.js
• Run Webpack
• Development
• Make Final CSS file

Setup

Generate your HTML

Whether you are getting your HTML from a webpage, a local project, or building it on your own, you need static html to style.

See src/main/webpack/static/index.html as an example.

If you are using any assets in your HTML and you would like to develop with them, they also need to be added to src/main/webpack/static.

Using merge-markdown

If you are coming to this project from merge-markdown, you can quickly generate html by using:

merge-markdown -m mandifest.yml --html

Once you have generated your html, copy the html into src/main/webpack/static The steps below are only needed if this project is portable since merge-markdown uses absolute links for assets.

1. Copy all assets into src/main/webpack/static in the same relative folder structure
2. Do a find and replace to update asset paths to be relative

Update webpack.config.js

You need update webpack.config.js plugin section with the html file and folders you'd like to use in your webpack project.

    plugins: [
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin({
        template: path.resolve(__dirname, SOURCE_ROOT + '/static/index.html')
        }),
        new CopyWebpackPlugin([
        { from: path.resolve(__dirname, SOURCE_ROOT + '/static/assets'), to: 'assets' },
        ])
    ]

Run Webpack

Install dependencies:

npm install

Mac users: If you recieve

gyp: No Xcode or CLT version detected!
gyp ERR! configure error

You might need to reset Xcode. Run:

sudo xcode-select --reset

If that doesn't work, view this article

Once dependencies are installed. Build the webpack project:

npm run build

Start your web server

npm run start

You can now develop in realtime with the src/main/webpack folder on localhost:8080.

Development

Development occurs in src/main/webpack. This project supports css and scss stylesheets. You can build your own design structure and webpack will automatically merge and update in realtime to show you the result. Build errors are output to the console.

Make Final CSS file

Run

  FILE=myFinalCss.css npm run package-css