Showing
7 changed files
with
154 additions
and
7 deletions
File moved
assets/scss/config/_variables.scss
0 → 100644
1 | +$bgColor: red; |
... | @@ -18,8 +18,10 @@ | ... | @@ -18,8 +18,10 @@ |
18 | "@babel/core": "^7.9.6", | 18 | "@babel/core": "^7.9.6", |
19 | "@babel/node": "^7.8.7", | 19 | "@babel/node": "^7.8.7", |
20 | "@babel/preset-env": "^7.9.6", | 20 | "@babel/preset-env": "^7.9.6", |
21 | + "autoprefixer": "^9.8.0", | ||
21 | "body-parser": "^1.19.0", | 22 | "body-parser": "^1.19.0", |
22 | "cookie-parser": "^1.4.5", | 23 | "cookie-parser": "^1.4.5", |
24 | + "css-loader": "^3.5.3", | ||
23 | "dotenv": "^8.2.0", | 25 | "dotenv": "^8.2.0", |
24 | "express": "^4.17.1", | 26 | "express": "^4.17.1", |
25 | "extract-text-webpack-plugin": "^4.0.0-beta.0", | 27 | "extract-text-webpack-plugin": "^4.0.0-beta.0", |
... | @@ -27,7 +29,10 @@ | ... | @@ -27,7 +29,10 @@ |
27 | "mongoose": "^5.9.15", | 29 | "mongoose": "^5.9.15", |
28 | "morgan": "^1.10.0", | 30 | "morgan": "^1.10.0", |
29 | "multer": "^1.4.2", | 31 | "multer": "^1.4.2", |
32 | + "node-sass": "^4.14.1", | ||
33 | + "postcss-loader": "^3.0.0", | ||
30 | "pug": "^2.0.4", | 34 | "pug": "^2.0.4", |
35 | + "sass-loader": "^8.0.2", | ||
31 | "webpack": "^4.43.0", | 36 | "webpack": "^4.43.0", |
32 | "webpack-cli": "^3.3.11" | 37 | "webpack-cli": "^3.3.11" |
33 | }, | 38 | }, | ... | ... |
static/main.js
0 → 100644
1 | +/******/ (function(modules) { // webpackBootstrap | ||
2 | +/******/ // The module cache | ||
3 | +/******/ var installedModules = {}; | ||
4 | +/******/ | ||
5 | +/******/ // The require function | ||
6 | +/******/ function __webpack_require__(moduleId) { | ||
7 | +/******/ | ||
8 | +/******/ // Check if module is in cache | ||
9 | +/******/ if(installedModules[moduleId]) { | ||
10 | +/******/ return installedModules[moduleId].exports; | ||
11 | +/******/ } | ||
12 | +/******/ // Create a new module (and put it into the cache) | ||
13 | +/******/ var module = installedModules[moduleId] = { | ||
14 | +/******/ i: moduleId, | ||
15 | +/******/ l: false, | ||
16 | +/******/ exports: {} | ||
17 | +/******/ }; | ||
18 | +/******/ | ||
19 | +/******/ // Execute the module function | ||
20 | +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); | ||
21 | +/******/ | ||
22 | +/******/ // Flag the module as loaded | ||
23 | +/******/ module.l = true; | ||
24 | +/******/ | ||
25 | +/******/ // Return the exports of the module | ||
26 | +/******/ return module.exports; | ||
27 | +/******/ } | ||
28 | +/******/ | ||
29 | +/******/ | ||
30 | +/******/ // expose the modules object (__webpack_modules__) | ||
31 | +/******/ __webpack_require__.m = modules; | ||
32 | +/******/ | ||
33 | +/******/ // expose the module cache | ||
34 | +/******/ __webpack_require__.c = installedModules; | ||
35 | +/******/ | ||
36 | +/******/ // define getter function for harmony exports | ||
37 | +/******/ __webpack_require__.d = function(exports, name, getter) { | ||
38 | +/******/ if(!__webpack_require__.o(exports, name)) { | ||
39 | +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); | ||
40 | +/******/ } | ||
41 | +/******/ }; | ||
42 | +/******/ | ||
43 | +/******/ // define __esModule on exports | ||
44 | +/******/ __webpack_require__.r = function(exports) { | ||
45 | +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { | ||
46 | +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); | ||
47 | +/******/ } | ||
48 | +/******/ Object.defineProperty(exports, '__esModule', { value: true }); | ||
49 | +/******/ }; | ||
50 | +/******/ | ||
51 | +/******/ // create a fake namespace object | ||
52 | +/******/ // mode & 1: value is a module id, require it | ||
53 | +/******/ // mode & 2: merge all properties of value into the ns | ||
54 | +/******/ // mode & 4: return value when already ns object | ||
55 | +/******/ // mode & 8|1: behave like require | ||
56 | +/******/ __webpack_require__.t = function(value, mode) { | ||
57 | +/******/ if(mode & 1) value = __webpack_require__(value); | ||
58 | +/******/ if(mode & 8) return value; | ||
59 | +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; | ||
60 | +/******/ var ns = Object.create(null); | ||
61 | +/******/ __webpack_require__.r(ns); | ||
62 | +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); | ||
63 | +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); | ||
64 | +/******/ return ns; | ||
65 | +/******/ }; | ||
66 | +/******/ | ||
67 | +/******/ // getDefaultExport function for compatibility with non-harmony modules | ||
68 | +/******/ __webpack_require__.n = function(module) { | ||
69 | +/******/ var getter = module && module.__esModule ? | ||
70 | +/******/ function getDefault() { return module['default']; } : | ||
71 | +/******/ function getModuleExports() { return module; }; | ||
72 | +/******/ __webpack_require__.d(getter, 'a', getter); | ||
73 | +/******/ return getter; | ||
74 | +/******/ }; | ||
75 | +/******/ | ||
76 | +/******/ // Object.prototype.hasOwnProperty.call | ||
77 | +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; | ||
78 | +/******/ | ||
79 | +/******/ // __webpack_public_path__ | ||
80 | +/******/ __webpack_require__.p = ""; | ||
81 | +/******/ | ||
82 | +/******/ | ||
83 | +/******/ // Load entry module and return exports | ||
84 | +/******/ return __webpack_require__(__webpack_require__.s = 0); | ||
85 | +/******/ }) | ||
86 | +/************************************************************************/ | ||
87 | +/******/ ({ | ||
88 | + | ||
89 | +/***/ "./assets/js/main.js": | ||
90 | +/*!***************************!*\ | ||
91 | + !*** ./assets/js/main.js ***! | ||
92 | + \***************************/ | ||
93 | +/*! no exports provided */ | ||
94 | +/***/ (function(module, __webpack_exports__, __webpack_require__) { | ||
95 | + | ||
96 | +"use strict"; | ||
97 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _scss_style_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../scss/style.scss */ \"./assets/scss/style.scss\");\n/* harmony import */ var _scss_style_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_scss_style_scss__WEBPACK_IMPORTED_MODULE_0__);\n\n\n\n//# sourceURL=webpack:///./assets/js/main.js?"); | ||
98 | + | ||
99 | +/***/ }), | ||
100 | + | ||
101 | +/***/ "./assets/scss/style.scss": | ||
102 | +/*!********************************!*\ | ||
103 | + !*** ./assets/scss/style.scss ***! | ||
104 | + \********************************/ | ||
105 | +/*! no static exports found */ | ||
106 | +/***/ (function(module, exports) { | ||
107 | + | ||
108 | +eval("// removed by extract-text-webpack-plugin\n\n//# sourceURL=webpack:///./assets/scss/style.scss?"); | ||
109 | + | ||
110 | +/***/ }), | ||
111 | + | ||
112 | +/***/ 0: | ||
113 | +/*!*********************************!*\ | ||
114 | + !*** multi ./assets/js/main.js ***! | ||
115 | + \*********************************/ | ||
116 | +/*! no static exports found */ | ||
117 | +/***/ (function(module, exports, __webpack_require__) { | ||
118 | + | ||
119 | +eval("module.exports = __webpack_require__(/*! /Users/noblyan/Desktop/Project/myYoutube/assets/js/main.js */\"./assets/js/main.js\");\n\n\n//# sourceURL=webpack:///multi_./assets/js/main.js?"); | ||
120 | + | ||
121 | +/***/ }) | ||
122 | + | ||
123 | +/******/ }); | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
static/style.css
0 → 100644
1 | const path = require("path"); | 1 | const path = require("path"); |
2 | +const autoprefixer = require("autoprefixer"); | ||
2 | const ExtractCSS = require("extract-text-webpack-plugin"); | 3 | const ExtractCSS = require("extract-text-webpack-plugin"); |
3 | 4 | ||
4 | const MODE = process.env.WEBPACK_ENV; | 5 | const MODE = process.env.WEBPACK_ENV; |
... | @@ -6,30 +7,44 @@ const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js"); | ... | @@ -6,30 +7,44 @@ const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js"); |
6 | const OUTPUT_DIR = path.join(__dirname, "static"); | 7 | const OUTPUT_DIR = path.join(__dirname, "static"); |
7 | 8 | ||
8 | const config = { | 9 | const config = { |
9 | - entry: ENTRY_FILE, | 10 | + entry: [ENTRY_FILE], |
10 | mode: MODE, | 11 | mode: MODE, |
11 | module: { | 12 | module: { |
12 | rules: [ | 13 | rules: [ |
13 | { | 14 | { |
14 | - test: /\.(scss|sass)$/, | 15 | + test: /\.{js}$/, |
15 | - use: ExtractCSS.extract( | 16 | + use: [ |
17 | + { | ||
18 | + loader: "babel-loader", | ||
19 | + }, | ||
20 | + ], | ||
21 | + }, | ||
22 | + { | ||
23 | + test: /\.(scss)$/, | ||
24 | + use: ExtractCSS.extract([ | ||
16 | { | 25 | { |
17 | loader: "css-loader", | 26 | loader: "css-loader", |
18 | }, | 27 | }, |
19 | { | 28 | { |
20 | loader: "postcss-loader", | 29 | loader: "postcss-loader", |
30 | + options: { | ||
31 | + plugins() { | ||
32 | + return [autoprefixer({ browsers: "cover 99.5%" })]; | ||
33 | + }, | ||
34 | + }, | ||
21 | }, | 35 | }, |
22 | { | 36 | { |
23 | loader: "sass-loader", | 37 | loader: "sass-loader", |
24 | - } | 38 | + }, |
25 | - ), | 39 | + ]), |
26 | }, | 40 | }, |
27 | ], | 41 | ], |
28 | }, | 42 | }, |
29 | output: { | 43 | output: { |
30 | path: OUTPUT_DIR, | 44 | path: OUTPUT_DIR, |
31 | - filename: "[name].[format]", | 45 | + filename: "[name].js", |
32 | }, | 46 | }, |
47 | + plugins: [new ExtractCSS("style.css")], | ||
33 | }; | 48 | }; |
34 | 49 | ||
35 | module.exports = config; | 50 | module.exports = config; | ... | ... |
-
Please register or login to post a comment