Skip to content

Instantly share code, notes, and snippets.

@hossein761

hossein761/package.json Secret

Created Feb 16, 2021
Embed
What would you like to do?
TailwinCSS + Django setup sample config files
{
"name": "my_project",
"version": "0.1.0",
"dependencies": {
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.1",
},
"devDependencies": {
"autoprefixer": "^10.2.4",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^7.0.0",
"css-loader": "^5.0.2",
"dotenv-webpack": "^6.0.0",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^1.3.6",
"node-sass": "^5.0.0",
"postcss": "^8.2.6",
"postcss-loader": "^5.0.0",
"purgecss-webpack-plugin": "^4.0.0",
"sass-loader": "^11.0.1",
"tailwindcss": "^2.0.3",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2"
},
"engines": {
"node": ">=12"
},
"browserslist": [
"last 2 versions"
],
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}
}
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
const path = require('path');
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const isDevMode = process.env.WEBPACK_MODE === 'development'
const exclusions = /node_modules/;
module.exports = {
watch: isDevMode,
entry: {
app: "./frontend/js/app.js",
},
output: {
path: path.resolve(__dirname, "book_drips/static"), // Should be in STATICFILES_DIRS
publicPath: "/static/", // Should match Django STATIC_URL
filename: "js/[name].js", // No filename hashing, Django takes care of this
chunkFilename: "[id]-[chunkhash].js", // DO have Webpack hash chunk filename, see below
},
devServer: {
writeToDisk: true, // Write files to disk in dev mode, so Django can serve the assets
port: 8081,
open: false
},
module: {
rules: [
{
test: /.*/,
include: path.resolve(__dirname, "frontend/images"),
exclude: exclusions,
options: {
context: path.resolve(__dirname, "frontend/"),
name: "[path][name].[ext]",
},
loader: "file-loader",
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
include: path.resolve(__dirname, "frontend/fonts"),
options: {
context: path.resolve(__dirname, "frontend/"),
outputPath: 'fonts/'
},
loader: "file-loader",
},
{
test: /\.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
}
]
},
plugins: [
new Dotenv({
systemvars: true
}),
new CleanWebpackPlugin({cleanStaleWebpackAssets: false}),
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "css/[id].css"
}),
new CopyWebpackPlugin({
patterns: [
{from: 'frontend/images', to: 'images'},
{from: 'frontend/fonts', to: 'fonts'},
]
})
],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment