Laradock + Webpack + 热重载

Question

你的工作场所是什么？

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.

到目前为止，我分别在框架上工作，尤其是在前端。现在我真的不知道如何组合在一起，尤其是当 webpack2 的许多模块已经过时时。

Windows X, Docker(laradock), Webpack, SASS, JS, PHP

感谢您对未来的建议。

Answer 1

您应该使用 webpack-dev-server 作为代理以支持 多个主机。然后，您将能够从服务器加载 'backend' 并使用 webpack MHR 内联的所有优势在另一个环境中进行开发。

这是我的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()
],

};

Laradock + Webpack + 热重载

Laradock + Webpack + Hot-reload

sass

laravel

docker

webpack

laradock

你的工作场所是什么？