Webpack Dev Server dynamic script name?

G

Grigory Dikiy2017-09-09 10:02:14

webpack

Grigory Dikiy, 2017-09-09 10:02:14

Good afternoon! I'm trying to set up a dev server to work with React, but something doesn't work out. Did according to the tutorial: here
webpack.base.config.js

var path = require("path")
var webpack = require('webpack')

module.exports = {
    context: __dirname,

    entry: {
        app: ['webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './app/app.js'],
        vendors: ['react'],
    },

    output: {
        path: path.resolve('../engine/static/bundles/local/'),
        filename: '[name]-[hash].js',
        publicPath: 'http://localhost:3000/',
    },

    externals: [
    ], // add all vendor libs

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}),
    ], // add all common plugins here

    module: {
        rules: [] // add all common loaders here
    },

    resolve: {
        modules: ['node_modules', 'bower_components'],
        extensions: ['.js', '.jsx']
    },
}

webpack.local.config.js

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var config = require('./webpack.base.config.js')

config.devtool = "#eval-source-map"

config.plugins = config.plugins.concat([
  new BundleTracker({filename: '../engine/static/bundles/webpack-stats-local.json'}),
])

config.module.rules.push(
  { test: /\.jsx?$/, exclude: /node_modules/, use: ['react-hot-loader', 'babel-loader'] }
)

module.exports = config;

server.js

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.local.config')

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    inline: true,
    historyApiFallback: true,
}).listen(3000, '0.0.0.0', function (err, result) {
    if (err) {
        console.log(err)
    }

    console.log('Listening at 0.0.0.0:3000')
})

index.html

<html lang="en">
    <head>
        <title>App</title>
    </head>
    <body>
        <div id='app'></div>
    </body>
</html>

I don’t understand how I can add a build file so that it stretches into html.
PS. The tutorial does not contain index.html at all

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

G

Grigory Dikiy, 2017-09-09
@frilix

The webpack loader that stands as a django app takes care of everything, so no index.html file is needed. launch is like this:

node server.js
./manage.py runserver

Hot Reaload "catches" everything on the go. There were problems with CORS, solution:

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    inline: true,
    historyApiFallback: true,
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    }
// ...