Flare-k

[Test] Webpack

import "../scss/style.scss";
body {
background-color: red;
}
......@@ -4,7 +4,9 @@
"description": "make Youtube Website",
"main": "app.js",
"scripts": {
"start": "nodemon --exec babel-node init.js --delay 2"
"dev:server": "nodemon --exec babel-node init.js --delay 2",
"dev:assets": "WEBPACK_ENV=development webpack",
"build:assets": "WEBPACK_ENV=production webpack"
},
"repository": {
"type": "git",
......@@ -20,11 +22,14 @@
"cookie-parser": "^1.4.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"helmet": "^3.22.0",
"mongoose": "^5.9.15",
"morgan": "^1.10.0",
"multer": "^1.4.2",
"pug": "^2.0.4"
"pug": "^2.0.4",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"devDependencies": {
"eslint": "^6.8.0",
......
const path = require("path");
const ExtractCSS = require("extract-text-webpack-plugin");
const MODE = process.env.WEBPACK_ENV;
const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js");
const OUTPUT_DIR = path.join(__dirname, "static");
const config = {
entry: ENTRY_FILE,
mode: MODE,
module: {
rules: [
{
test: /\.(scss|sass)$/,
use: ExtractCSS.extract(
{
loader: "css-loader",
},
{
loader: "postcss-loader",
},
{
loader: "sass-loader",
}
),
},
],
},
output: {
path: OUTPUT_DIR,
filename: "[name].[format]",
},
};
module.exports = config;