Skip to content

Instantly share code, notes, and snippets.

@DariuszLuber
Last active September 27, 2018 09:37
Show Gist options
  • Save DariuszLuber/5351d6e7c40392bb875e7683ae841a09 to your computer and use it in GitHub Desktop.
Save DariuszLuber/5351d6e7c40392bb875e7683ae841a09 to your computer and use it in GitHub Desktop.
WEBPACK 4 CONFIG - ES6
{
"name": "webpacka-init",
"version": "1.0.0",
"description": "<img alt=\"Logo\" src=\"http://coderslab.pl/svg/logo-coderslab.svg\" width=\"400\">",
"main": "index.js",
"scripts": {
"watch": "node_modules/.bin/webpack -w",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"browser-sync": "^2.24.7",
"browser-sync-webpack-plugin": "^2.2.2",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.3",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-livereload-plugin": "^2.1.1",
"webpack-node-externals": "^1.7.2"
}
}
const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
entry: './js/app.js',
output: {
path: path.resolve(__dirname, 'js'),
filename: "out.js",
publicPath: './js/'
},
mode: "development",
devtool: "source-map",
watch: true,
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
reload: true,
server: {
baseDir: ['./']
}
})
],
module: {
rules: [
{
test: /\.js?$/,
exclude: [
path.resolve(__dirname, 'node_modules')
],
loader: 'babel-loader',
options: {
presets: ['es2015'],
sourceMap: true,
}
},
{
test: /\.scss?$/,
exclude: [
path.resolve(__dirname, 'node_modules')
],
loader: 'style-loader!css-loader!sass-loader',
},
{
test: /\.html?$/,
exclude: [
path.resolve(__dirname, 'node_modules')
],
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
},
},
{
test: /\.(png|jpg|gif)$/,
exclude: [
path.resolve(__dirname, 'node_modules')
],
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment