Move to package Webpack turnkey
Scripts which are in assets/pages folder are bundled into public/js as default.
npm i -S webpack-turnkey
- Update package.json
There are two ways to use it :
- With npx
npx webpack-turnkey
- With package scripts
{ "name": "...", "version": "...", "scripts": { "dev": "webpack-turnkey", "prod": "NODE_ENV=prod webpack-turnkey" }, }
By default the command add -d
option, when environment variable NODE_ENV is equal to prod it will pass the -p
option.
The value of this variable is, by default, a relative path, from assets/pages/. It can be a file or a folder.
Examples:
WEBPACK_TURNKEY_ENTRY="game" npx webpack-turnkey
- => assets/pages/game/*
WEBPACK_TURNKEY_ENTRY="homepage.jsx" npx webpack-turnkey
- => assets/pages/homepage.jsx
WEBPACK_TURNKEY_ENTRY="profile/index.jsx" npx webpack-turnkey
- => assets/pages/profile/index.jsx
Shortcut to argument(s) with no options related exists too :
Examples:
npx webpack-turnkey game
- => assets/pages/game/*
npx webpack-turnkey homepage.jsx
- => assets/pages/homepage.jsx
npx webpack-turnkey profile/index.jsx
- => assets/pages/profile/index.jsx
npx webpack-turnkey game homepage.jsx profile/index.jsx
- => assets/pages/game/*
- => assets/pages/homepage.jsx
- => assets/pages/profile/index.jsx
You can override directory with environment variable:
- WEBPACK_TURNKEY_PROJECT_DIR:
- absolute path to the project directory (process.cwd)
- (ex: '/home/project')
- WEBPACK_TURNKEY_ASSET_SUFFIX:
- relative path to PROJECT_DIR (process.cwd)
- (ex: 'assets')
- WEBPACK_TURNKEY_ASSET_DIR:
- absolute path to entries of type asset directory
- (ex: '/home/project/assets')
- WEBPACK_TURNKEY_PAGE_SUFFIX:
- relative path to ASSET_DIR
- (ex: 'pages')
- WEBPACK_TURNKEY_PAGE_DIR:
- absolute path to entries of type page directory
- (ex: '/home/project/assets/pages')
- WEBPACK_TURNKEY_PUBLIC_SUFFIX:
- relative path to PROJECT_DIR (process.cwd)
- (ex: 'public')
- WEBPACK_TURNKEY_PUBLIC_DIR:
- absolute path to public folder
- (ex: '/home/project/public')
- WEBPACK_TURNKEY_OUTPUT_SUFFIX:
- folder name between public directory and page path
- (ex: 'js')
- WEBPACK_TURNKEY_OUTPUT_DIR:
- absolute path to output directory
- (ex: '/home/project/public/js')
An option
--sourcemap
use it with :npx webpack-turnkey --sourcemap
It will set options to true for styles loaders
An option
--eslint
use it with :npx webpack-turnkey --eslint
It will add.eslintrc.js
at the root of your project if not exists and compile with it.
An option
--bundled
use it with :npx webpack-turnkey --bundled
It will set the project directory to the current working directoryUsefull for Symfony <= 3 projects & assetic
cd src/MyBundle/Ressources && npx webpack-turnkey --bundled
It will compile files inMyBundle/Resources/assets/pages
toMyBundle/Resources/public/js
Other options like
--watch
are passed to webpack command
Files loaded and extensions permitted :
For codes files :
- .html
- .js / .jsx / .mjs
- .css
- .sass / .scss
For images files :
- .jpg / .jpeg
- .png
- .gif
For fonts files :
- .svg
- .woff / .woff2
- .ttf / .otf
- .eot
You can call specifics folders with aliases, there are :
- @actions => ASSET_DIR/actions
- @capsules => ASSET_DIR/capsules
- @components => ASSET_DIR/components
- @connecters => ASSET_DIR/connecters
- @constants => ASSET_DIR/constants
- @containers => ASSET_DIR/containers
- @fonts => ASSET_DIR/fonts
- @images => ASSET_DIR/images
- @managers => ASSET_DIR/managers
- @middlewares => ASSET_DIR/middlewares
- @models => ASSET_DIR/models
- @pages => ASSET_DIR/pages
- @reducers => ASSET_DIR/reducers
- @sounds => ASSET_DIR/sounds
- @stylesheets => ASSET_DIR/stylesheets
- @utils => ASSET_DIR/utils
- @videos => ASSET_DIR/videos
Create your own webpack.config.js at the root of your project and run webpack
command.
'use strict';
const wpt = require('webpack-turnkey');
module.exports = Object.assign({}, wpt.config);
If you run webpack-turnkey
command with a webpack-turnkey.config.js file, it will merge default config with your config.
module.exports = {
alias: {...},
rules: [{...}, {...}, ...],
extensions: [...]
};
npx webpack-turnkey --generate <format>
To generate template for start coding, two format are available:
- minimal:
- Create asset and public folders
- Add folders in ASSET_DIR
- components
- stylesheets
- starter:
- Create asset and public folders
- Add folders in ASSET_DIR
- components
- constants
- managers
- models
- stylesheets
- utils
- Install modules
- @fortawesome/fontawesome
- @fortawesome/fontawesome-free
- @fortawesome/react-fontawesome
- bootstrap
- classnames
- jquery
- popper.js
- react
- react-dom
- toast
- Create files
- components/super.jsx : An improved component (can be deleted if not used)
- middlewares/event.js : Contains an prevent middleware
- pages/style.js : Instanciate boostrap, fontawesome, jquery, toastr
- stylesheets/* : Import style with helpers
Webpack >= 3.10