Skip to content

Instantly share code, notes, and snippets.

@tonysaffo
Created October 16, 2018 22:47
Show Gist options
  • Save tonysaffo/012925a9acbcccad7b9e8efd4a1d7ea4 to your computer and use it in GitHub Desktop.
Save tonysaffo/012925a9acbcccad7b9e8efd4a1d7ea4 to your computer and use it in GitHub Desktop.
Webpack simple confing (Scss + Html watcher)
{
"name": "testmock",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack-dev-server"
},
"author": "",
"license": "MIT",
"devDependencies": {
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.4",
"raw-loader": "^0.5.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
}
}
var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist'
},
mode: 'development',
module: {
rules: [
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment