Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
app
bin
log
temp
tests
www
.gitignore
README.md
composer.json
package-lock.json
package.json
webpack.config.babel.js

README.md

Webpack example

This example is based on a slightly modified nette/sandbox.

In this file, you'll find instructions how to run this example or how to integrate n-asset-macro into the project.

Requirements

Example

Examples are automatically tested and there is an attempt to keep them up-to-date.

In case of problems or suggestions, create an issue.

Clone repository

git clone https://github.com/webrouse/n-asset-macro
mv n-asset-macro/examples/webpack webpack-example
rm -Rf n-asset-macro
cd webpack-example

Install the webpack command

sudo npm install --global webpack

Install JS dependencies from package.json

npm install

Install PHP dependencies from composer.json

composer update

Compile assets using webpack

Webpack compiles SASS styles using LibSass and ES2015 scripts using Babel, see webpack.config.babel.js for details:

webpack

Run PHP server

Start the webserver and then visit http://localhost:8888 in your browser:

php -S localhost:8888 -t www

Check the HTML code

In the HTML code, you can see the generated paths to assets:

...
<link rel="stylesheet" href="/dist/app.c58b9c2d.css">
...
<script src="/dist/app.7979a8f5.js"></script>
...

The HTML code has been generated based on this template:

{* app/presenters/templates/@layout.latte *}
...
<link rel="stylesheet" href="{asset dist/app.css}">
...
<script src="{asset dist/app.js}"></script>
...

Asset paths are generated in the www/dist/manifest.json:

{
 "dist/app.css": "dist/app.c58b9c2d.css",
 "dist/app.css.map": "dist/app.c58b9c2d.css.map",
 "dist/app.js": "dist/app.7979a8f5.js",
 "dist/app.js.map": "dist/app.7979a8f5.js.map"
}

Integration into the project

Here's a brief description how to integrate macro along with webpack to new or existing project based on nette/sandbox.

Install the PHP n-asset-macro package

composer require webrouse/n-asset-macro

Register the extension in configuration

# app/config/config.neon
extensions:
    assetMacro: Webrouse\AssetMacro\DI\Extension

Create asset entry points

Create entry points for javascripts and styles:

  • app/styles/main.scss
  • app/scripts/index.js

Add macro to @layout.latte

{* app/presenters/templates/@layout.latte *}
...
<link rel="stylesheet" href="{asset dist/app.css}">
...
<script src="{asset dist/app.js}"></script>
...

Install the webpack command

sudo npm install --global webpack

Initialize package.json (if not)

npm init

Install the JS packages

npm install --save-dev babel-loader babel-register babel-preset-env webpack extract-text-webpack-plugin webpack-manifest-plugin clean-webpack-plugin css-loader node-sass sass-loader 

Add babel env preset to package.json

For further configuration options, see babel-preset-env.

  "babel": {
    "presets": [
      ["env", {
        "targets": {
          "browsers": ["last 2 versions", "> 2%"]
        }
      }]
    ]
  }

Create webpack.config.babel.js

import ExtractTextPlugin from 'extract-text-webpack-plugin';
import ManifestPlugin from 'webpack-manifest-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';

// Config
const config = {
  publicDir: 'www',
  buildDir: 'dist',
  manifest: 'manifest.json',
  jsEntrypoint: './app/scripts/index.js',
  sassEntrypoint: './app/styles/main.scss',
};

module.exports = {
  entry: {
    [`${config.buildDir}/app`]: [config.jsEntrypoint, config.sassEntrypoint],
  },
  output: {
    filename: '[name].[chunkhash:8].js',
    path: `${__dirname}/${config.publicDir}`,
  },
  devtool: 'source-map',
  module: {
    rules: [
      // JS
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        }
      },
      // SASS
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(['css-loader?sourceMap', 'sass-loader?sourceMap'])
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].[contenthash:8].css',
      allChunks: true,
    }),
    new ManifestPlugin({
      fileName: `${config.buildDir}/${config.manifest}`,
    }),
    new CleanWebpackPlugin(`${config.publicDir}/${config.buildDir}`, { verbose: false, watch: true }),
  ]
};

Run PHP server

Start the webserver and then visit http://localhost:8888 in your browser:

php -S localhost:8888 -t www

Recommendations

This is just a simple example and inspiration for using webpack with asset macro.

In practice, it is useful to add additional plugins:

You can’t perform that action at this time.