Skip to content

Instantly share code, notes, and snippets.

@gollum23
Forked from mburakerman/package.json
Created November 12, 2018 15:27
Show Gist options
  • Save gollum23/b766aafd047832068a94bcacbc53d7e3 to your computer and use it in GitHub Desktop.
Save gollum23/b766aafd047832068a94bcacbc53d7e3 to your computer and use it in GitHub Desktop.
Webpack 4 config.js (Stylus to CSS and Babel) πŸ‘Œ The Simplest Usage πŸ‘Œ
{
"name": "webpack-stylus",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.11",
"style-loader": "^0.20.3",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.1"
}
}
/* === dont forget to import style to main.js file === */
/* ===> import './main.styl'; <=== */
var path = require("path");
module.exports = {
entry: "./main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/dist"
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: { presets: ["es2015"] }
}
},
{
test: /\.styl$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "stylus-loader" // compiles Stylus to CSS
}
]
}
]
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment