Created
April 10, 2019 02:52
-
-
Save hxmwr/6051f6d7436fc8b3bdb0b69d81ffa206 to your computer and use it in GitHub Desktop.
SPA auto reload javascript and scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "datepicker", | |
"version": "1.0.0", | |
"description": "another datepicker", | |
"main": "src/index.js", | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1", | |
"build": "webpack", | |
"dev": "webpack-dev-server" | |
}, | |
"keywords": [ | |
"datepicker", | |
"javascript", | |
"chrome" | |
], | |
"author": "", | |
"license": "ISC", | |
"devDependencies": { | |
"css-loader": "^2.1.1", | |
"file-loader": "^3.0.1", | |
"html-webpack-plugin": "^3.2.0", | |
"mini-css-extract-plugin": "^0.5.0", | |
"node-sass": "^4.11.0", | |
"postcss-loader": "^3.0.0", | |
"sass-loader": "^7.1.0", | |
"style-loader": "^0.23.1", | |
"webpack": "^4.29.6", | |
"webpack-cli": "^3.3.0", | |
"webpack-dev-server": "^3.3.0" | |
}, | |
"dependencies": {} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const path = require('path'); | |
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); | |
const HtmlWebpackPlugin = require('html-webpack-plugin'); | |
module.exports = { | |
devServer: { | |
contentBase: path.join(__dirname, 'dist'), | |
compress: true, | |
port: 9000, | |
hot: true | |
}, | |
entry: './src/index.js', | |
output: { | |
filename: 'main.js', | |
path: path.resolve(__dirname, 'dist') | |
}, | |
plugins: [ | |
new MiniCssExtractPlugin({ | |
// Options similar to the same options in webpackOptions.output | |
// both options are optional | |
filename: '[name].css', | |
chunkFilename: '[id].css' | |
}), | |
new HtmlWebpackPlugin({ | |
template: "src/index.html" | |
}), | |
], | |
module: { | |
rules: [ | |
{ | |
test: /\.(sa|sc|c)ss$/, | |
use: [ | |
{ | |
loader: 'style-loader', | |
options: { | |
hmr: true | |
} | |
}, | |
// MiniCssExtractPlugin.loader, | |
'css-loader', | |
'sass-loader', | |
], | |
} | |
] | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment