Skip to content

Instantly share code, notes, and snippets.

@stivncastillo
Created August 23, 2018 06:00
Show Gist options
  • Save stivncastillo/f2fb6679998f8d4223dab1fedd071912 to your computer and use it in GitHub Desktop.
Save stivncastillo/f2fb6679998f8d4223dab1fedd071912 to your computer and use it in GitHub Desktop.
Webpack + React + Sass
{
"name": "webpack-r",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack-dev-server",
"build:prod": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^2.1.2",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
/*
=== don't forge to add style file to html ===
<link rel="stylesheet" type="text/css" href="./dist/bundle.css">
*/
/* === quick try ===
import React from 'react';
import ReactDOM from 'react-dom';
import './main.css';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
*/
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractPlugin = new ExtractTextPlugin({
filename: 'bundle.css'
});
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist'
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015' ,'react']
}
}
]
},
{
test: /\.scss$/, // made scss
use: extractPlugin.extract({
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
extractPlugin
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment