NettPack core

Nettpack core is plugin for building javascripts and styles by using WebPackConfig + Nette

How to use:

• first create webpack configs for production and development mode

  • First please set nettpack host (path to your site) parameter in your config.local.neon parameters:

    parameters:
    	nettpack:
    		host: http://domain

  • example development config

    process.env.NODE_ENV = 'development';
    import express from "express";
    import webpack from 'webpack';
    import {NettPack} from "@nettpack/core"
    import webpackDevMiddleware from 'webpack-dev-middleware';
    import webpackHotMiddleware from 'webpack-hot-middleware';
    import fs from "fs";
    import myModule from "./path_to_your_module"
    let nett = new NettPack(__dirname + "/app/Config/config.local.neon");
    const app = express();
      	
    const regex = /(^.*[\/])(.*)(\.\w{20})(\.js|\.css)$/gi;
    app.use(function(req, res, next) {
    	if (!req.url) {
    		return;
    	}
    	let result = regex.exec(req.url);
    	if (result && result.length > 0) {
    		req.url = result[1] + result[2] + result[4];
    	}
    	next();
    });
      	
    nett.addAppModule("myModule", myModule);
      	
    let data = nett.buildModules();
      	
    for (let moduleName in data.modules) {
    	let module = data.modules[moduleName];
    	let compiler = webpack(module);
    	app.use(webpackDevMiddleware(compiler, {
    		publicPath: nett.config.publicPath + "/" + moduleName,
    		noInfo: true
    	}));
    	app.use(webpackHotMiddleware(compiler, {
    		hot: true,
    		path: nett.config.publicPath + '/' + moduleName + '/__webpack_hmr'
    	}));
    }
      	
    let content = "module.exports = " + JSON.stringify({resolve: data.resolves});
      	
    fs.writeFile('./webpack.export.config.js', content, function (err) {
    	if (err) throw err;
    	console.log('It\'s saved export webpack resolve!\n');
    });
      	
    app.listen(nett.getAppPort());
    

  • example production config

    process.env.NODE_ENV = 'production';
    import webpack from 'webpack';
    import {NettPack} from "@nettpack/core";
    import myModule from "./path_to_your_module"
    import fs from "fs";
      	
    let nett = new NettPack(__dirname + "/app/Config/config.local.neon");
    nett.addAppModule("myModule", myModule);
      	
    let data = nett.buildModules();
      	
    let hashes = [];
    for (let moduleName in data.modules) {
    	let module = data.modules[moduleName];
    	webpack(module).run((error, stats) => {
    		hashes.push({
    			name: moduleName,
    			hash: stats.hash
    		});
    		fs.writeFile('./webpack.hashes.js', JSON.stringify(hashes), function (err) {
    			if (err) throw err;
    			console.log('Hash saved!');
    		});
    		console.log(`Webpack stats: ${stats}`);
    		return 0;
    	})
    }

  • example module (each module is webpack.config.js)

    import path from 'path';
    import webpack from 'webpack';
    import ExtractTextWebpackPlugin from "extract-text-webpack-plugin";
      	
    module.exports = function () {
      	
    	let fileNameCss = '[name].[hash].css';
    	let fileNameJs = '[name].[hash].js';
    	if (process.env.NODE_ENV === 'development') {
    		fileNameCss = '[name].css';
    		fileNameJs = '[name].js';
    	}
    	const ExtractStylePlugin = new ExtractTextWebpackPlugin({
    		filename: fileNameCss,
    		disable: 'development' === process.env.NODE_ENV
    	});
    	return {
    		entry: {
    			app: [
    				path.join(__dirname, '/../pathToYourEntryPoint')
    			]
    		},
    		module: {
    			rules: [
    				{
    					test: /\.js$/,
    					use: {
    						loader: 'babel-loader'
    					}
    				},
    				{
    					test: /\.(css|less)$/,
    					use: ExtractStylePlugin.extract({
    						use: [
    							{ loader: "css-loader" },
    							{ loader: "less-loader" },
    						],
    						fallback: "style-loader"
    					})
    				},
    				{
    					test: /\.(png|gif|woff|woff2|eot|ttf|svg)$/,
    					loader: 'url-loader?limit=100000'
    				}
    			],
    		},
    		output:{
    			path: path.join(__dirname, '/../../web/dist'),
    			publicPath: "/dist",
    			filename: fileNameJs
    		},
    		plugins: [
    			new webpack.ProvidePlugin({
    				$: "jquery",
    				jquery: "jquery",
    				jQuery: "jquery"
    			}),
    			ExtractStylePlugin
    		],
    	};
    };

• How to insert another vendor package files into build collection:

  • First you must place this settings into your composer.json in your vendor package

  {
  .........
  .........
  .........,
  .........,
  	"extra": {
  		"nettpack": {
  			"resolve": {
  				"CustomName": "./src/Assets/main.js"
  				}
  			}
  		}
  }

  or using entry points

  {
  .........
  .........
  .........,
  .........,
  	"extra": {
  		"nettpack": {
  			"entry": {
  				"CustomName": "./src/Assets/main.js"
  				}
  			}
  		}
  }

  • Now you must create main.js file into /src/Assets, for example

  export * from './pathToYourJsFile.js'
  import './pathToYourStyles.less'

• For run build or start development mode place this scripts into your package.json file:

  {
  	"scripts": {
  		"start": "npm run build && npm run babel-node",
  		"prebuild": "npm run clean-dist",
  		"clean-dist": "npm run remove-dist && mkdir ./web/dist",
  		"remove-dist": "rimraf ./web/dist",
  		"build": "./node_modules/.bin/babel-node ./webpack.production.js",
  		"babel-node": "./node_modules/.bin/babel-node ./webpack.development.js",
  		}
  }