{% extends '../../base.html.twig' %} {% block body %}
{% include '../../../documentation/navbar.html.twig' with { 'route' : nodefony.route } %}

WEBPACK

Bundle Nodofony Generate a default webpack configuration in Bundle config directory

You can see here :

Location Webpack configurations in File System Directory


Location : src/bundles/name-bundle/Resources/config/webpack 

$ ls -l ./src/bundles/name-bundle/Resources/config
-rw-r--r--  1 cci  staff  1142 26 mar 17:08 config.js
-rw-r--r--  1 cci  staff   501 26 mar 17:08 routing.js
-rw-r--r--  1 cci  staff   896 26 mar 17:08 security.js
-rw-r--r--  1 cci  staff   122 26 mar 17:08 services.js
drwxr-xr-x  4 cci  staff   128 26 mar 17:08 webpack
-rw-r--r--  1 cci  staff  3047 26 mar 17:08 webpack.config.js

./src/bundles/name-bundle/Resources/config
├── config.js
├── routing.js
├── security.js
├── services.js
├── webpack
│   ├── webpack.dev.config.js
│   └── webpack.prod.config.js
└── webpack.config.js

Webpack Nodefony configurations

Nodefony WebPack Configurations

Location : src/bundles/name-bundle//Resources/config/webpack.config.js

const path = require("path");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpackMerge = require('webpack-merge');

// Default context 
//const context = path.resolve(__dirname, "..", "Resources", "public");
const public = path.resolve(__dirname, "..", "public", "assets");
const bundleName = path.basename(path.resolve(__dirname, "..", ".."));
const publicPath = bundleName + "/assets/";

let config = null;
let dev = true;
if (kernel.environment === "dev") {
  config = require("./webpack/webpack.dev.config.js");
} else {
  config = require("./webpack/webpack.prod.config.js");
  dev = false;
}

module.exports = webpackMerge(config, {
  //context: context,
  target: "web",
  entry: {
    name  : [ "./Resources/public/js/name.js" ]
  },
  output: {
    path: public,
    publicPath: publicPath,
    filename: "./js/[name].js",
    library: "[name]",
    libraryExport: "default"
  },
  externals: {},
  resolve: {},
  module: {
    rules: [{
        // BABEL TRANSCODE
        test: new RegExp("\.es6$|\.js$"),
        exclude: new RegExp("node_modules"),
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }]
      },
      /*
       *	JQUERY EXPOSE BROWSER CONTEXT
       *
       */
      {
        test: require.resolve("jquery"),
        loader: "expose-loader?$!expose-loader?jQuery"
      }, {
        test: /jquery\..*\.js/,
        loader: "imports-loader?$=jquery,jQuery=jquery,this=>window"
      }, {
        test: /\.(sa|sc|c)ss$/,
        use: [
          //'css-hot-loader',
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          }, {
            loader: 'resolve-url-loader',
            options: {}
          }, {
            loader: 'postcss-loader', // Run post css actions
            options: {
              plugins: () => [require('precss'), require('autoprefixer')]
            }
          }, {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      }, {
        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/', // where the fonts will go
            publicPath: `/${bundleName}/assets/fonts/` // override the default path
          }
        }]
      }, {
        // IMAGES
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [{
          loader: "file-loader",
          options: {
            name: "[name].[ext]",
            publicPath: `/${bundleName}/assets/images/`,
            outputPath: "/images/"
          }
        }]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "./css/[name].css",
      allChunks: true
    })
  ],
  devServer: {
    inline: true,
    hot: false
  }
});

Location : src/bundles/name-bundle/Resources/config/webpack/webpack.dev.config.js

// WEBPACK DEV CONFIGURATION
const CleanWebpackPlugin = require('clean-webpack-plugin');
//const public = path.resolve(__dirname, "..", "..", "public");

module.exports = {
  mode: "development",
  devtool: "source-map",
  resolve: {},
  plugins: [
    new CleanWebpackPlugin({
      verbose: kernel.debug
    })
    //new webpack.NamedModulesPlugin(),
    //new webpack.HotModuleReplacementPlugin()
  ]
};

Location : src/bundles/name-bundle/Resources/config/webpack/webpack.prod.config.js

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: "production",
  watch: false,
  externals: {},
  resolve: {},
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          warnings: true,
          compress: true
        },
        cache: true,
        parallel: true
      })
    ]
  },
  plugins: [
    new OptimizeCssAssetsPlugin({
      cssProcessorOptions: {
        discardComments: {
          removeAll: true
        }
      },
      canPrint: true
    })
  ]
};

Location : src/bundles/name-bundle/Resources/views/index.html.twig


{% extends '/app/Resources/views/base.html.twig' %}

{% block title %}Welcome {{kernel.name}}! {% endblock %}

{% block stylesheets %}

	{{ parent() }}

	<!-- WEBPACK BUNDLE -->
	<link rel='stylesheet' href='{{CDN("stylesheet")}}/name-bundle/assets/css/name.css' />

{% endblock %}

{% block body %}
	<div class='container'>
		<div class='row'>
			<img class='displayed' src='{{CDN("image")}}/framework-bundle/images/nodefony-logo-white.png'>
		</div>
	</div>
	<div class='container'>
		<div class='row displayed'>
			{{readme}}
		</div>
	</div>
{% endblock %}

{% block javascripts %}

	{{ parent() }}

	<!-- WEBPACK BUNDLE -->
	<script src='{{CDN("javascript")}}/name-bundle/assets/js/name.js'></script>

{% endblock %}

Location : src/bundles/name-bundle/Resources/public/js/name.js

/**
 *
 *	ENTRY POINT WEBPACK BUNLDE
 *
 *
 *  Add your assets here with require to an integration in webpack  bundle
 *
 *  import 'jquery';
 *  import'../css/mycss.css';
 *
 */
import "../css/name.css";

/**
 *	Class
 *
 *	Namespace name client side
 *
 **/
 class name {
	constructor() {}
}

export default new name();

Location : src/bundles/name-bundle/Resources/public/css/name.css


IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto
}
{% endblock %}