Last active
September 7, 2018 05:12
-
-
Save prad9/6daec7b3a1c49a2536ef26239e484c65 to your computer and use it in GitHub Desktop.
React Webpack4 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
Show hidden characters
{ | |
"presets": [ | |
["env", { | |
"targets": { | |
"browsers": [ | |
"> 1%", | |
"last 2 versions" | |
] | |
} | |
}], | |
"stage-2", | |
"react" | |
], | |
"plugins": [ | |
"syntax-dynamic-import" | |
] | |
} |
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": "test", | |
"version": "1.0.0", | |
"description": "", | |
"main": "index.js", | |
"repository": "", | |
"dependencies": { | |
"prop-types": "^15.6.1", | |
"react": "^16.4.0", | |
"react-dom": "^16.4.0", | |
"react-redux": "^5.0.7", | |
"react-router": "^4.2.0", | |
"react-router-dom": "^4.2.2", | |
"redux": "^4.0.0", | |
"redux-form": "^7.3.0" | |
}, | |
"devDependencies": { | |
"autoprefixer": "^8.5.1", | |
"babel-core": "^6.26.3", | |
"babel-loader": "^7.1.4", | |
"babel-plugin-syntax-dynamic-import": "^6.18.0", | |
"babel-preset-env": "^1.7.0", | |
"babel-preset-react": "^6.24.1", | |
"babel-preset-stage-2": "^6.24.1", | |
"css-loader": "^0.28.11", | |
"file-loader": "^1.1.11", | |
"postcss-loader": "^2.1.5", | |
"style-loader": "^0.21.0", | |
"url-loader": "^1.0.1", | |
"webpack": "^4.9.1", | |
"webpack-cli": "^2.1.4", | |
"webpack-dev-server": "^3.1.4" | |
}, | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1", | |
"start": "rimraf dist && webpack --mode development --progress --profile --color" | |
}, | |
"author": "Pradeep Vattikuti", | |
"license": "ISC" | |
} |
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 path = require("path"); | |
const autoprefixer = require("autoprefixer"); | |
console.log("Output path:", path.resolve(__dirname, "dist")); | |
module.exports = { | |
devtool: "cheap-module-eval-source-map", | |
entry: "./Scripts/index.jsx", | |
mode: "development", | |
output: { | |
path: path.resolve(__dirname, "dist"), | |
filename: "bundle.js", | |
chunkFilename: "[id].js", | |
publicPath: "" | |
}, | |
resolve: { | |
extensions: [".js", ".jsx"] | |
}, | |
module: { | |
rules: [ | |
{ | |
test: /\.(js|jsx)$/, | |
exclude: /node_modules/, | |
use: { | |
loader: "babel-loader" | |
} | |
}, | |
{ | |
test: /\.css$/, | |
exclude: /node_modules/, | |
use: [ | |
{ loader: "style-loader" }, | |
{ | |
loader: "css-loader", | |
options: { | |
importLoaders: 1, | |
modules: true, | |
localIdentName: "[name]__[local]__[hash:base64:5]" | |
} | |
}, | |
{ | |
loader: "postcss-loader", | |
options: { | |
ident: "postcss", | |
plugins: () => [ | |
autoprefixer({ | |
browsers: [ | |
"> 1%", | |
"last 2 versions" | |
] | |
}) | |
] | |
} | |
} | |
] | |
}, | |
{ | |
test: /\.(png|jpe?g|gif)$/, | |
loader: "url-loader?limit=8000&name=images/[name].[ext]" | |
} | |
] | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment