Last active
July 24, 2019 05:49
-
-
Save mjsisley/497ad917cd14ada63111e5d95951b892 to your computer and use it in GitHub Desktop.
Webpack Config for Cookiecutter Django
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
... | |
{% block css %} | |
... | |
{% if not debug %} | |
<!-- Currently, the css is included as part of javascript in development--> | |
<!-- This includes the built css for production (I am currently using Grunt for this) --> | |
<!-- If ExtractTextPlugin is configured properly, Webpack can handle separate css in development and production --> | |
<script src="{% static 'css/project.css' %}"></script> | |
{% endif %} | |
{% endblock css %} | |
... | |
<!-- Insertion point for React if used --> | |
<div id="main"></div> | |
... | |
{% block javascript %} | |
... | |
{% if debug %} | |
<!-- Needed for webpack-dev-server in development --> | |
<script src="http://localhost:8080/static/app.js"></script> | |
{% else%} | |
<!-- Bundles is built before use in production --> | |
<script src="{% static 'js/bundles/app.js' %}"></script> | |
{% endif %} | |
{% endblock javascript %} |
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
// webpack.config.js | |
var webpack = require('webpack'); | |
var BrowserSyncPlugin = require('browser-sync-webpack-plugin'); | |
var autoprefixer = require('autoprefixer'); | |
// var ExtractTextPlugin = require("extract-text-webpack-plugin"); | |
var path = './<app_name>/static/js/' | |
module.exports = { | |
entry: path + 'src/app.jsx', | |
output: { | |
path: path + 'bundles/', | |
publicPath: 'http://localhost:8080/static/', | |
filename: 'app.js', | |
}, | |
module: { | |
loaders: [ | |
{ test: /\.coffee$/, loader: 'coffee-loader' }, | |
{ | |
test: /\.js[x]?$/, | |
loader: 'babel-loader', | |
exclude: /node_modules/, | |
query: { | |
presets: ['es2015', 'react'] | |
} | |
}, | |
// { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader!css-loader!autoprefixer-loader!sass-loader') }, | |
// { test: /\.less$/, loader: ExtractTextPlugin.extract('style-loader!css-loader!autoprefixer-loader!less-loader') }, // use ! to chain loaders | |
// { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader!autoprefixer-loader') }, | |
{ test: /\.scss$/, loader: 'style-loader!css-loader!postcss-loader!sass-loader'}, | |
{ test: /\.less$/, loader: 'style-loader!css-loader!postcss-loader!less-loader'}, // use ! to chain loaders | |
{ test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader'}, | |
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for <=8k images, direct URLs for the rest | |
] | |
}, | |
plugins: [ | |
new webpack.NoErrorsPlugin(), | |
new BrowserSyncPlugin( | |
// BrowserSync options | |
{ | |
// browse to http://localhost:3000/ during development | |
host: 'localhost', | |
port: 3000, | |
// proxy the Webpack Dev Server endpoint | |
// (which should be serving on http://localhost:3100/) | |
// through BrowserSync | |
proxy: 'http://localhost:8080/' | |
}, | |
// plugin options | |
{ | |
// prevent BrowserSync from reloading the page | |
// and let Webpack Dev Server take care of this | |
reload: false | |
} | |
) | |
], | |
resolve: { | |
// new ExtractTextPlugin("[name].css") | |
// you can now require('file') instead of require('file.coffee', 'file.jsx', etc..) | |
extensions: ['', '.js', '.jsx', '.json', '.coffee'] | |
}, | |
postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment