composer install
Create vhost to point to /front, and make sure it reads the htaccess file.
i.e. <vhost_url>/index will render /templates/index.twig
npm run start
npm run dev
npm run prod
Source files should build into /assets folder
Last active
July 11, 2018 13:43
-
-
Save kolinw/02ecc674d4aff0a4e35088b185951c1d to your computer and use it in GitHub Desktop.
Simple Webpack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
| { | |
| "presets": [ | |
| ["env", { | |
| "targets": { | |
| "browsers": ["last 2 versions", "safari >= 7"] | |
| } | |
| }] | |
| ], | |
| "plugins": [ | |
| "transform-jscript", | |
| "transform-export-default", | |
| "transform-class-properties", | |
| "transform-export-extensions", | |
| "transform-object-rest-spread", | |
| "transform-export-default-name" | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" | |
| content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Simple Webpack</title> | |
| {# TODO: has to build for prod without localhost:8080 #} | |
| <link rel="stylesheet" href="http://localhost:8080/assets/style.css"> | |
| {# using build files #} | |
| {#<link rel="stylesheet" href="/assets/style.css">#} | |
| </head> | |
| <body> | |
| {# TODO: has to build for prod without localhost:8080 #} | |
| <script src="http://localhost:8080/assets/bundle.js"></script> | |
| {# using build files #} | |
| {#<script src="/assets/bundle.js"></script>#} | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "Caravane", | |
| "version": "1.0.0", | |
| "private": true, | |
| "scripts": { | |
| "dev": "webpack-dev-server -d --hot --config webpack.config.js --watch", | |
| "build": "webpack", | |
| "prod": "NODE_ENV=production webpack --progress" | |
| }, | |
| "devDependencies": { | |
| "babel-core": "^6.26.3", | |
| "babel-loader": "^7.1.4", | |
| "babel-plugin-transform-class-properties": "^6.24.1", | |
| "babel-plugin-transform-export-default": "^7.0.0-alpha.20", | |
| "babel-plugin-transform-export-default-name": "^2.0.4", | |
| "babel-plugin-transform-export-extensions": "^6.22.0", | |
| "babel-plugin-transform-jscript": "^6.22.0", | |
| "babel-plugin-transform-object-rest-spread": "^6.26.0", | |
| "babel-polyfill": "^6.26.0", | |
| "babel-preset-env": "^1.7.0", | |
| "css-hot-loader": "^1.3.9", | |
| "css-loader": "^0.28.11", | |
| "extract-text-webpack-plugin": "^4.0.0-beta.0", | |
| "optimize-css-assets-webpack-plugin": "^4.0.1", | |
| "postcss-loader": "^2.1.5", | |
| "style-loader": "^0.21.0", | |
| "stylus": "^0.54.5", | |
| "stylus-loader": "^3.0.2", | |
| "uglifyjs-webpack-plugin": "^1.2.5", | |
| "webpack": "^4.8.3", | |
| "webpack-cli": "^2.1.3", | |
| "webpack-dev-server": "^3.1.4" | |
| }, | |
| "dependencies": {} | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| plugins: () => [require('autoprefixer')(['last 2 version', '> 1%', 'ff >= 20', 'ie >= 8', 'opera >= 12', 'Android >= 2.2']), require('postcss-focus-visible')], | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const webpack = require("webpack"); | |
| const path = require("path"); | |
| const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin"); | |
| const UglifyJSPlugin = require("uglifyjs-webpack-plugin"); | |
| const OptimizeCSSAssets = require("optimize-css-assets-webpack-plugin"); | |
| module.exports = { | |
| entry: "./src/js/index.js", | |
| mode: "development", | |
| resolve: { | |
| alias: { | |
| utils: path.resolve(__dirname, './src/js/utils/') | |
| } | |
| }, | |
| output: { | |
| publicPath: "http://localhost:8080/assets/", | |
| path: path.resolve(__dirname, "./assets"), | |
| filename: "./bundle.js" | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.styl$/, | |
| use: ["css-hot-loader"].concat(ExtractTextWebpackPlugin.extract({ | |
| fallback: "style-loader", | |
| use: ["css-loader", "stylus-loader"] | |
| })) | |
| }, | |
| { | |
| test: /\.js$/, | |
| exclude: /node_modules/, | |
| loader: "babel-loader" | |
| } | |
| ] | |
| }, | |
| plugins: [ | |
| new ExtractTextWebpackPlugin("style.css") | |
| ], | |
| devServer: { | |
| contentBase: [ | |
| path.resolve(__dirname, "./templates/"), | |
| path.resolve(__dirname, "./layout/"), | |
| path.resolve(__dirname, "./snippets/"), | |
| path.resolve(__dirname, "./sections/") | |
| ], | |
| watchContentBase: true, | |
| historyApiFallback: true, | |
| inline: true, | |
| open: false, | |
| hot: true, | |
| headers: { | |
| "Access-Control-Allow-Origin": "*" | |
| } | |
| }, | |
| devtool: "eval-source-map" | |
| }; | |
| if (process.env.NODE_ENV === 'production') { | |
| module.exports.optimization = { | |
| minimizer: [new UglifyJSPlugin()] | |
| }; | |
| module.exports.plugins.push(new OptimizeCSSAssets()) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment