Last active
August 21, 2017 15:24
-
-
Save danilosilvadev/8bb50f7c790c0cd6d31442050dfcc70b to your computer and use it in GitHub Desktop.
Webpack+react+redux+babel config article at medium https://medium.com/@danilosilvadev/webpack-react-redux-babel-config-in-10-minutes-4ad8c4abc8b2
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": [ | |
| "react", | |
| "es2015" | |
| ], | |
| "plugins": [ | |
| "react-hot-loader/babel" | |
| ] | |
| } |
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
| //This will be inside src/components | |
| import React, { Component } from 'react'; | |
| const Container = () => { | |
| return <h1>Hello World!</h1> | |
| } | |
| export default Container |
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
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>React App</title> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script src="dist/build/main.bundle.js"></script> | |
| </body> | |
| </html> |
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
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| import Container from './src/components/container'; | |
| ReactDOM.render( | |
| <Container />, | |
| document.getElementById('root') | |
| ); | |
| //PS: You need to create and export this "container component" in src to work ok? |
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": "code", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "index.js", | |
| "scripts": { | |
| "build": "webpack", | |
| "start": "webpack-dev-server --open", | |
| "build:dev": "webpack --env=dev --progress --profile --colors", | |
| "build:dist": "webpack --env=prod --progress --profile --colors" | |
| }, | |
| "keywords": [], | |
| "author": "", | |
| "license": "ISC", | |
| "devDependencies": { | |
| "babel-core": "^6.25.0", | |
| "babel-loader": "^7.1.1", | |
| "babel-preset-env": "^1.6.0", | |
| "babel-preset-es2015": "^6.24.1", | |
| "babel-preset-react": "^6.24.1", | |
| "css-loader": "^0.28.4", | |
| "file-loader": "^0.11.2", | |
| "html-webpack-plugin": "^2.30.1", | |
| "style-loader": "^0.18.2", | |
| "webpack": "^3.4.1", | |
| "webpack-dev-server": "^2.6.1" | |
| }, | |
| "dependencies": { | |
| "lodash": "^4.17.4", | |
| "react": "^15.6.1", | |
| "react-dom": "^15.6.1", | |
| "react-flexbox-grid": "^1.1.3", | |
| "react-hot-loader": "^3.0.0-beta.7", | |
| "react-redux": "^5.0.5", | |
| "react-router": "^4.1.2", | |
| "react-router-dom": "^4.1.2", | |
| "redux": "^3.7.2", | |
| "styled-components": "^2.1.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
| var path = require('path'); | |
| const webpack = require('webpack'); | |
| const publicPath = '/dist/build/'; | |
| const HtmlWebpackPlugin = require('html-webpack-plugin'); | |
| module.exports = { | |
| //Content | |
| entry: './index.js', | |
| // A SourceMap without column-mappings ignoring loaded Source Maps. | |
| devtool: 'cheap-module-source-map', | |
| plugins: [ | |
| //simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader. | |
| new HtmlWebpackPlugin({ | |
| title: 'Hot Module Replacement' | |
| }), | |
| //Auto replacement of page when i save some file, even css | |
| new webpack.HotModuleReplacementPlugin() | |
| ], | |
| output: { | |
| path: path.join(__dirname, publicPath), | |
| filename: '[name].bundle.js', | |
| publicPath: publicPath, | |
| sourceMapFilename: '[name].map', | |
| }, | |
| devServer: { | |
| port: 3000, | |
| host: 'localhost', | |
| //Be possible go back pressing the "back" button at chrome | |
| historyApiFallback: true, | |
| noInfo: false, | |
| stats: 'minimal', | |
| publicPath: publicPath, | |
| contentBase: path.join(__dirname, publicPath), | |
| //hotmodulereplacementeplugin | |
| hot: true | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.css$/, use: ['style-loader', 'css-loader'], | |
| include: /flexboxgrid/ | |
| //Follow instructions at https://github.com/roylee0704/react-flexbox-grid | |
| }, | |
| { | |
| test: /\.(png|svg|jpg|gif)$/, | |
| use: ['file-loader'] | |
| }, | |
| { | |
| test: /\.js|.jsx?$/, | |
| exclude: /(node_modules)/, | |
| loaders: ["babel-loader"] | |
| }] | |
| }, | |
| } |
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
| const publicPath = '/dist/build/'; | |
| var path = require('path'); | |
| const webpack = require('webpack'); | |
| module.exports = { | |
| entry: './index.js', | |
| output: { | |
| path: path.join(__dirname, '/dist/assets'), | |
| filename: '[name].bundle.js', | |
| publicPath: publicPath, | |
| sourceMapFilename: '[name].map' | |
| }, | |
| plugins: [ | |
| new webpack.LoaderOptionsPlugin({ | |
| minimize: true, | |
| debug: false | |
| }), | |
| new webpack.optimize.UglifyJsPlugin({ | |
| beautify: false, | |
| mangle: { | |
| screw_ie8: true, | |
| keep_fnames: true | |
| }, | |
| compress: { | |
| screw_ie8: true | |
| }, | |
| comments: false | |
| }) | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment