ipatate / example-webpack-symfony-3

Example Symfony project with webpack 3 builder for CSS and JS

Example Symfony project with webpack 3 builder for CSS and JS

webpack-dev-server and browser-sync are use for reload browser on change event for all files in project (js, scss, php or yaml)

Example use:

• webpack 3 https://webpack.js.org/
• postcss http://postcss.org/
• babel https://babeljs.io/ with env preset https://github.com/babel/babel-preset-env
• browsersync https://www.browsersync.io/
• editorconfig http://editorconfig.org/
• esLint https://eslint.org/ with airbnb config https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
• prettier https://github.com/prettier/prettier
• styleLint https://github.com/stylelint/stylelint with stylelint-config-standard https://github.com/stylelint/stylelint-config-standard and stylelint-order plugin https://github.com/hudochenkov/stylelint-order

Webpack

All configs files are in webpack-builder directory.

Assets

Js and Css (sass) sources files are in assets directory

Build

The files after build process are in web/build directory

cmd

For init project

$ composer install
$ npm i

For dev

• launch php server

  $ bin/console server:start
  

• launch webpack server

  $ npm run dev
  

• open your navigator to localhost:3000

For build

$ npm run build