Skip to content

Instantly share code, notes, and snippets.

@avicdro
Created June 5, 2019 07:47
Show Gist options
  • Save avicdro/3a54dad0c11d4e287301d636db150115 to your computer and use it in GitHub Desktop.
Save avicdro/3a54dad0c11d4e287301d636db150115 to your computer and use it in GitHub Desktop.
sass/sass module, react,
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require('webpack');
let isDevelopment = process.env.NODE_ENV;
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: path.join(__dirname, 'src'),
watchContentBase: true,
hot: true,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
{
test: /\.module\.s(a|c)ss$/,
loader: [
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
camelCase: true,
sourceMap: isDevelopment
}
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
},
{
test: /\.s(a|c)ss$/,
exclude: /\.module.(s(a|c)ss)$/,
loader: [
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: isDevelopment ? '[name].css' : '[name].[hash].css',
chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
}),
new webpack.HotModuleReplacementPlugin()
]
};
@avicdro
Copy link
Author

avicdro commented Jun 5, 2019

"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14",
}

@avicdro
Copy link
Author

avicdro commented Jun 5, 2019

// .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