Skip to content

Instantly share code, notes, and snippets.

@koddr
Last active March 5, 2022 18:18
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save koddr/3d8be47815dce570fcf251a13a3812af to your computer and use it in GitHub Desktop.
Save koddr/3d8be47815dce570fcf251a13a3812af to your computer and use it in GitHub Desktop.
Webpack 3 config for simple Django/Flask project with Autoprefixer, PostCSS, SCSS style files, Vue.js and Babel
{
"presets": ["@babel/preset-env"]
}
{
"name": "my_project",
"version": "1.0.0",
"description": "My project description.",
"engines": {
"node": ">=7.0"
},
"author": "Vic Shóstak",
"license": "MIT",
"repository": {},
"scripts": {
"build": "webpack --config webpack.config.js --optimize-minimize --display-error-details --hide-modules --progress",
"watch": "webpack --config webpack.config.js --watch --hide-modules --progress"
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"dependencies": {
"axios": "^0.17.1",
"bulma": "^0.6.1",
"bulma-checkradio": "^0.1.4",
"bulma-divider": "^0.1.0",
"vue": "^2.5.10",
"webfontloader": "^1.6.28"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.34",
"@babel/preset-env": "^7.0.0-beta.34",
"autoprefixer": "^7.2.3",
"babel-loader": "^8.0.0-beta.0",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.7.2",
"postcss-loader": "^2.0.9",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"vue-loader": "^13.5.0",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.10",
"webpack": "^3.10.0"
}
}
module.exports = {
plugins: [
require('autoprefixer')
]
}
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
entry: {
'js/script.min.js': './static/assets/js/script.js',
'css/style.min.css': './static/assets/scss/style.scss'
},
output: {
path: path.resolve(__dirname, './static'),
filename: '[name]'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
},
{
test: /\.(css|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
minimize: true
}
},
{loader: 'postcss-loader'},
{loader: 'sass-loader'}
]
})
},
{
test: /\.vue$/,
loader: "vue-loader",
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader'
}
}
}
]
},
resolve: {
alias: {
'vue$':
'vue/dist/vue.esm.js'
}
},
plugins: [
new ExtractTextPlugin('[name]'),
new webpack.LoaderOptionsPlugin({
vue: {
loaders: {
scss: 'style!css!scss'
}
}
})
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment