Skip to content

Instantly share code, notes, and snippets.

@hxmwr
Created April 10, 2019 02:52
Show Gist options
  • Save hxmwr/6051f6d7436fc8b3bdb0b69d81ffa206 to your computer and use it in GitHub Desktop.
Save hxmwr/6051f6d7436fc8b3bdb0b69d81ffa206 to your computer and use it in GitHub Desktop.
SPA auto reload javascript and scss
{
"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": {}
}
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