0

I had a Django with Bootstrap working fine before. I am trying to get this up and running (without the react part) with Webpack following this: http://owaislone.org/blog/webpack-plus-reactjs-and-django/

The bundle is made when I run the webpack script. In the browser I keep getting plain html and so the bundle is not used...

Relevant code

testhtml.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is my fantastic demo!!!</title>
</head>
{% load render_bundle from webpack_loader %}

{% render_bundle 'main' %}
<body>
<div>"how about this?"</div>

</body>
</html>

webpack.config.js:

var path = require('path');
var webpack = require('webpack');`enter code here`
var BundleTracker = require('webpack-bundle-tracker');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var Clean = require('clean-webpack-plugin');
var bootstrapPath = path.join(__dirname, 'node_modules/bootstrap/dist/css');

module.exports = {
    devtool: 'eval-source-map',
    context: __dirname,
    entry: './assets/js/index', // entry point of our app. .assets/js/index.js should require other js modules and dependencies it needs
    output: {
        path: path.resolve('./assets/bundles/'),
        filename: '[name]-[hash].js'
    },
    node: {
        console: true,
        fs: 'empty'
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new BundleTracker({filename: './webpack-stats.json'}),
        new webpack.BannerPlugin('Banner!!!! todo'),
        new HtmlWebpackPlugin({
            template: __dirname + '/assets/index.tmpl.html'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new Clean(['assets/bundles'])
    ],
    module: {
        loaders: [
            {
                test: /\.js[x]?$/,
                loader: 'babel',
                exclude: /(node_modules|bower-components)/,
                query: {
                    presets: ['es2015', 'stage-0']
                }
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'node_modules/mapbox-gl/js/render/shaders.js'),
                loader: 'transform/cacheable?brfs'
            },
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'node_modules/webworkify/index.js'),
                loader: 'worker'
            },
            {
                test: /\.css$/,
                loader: 'style!css?modules!postcss'
            },
            {
                test: /\.scss$/,
                loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
            },
            /*
             {
             test: /\.woff$/,
             loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]'
             }, {
             test: /\.woff2$/,
             loader: 'url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]'
             }, {
             test: /\.(eot|ttf|svg|gif|png)$/,
             loader: 'file-loader'
             }
             */
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?2?$/, loader: 'url-loader'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader'},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader'}
        ]
    },
    postcss: [
        require('autoprefixer')
    ],
    resolve: {
        modulesDirectories: ['node_modules', 'bower_components', bootstrapPath],
        extensions: ['', '.js', '.jsx', '.css'],
        alias: {
            webworkify: 'webworkify-webpack',
            '$': 'jquery',
            'jQuery': 'jquery'
        }
    },
    devServer: {
        contentBase: './assets',
        colors: true,
        historyApiFallback: true,
        inline: true,
        hot: true
    }
};
Improve this question

2 Answers 2

Reset to default
1

I was importing (equivalent of require under ES6) a plugin which apparently caused issues. After leaving that plugin out the django-webloader-loader worked as expected. For more detail, see: https://github.com/owais/django-webpack-loader/issues/51

Improve this answer
0

Did you require the css files?

Using the css and style loaders you embed the css files in the Webpack bundle, requiring them as you would do with any other module.

If you look in the Webpack documentation I linked you'll see:

// in your modules just require the stylesheet 
// This has the side effect that a <style>-tag is added to the DOM.
require("./stylesheet.css");// This has the side effect that a <style>-tag is added to the DOM.
Improve this answer
1
  • Thanks for your answer. I will give a detailed answer which solved my issue.
    – musicformellons
    Commented Mar 13, 2016 at 18:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.