Skip to content

Instantly share code, notes, and snippets.

@danilosilvadev

danilosilvadev/.babelrc

Created October 16, 2017 17:03
Show Gist options
  • Save danilosilvadev/3834148afcfbf1ccc6547a9fb25cb6cd to your computer and use it in GitHub Desktop.
Save danilosilvadev/3834148afcfbf1ccc6547a9fb25cb6cd to your computer and use it in GitHub Desktop.
Download ZIP
Webpack config 2017
Raw
.babelrc
{
"presets": ["es2015", "react"],
"plugins": [
["transform-class-properties", { "spec": true }]
]
}
Raw
.gitignore
/dist
/node_modules
/.vs
*.log
Raw
index.html
<!DOCTYPE html>
<!-- src/index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
Raw
index.js
//src/app/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Component from './components/component';
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(<BrowserRouter><Component /></BrowserRouter>, document.getElementById('root'));
Raw
karma.conf.js
const webpack = require('webpack');
const path = require('path');
module.exports = function(config) {
config.set({
browsers: ['Chrome'],
singleRun: true,
frameworks: ['mocha'],
files: ['src/app/tests/unit-tests/**/*.test.js'],
preprocessors: {
'src/app/tests/unit-tests/**/*.test.js':['webpack', 'sourcemap']
},
reporters: ['mocha'],
client: {
mocha: {
timeout: '5000'
}
},
webpack: { //kind of a copy of your webpack config
devtool: 'inline-source-map', //just do inline source maps instead of the default
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname, 'node_modules'),
query: {
presets: ['airbnb']
}
},
{
test: /\.scss|css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(eot|woff|woff2|ttf|svg|ico|png|jpe?g|gif)(\?\S*)?$/,
use: ['file-loader']
}
]
}
},
webpackServer: {
noInfo: true
},
babelPreprocessor: {
options: {
presets: ['airbnb']
}
}
});
};
Raw
myComponent.js
//src/app/components/myComponent.js
import React, { Component } from 'react'
const MyComponent = () => {
return <h1>Wow! That was fast!</h1>;
}
export default MyComponent
Raw
package.json
{
"name": "website",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "karma start",
"start": "npm run build",
"build": "webpack-dev-server --env=dev --progress --profile --colors",
"prod": "npm run clean && webpack --env=prod --progress --profile --colors",
"clean": "rimraf ./dist/*"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"prop-types": "^15.6.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-icons": "^2.2.5",
"react-router-dom": "^4.1.2",
"styled-components": "^2.1.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-airbnb": "^2.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.5",
"enzyme": "^2.9.1",
"expect": "^1.20.2",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^3.3.1",
"jquery": "^3.2.1",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.3",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.4",
"mocha": "^3.5.0",
"node-sass": "^4.5.3",
"react-addons-test-utils": "^15.6.0",
"react-routes": "^0.2.6",
"react-test-renderer": "^15.6.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
}
}
Raw
webpack.config.js
module.exports = function(env) {
return require(`./webpack.${env}.js`)
}
Raw
webpack.dev.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: { index: './src/app/index.js'
},
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.scss|css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
publicPath: '/'
}
}
]
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'src'),
hot: true,
historyApiFallback: true,
port: 4200,
stats: "errors-only",
open: false
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
};
Raw
webpack.prod.js
const path = require('path');
const optimize = require('webpack').optimize;
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
bundle: path.resolve(__dirname, 'src') + '/app/index.js',
vendor: ['react', 'react-dom', 'react-router-dom']
},
output: {
path: path.resolve(__dirname, 'dist') + '/app',
filename: '[name].[hash].js',
sourceMapFilename: '[name].map'
},
module: {
rules: [
{
test: /.js[x]?$/,
include: path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname, 'node_modules'),
use: 'babel-loader',
},
{
test: /\.scss|css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(eot|woff|woff2|ttf|svg|ico|png|jpe?g|gif)$/,
use: ['file-loader?name=[name].[ext]&outputPath=app/assets/images/',
'image-webpack-loader']
},
]
},
plugins: [
/*new optimize.UglifyJsPlugin(),
new optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),*/
new HtmlWebpackPlugin({
template: './src/index.html',
hash: true
}),
new webpack.NamedModulesPlugin(),
new ExtractTextPlugin('app.css')
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment