Last active
April 27, 2017 19:58
-
-
Save henriquejensen/0b6d38b7af39a48fcf64c30c7692796c to your computer and use it in GitHub Desktop.
Simple configuration Webpack 2, webpack-dev-server and React
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"presets": [ | |
"es2015", | |
"react", | |
"stage-1" | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "example", | |
"version": "1.0.0", | |
"description": "Simple configuration Webpack 2, webpack-dev-server and React", | |
"main": "index.js", | |
"scripts": { | |
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --colors", | |
"test": "echo \"Error: no test specified\" && exit 1" | |
}, | |
"repository": "", | |
"keywords": [ | |
"webpack", | |
"2", | |
"configuration" | |
], | |
"author": "Henrique Jensen", | |
"license": "ISC", | |
"bugs": { | |
"url": "https://github.com/henriquejensen/60-days-of-React/issues" | |
}, | |
"homepage": "", | |
"devDependencies": { | |
"babel": "^6.23.0", | |
"babel-core": "^6.24.1", | |
"babel-loader": "^6.4.1", | |
"babel-preset-env": "^1.3.3", | |
"babel-preset-es2015": "^6.24.1", | |
"babel-preset-react": "^6.24.1", | |
"babel-preset-stage-1": "^6.1.18", | |
"css-loader": "^0.28.0", | |
"path": "^0.12.7", | |
"style-loader": "^0.16.1", | |
"webpack": "^2.3.3", | |
"webpack-dev-server": "^2.4.2" | |
}, | |
"dependencies": { | |
"react": "^15.5.3", | |
"react-dom": "^15.5.3" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//No terminal do linux | |
npm add webpack webpack-dev-server path babel-loader babel-co | |
re babel-preset-es2015 babel-preset-react -D && npm add react react-dom | |
//No powershell do windows | |
npm add webpack webpack-dev-server path babel-loader babel-co | |
re babel-preset-es2015 babel-preset-react -D -and npm add react react-dom |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*Path is necessary to take the absolut path | |
ex: /home/document/folder/file.js => path.resolve(__dirname, "file") */ | |
const path = require("path"); | |
const webpack = require('webpack'); | |
/*Configuration following the https://webpack.js.org/concepts/ */ | |
module.exports = { | |
entry: "./src/index.js", | |
output: { | |
path: path.resolve(__dirname, "./public"), | |
filename: "bundle.js", | |
publicPath: '/public', | |
}, | |
devServer: { | |
inline: true, | |
port: 2020 | |
}, | |
module: { | |
rules: [ | |
{ | |
test: /\.js$/, | |
exclude: /node_modules/, | |
use: "babel-loader" | |
} | |
] | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment