Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save DariuszLuber/374f0d0d816e76ba6d963ba72f53caf2 to your computer and use it in GitHub Desktop.
Save DariuszLuber/374f0d0d816e76ba6d963ba72f53caf2 to your computer and use it in GitHub Desktop.
Webpack + ES6 + Sass + Live reload
//FOR ES6 ONLY
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry : {
'js/out.js': './js/app.js',
'css/style.css~': './css/main.scss'
},
output : {
path: __dirname+'/',
filename: '[name]'
},
devServer: {
inline: true,
contentBase: './',
port: 3001
},
watch: true,
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: ['es2015'] }
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(png|jpg|gif)$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
},
plugins: [
new ExtractTextPlugin('./css/style.css')
]
};
{
"name": "ReactAndEs6WebPackBasicPackages",
"version": "1.0.0",
"description": "## Basic config to start working with ES6 and React",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wp": "./node_modules/.bin/webpack",
"serve": "./node_modules/.bin/webpack-dev-server --hot"
},
"author": "Dariusz Luber",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.5",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"react-router": "^3.0.3",
"whatwg-fetch": "^2.0.3",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
}
}
- src
- jsx
- template
- Main.jsx
- search
- Form.jsx
- list
- CatList.jsx
- Cat.jsx
- scss
- partials
-
-
- dist
- js -> out.js
- css -> main.css
- images
- node_modules //tylko pakiety produkcyjne -> $ npm i --prod
- package.json
- webpack.config.js
- index.html
//FOR REACT
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: ["whatwg-fetch","./src/jsx/App.jsx","./src/scss/style.scss"],
output: { filename: "./dist/js/out.js" },
devServer: {
inline: true,
contentBase: './',
port: 3001
},
watch: true,
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: ['es2015', 'stage-2', 'react'] }
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(png|jpg|gif)$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
},
plugins: [
new ExtractTextPlugin('./dist/css/style.css')
]
};

#Webpack + ES6 + Sass + Live reload

Basic example of webpack config to work with sass, es6 and live reload.

To get live reload working you need:

  • get package.json and webpack.config.js to your project foldee
  • run in terminal npm install
  • add this script <script src="http://localhost:35729/livereload.js"></script> to your index.html
  • create src folder and src files
  • run in terminal webpack

Don't forget to add final css and js file to your site ;)

That's it :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment