Add sass and hot reloading
Browse files- assets/scripts/src/sholo.js +1 -0
- assets/styles/scss/sholo.scss +1 -0
- index.html +2 -2
- package.json +11 -2
- postcss.config.js +5 -0
- webpack.dev.config.js +16 -3
- yarn.lock +0 -0
assets/scripts/src/sholo.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
console.log('hello!');
|
assets/styles/scss/sholo.scss
CHANGED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
@import "base";
|
index.html
CHANGED
|
@@ -5,7 +5,7 @@
|
|
| 5 |
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
| 6 |
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
| 7 |
<title>Sholo</title>
|
| 8 |
-
<link rel="stylesheet" href="./assets/styles/css/sholo.
|
| 9 |
</head>
|
| 10 |
<body>
|
| 11 |
<div class="page-wrap">
|
|
@@ -27,6 +27,6 @@
|
|
| 27 |
</section>
|
| 28 |
</div>
|
| 29 |
|
| 30 |
-
<script src="./assets/scripts/dist/sholo.
|
| 31 |
</body>
|
| 32 |
</html>
|
|
|
|
| 5 |
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
| 6 |
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
| 7 |
<title>Sholo</title>
|
| 8 |
+
<link rel="stylesheet" href="./assets/styles/css/sholo.css">
|
| 9 |
</head>
|
| 10 |
<body>
|
| 11 |
<div class="page-wrap">
|
|
|
|
| 27 |
</section>
|
| 28 |
</div>
|
| 29 |
|
| 30 |
+
<script src="./assets/scripts/dist/sholo.js"></script>
|
| 31 |
</body>
|
| 32 |
</html>
|
package.json
CHANGED
|
@@ -10,19 +10,28 @@
|
|
| 10 |
"author": "Kamran Ahmed <[email protected]>",
|
| 11 |
"license": "MIT",
|
| 12 |
"devDependencies": {
|
|
|
|
| 13 |
"babel-eslint": "^8.2.2",
|
| 14 |
"babel-loader": "^7.1.3",
|
| 15 |
"babel-preset-env": "^1.6.1",
|
|
|
|
| 16 |
"eslint": "^4.18.2",
|
| 17 |
"eslint-config-airbnb-base": "^12.1.0",
|
| 18 |
"eslint-loader": "^2.0.0",
|
| 19 |
"eslint-plugin-import": "^2.9.0",
|
| 20 |
"eslint-plugin-node": "^6.0.1",
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 21 |
"webpack": "^4.0.1",
|
|
|
|
| 22 |
"webpack-dev-server": "^3.1.0"
|
| 23 |
-
"babel-core": "^6.26.0",
|
| 24 |
-
"opn": "^5.2.0"
|
| 25 |
},
|
| 26 |
"dependencies": {
|
|
|
|
| 27 |
}
|
| 28 |
}
|
|
|
|
| 10 |
"author": "Kamran Ahmed <[email protected]>",
|
| 11 |
"license": "MIT",
|
| 12 |
"devDependencies": {
|
| 13 |
+
"babel-core": "^6.26.0",
|
| 14 |
"babel-eslint": "^8.2.2",
|
| 15 |
"babel-loader": "^7.1.3",
|
| 16 |
"babel-preset-env": "^1.6.1",
|
| 17 |
+
"css-loader": "^0.28.10",
|
| 18 |
"eslint": "^4.18.2",
|
| 19 |
"eslint-config-airbnb-base": "^12.1.0",
|
| 20 |
"eslint-loader": "^2.0.0",
|
| 21 |
"eslint-plugin-import": "^2.9.0",
|
| 22 |
"eslint-plugin-node": "^6.0.1",
|
| 23 |
+
"extract-loader": "^1.0.2",
|
| 24 |
+
"file-loader": "^1.1.11",
|
| 25 |
+
"node-sass": "^4.7.2",
|
| 26 |
+
"opn": "^5.2.0",
|
| 27 |
+
"postcss-loader": "^2.1.1",
|
| 28 |
+
"sass-loader": "^6.0.7",
|
| 29 |
+
"style-loader": "^0.20.2",
|
| 30 |
"webpack": "^4.0.1",
|
| 31 |
+
"webpack-cli": "^2.0.10",
|
| 32 |
"webpack-dev-server": "^3.1.0"
|
|
|
|
|
|
|
| 33 |
},
|
| 34 |
"dependencies": {
|
| 35 |
+
"extract-text-webpack-plugin": "next"
|
| 36 |
}
|
| 37 |
}
|
postcss.config.js
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
module.exports = {
|
| 2 |
+
plugins: {
|
| 3 |
+
autoprefixer: {},
|
| 4 |
+
},
|
| 5 |
+
};
|
webpack.dev.config.js
CHANGED
|
@@ -1,14 +1,17 @@
|
|
| 1 |
const path = require('path');
|
|
|
|
| 2 |
|
| 3 |
module.exports = {
|
| 4 |
mode: 'development',
|
| 5 |
entry: [
|
|
|
|
| 6 |
'./assets/scripts/src/sholo.js',
|
|
|
|
| 7 |
],
|
| 8 |
output: {
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
filename: 'sholo.
|
| 12 |
libraryTarget: 'umd',
|
| 13 |
library: 'Sholo',
|
| 14 |
},
|
|
@@ -32,8 +35,18 @@ module.exports = {
|
|
| 32 |
presets: ['env'],
|
| 33 |
},
|
| 34 |
},
|
|
|
|
|
|
|
|
|
|
|
|
|
| 35 |
],
|
| 36 |
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 37 |
stats: {
|
| 38 |
colors: true,
|
| 39 |
},
|
|
|
|
| 1 |
const path = require('path');
|
| 2 |
+
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
| 3 |
|
| 4 |
module.exports = {
|
| 5 |
mode: 'development',
|
| 6 |
entry: [
|
| 7 |
+
'webpack-dev-server/client?http://localhost:3000',
|
| 8 |
'./assets/scripts/src/sholo.js',
|
| 9 |
+
'./assets/styles/scss/sholo.scss',
|
| 10 |
],
|
| 11 |
output: {
|
| 12 |
+
path: path.join(__dirname, '/assets'),
|
| 13 |
+
publicPath: '/assets/',
|
| 14 |
+
filename: 'scripts/dist/sholo.js',
|
| 15 |
libraryTarget: 'umd',
|
| 16 |
library: 'Sholo',
|
| 17 |
},
|
|
|
|
| 35 |
presets: ['env'],
|
| 36 |
},
|
| 37 |
},
|
| 38 |
+
{
|
| 39 |
+
test: /.scss$/,
|
| 40 |
+
loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
|
| 41 |
+
},
|
| 42 |
],
|
| 43 |
},
|
| 44 |
+
plugins: [
|
| 45 |
+
new ExtractTextPlugin({
|
| 46 |
+
filename: 'styles/css/sholo.css',
|
| 47 |
+
allChunks: true,
|
| 48 |
+
}),
|
| 49 |
+
],
|
| 50 |
stats: {
|
| 51 |
colors: true,
|
| 52 |
},
|
yarn.lock
CHANGED
|
The diff for this file is too large to render.
See raw diff
|
|
|