Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wp-kitten/73b0fbe59da73c259dbf99e5ef656cf4 to your computer and use it in GitHub Desktop.
Save wp-kitten/73b0fbe59da73c259dbf99e5ef656cf4 to your computer and use it in GitHub Desktop.
* The least working version for Custom Build React app + scss
* Not all entries in package.json are required && can be improved
=============================================================================
(npm run build or npx webpack)
=============================================================================
-----------------------------
package.json
-----------------------------
{
"name": "theme-setup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@babel/preset-env": "^7.4.4",
"@babel/preset-es2015": "^7.0.0-beta.53",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^9.5.1",
"axios": "^0.18.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"flux": "^3.1.3",
"i": "^0.3.6",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"npm": "^6.9.0",
"postcss-cli": "^6.1.2",
"postcss-loader": "^3.0.0",
"react": "^16.8.6",
"react-router-dom": "^5.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2"
}
}
--------------------------
webpack.config.js
--------------------------
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: ['./res/js/MAIN.jsx', './res/scss/MAIN.scss'],
output: {
path: path.resolve(process.cwd(), 'res/dist'),
publicPath: '/',
filename: 'MAIN.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.s[c|a]ss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
mode: 'production',
plugins: [
new MiniCssExtractPlugin({
filename: 'MAIN.css',
}),
]
};
--------------------------
postcss.config.js
--------------------------
module.exports = {
plugins: {
'autoprefixer': {}
}
}
--------------------------
.babelrc
--------------------------
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment