Laradock + Webpack + Hot-reload - laravel

Question

What is your workplace?
Hello, I would like to ask what is your approach to developing the frontend and backend simultaneously?
I am into Webpack, but, what to do when I want to edit framework?
Do I need to run webpack in or out of the box?
Is it possible to reference webpack --watch or some other module to server as proxy? And if so how to set for example *.php files on change to force refresh page.
So far I have worked separately on the framework and particularly on frontend. Now I do not really know how to combine together, especially when many modules of webpack2 is obsolete.
Windows X, Docker(laradock), Webpack, SASS, JS, PHP
Thank you for the future suggestions.

Answer 1

You should use webpack-dev-server as proxy to support multiple hosts.
Then you will be able to load 'backend' from server and developing in another enviroment using all benefits from webpack MHR inlining.
Here is my webpack.config.js
var path = require('path');
var htmlWebPack = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack')
var ProvidePlugin = require('webpack/lib/ProvidePlugin');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var buildPath = path.join(__dirname); // Local /public/
var serverURL = 'http://localhost:8080/' // Webpack-dev-server
var proxyURL = 'http://LaraDock.dev:85/' // External server (laradock)
var proxy = {
'*': proxyURL
};
module.exports = {
devtool: 'cheap-eval-source-map',
context: path.join(__dirname, 'resources'), // ABSOLUTE ROUTE ./
entry: {
app: [
'webpack-dev-server/client?' + serverURL,
'webpack/hot/only-dev-server',
path.join(__dirname, 'resources/assets/js/app.js')
]
},
output: {
publicPath: serverURL + buildPath,
path: path.resolve(__dirname, buildPath),
filename: "js/[name].bundle.js"
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
},
},
module: {
loaders: [
// JS
{
test: /\.js$/, // ON WHAT TYPE USE THIS LOADER
loader: 'babel-loader',
include: path.join(__dirname, 'resources', 'assets', 'js'),
},
// VUE
{
test: /\.vue$/,
loader: 'vue-loader',
include: path.join(__dirname, 'resources', 'assets', 'js'),
},
// STYLE
{
test: /\.(sass|scss|css)$/,
loader: ['style-loader', 'css-loader', 'sass-loader'],
include: path.join(__dirname, 'resources', 'assets', 'scss'),
},
// FILES
{
test: /\.(jpe?g|png|gif|svg|ico)$/i,
loader: "file-loader?name=[path][name].[ext]&context=./resources/assets"
},
// FONTS
{
test: /\.(otf|eot|svg|ttf|woff)$/,
loader: 'url-loader?limit=10000'
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
loader: 'file-loader'
},
// BOOTSTRAP
{
test: /bootstrap\/public\/js\/umd\//,
loader: 'imports?jQuery=jquery'
},
],
},
devServer: {
contentBase: serverURL + buildPath,
proxy: proxy,
historyApiFallback: true,
hot: true,
noInfo: true,
stats: {
errors: true,
colors: true,
errorDetails: true,
reasons: false,
hash: false,
version: false,
timings: false,
assets: false,
chunks: false,
modules: false,
children: false,
source: false,
warnings: false,
publicPath: false
}
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new BrowserSyncPlugin(
// BrowserSync options
{
// Webpack-dev-server endpoint
host: 'http://localhost',
port: 80,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:80/) through BrowserSync
proxy: serverURL,
// Files
files: ['public/*', 'app/**/*.php', 'config/**/*.php', 'resources/views/**/*.php'],
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}),
new ExtractTextPlugin({
filename: './css/[name].style.css',
disable: false,
allChunks: true
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"Tether": 'tether' // Bootstrap v4 problem
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
],
};