I'm trying to create a code that will serve as a reference for my next projects.
webpack.config.js:
const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//convert all .scss files in a single file in **dist/css** folder
module.exports = {
entry: './src/sass/main.scss',
output: {
path: path.resolve(__dirname, './dist/css'),
filename: 'styles.css'
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {}
}),
new MiniCssExtractPlugin({
filename: 'cmscore.css'
}),
new UglifyJsPlugin(),
new CompressionPlugin({
test: /\.(js|css)/
})
],
module: {
rules: [{
test: /\.scss$/,
include: [path.resolve(__dirname, './src/sass')],
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
minimize: true,
sourceMap: true
}
}, {
loader: 'sass-loader'
}
],
},
],
},
}
//convert all .js in a single file in **dist/script** folder
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, './dist/scripts'),
filename: 'bundle.js'
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {}
}),
new UglifyJsPlugin(),
new CompressionPlugin({
test: /\.(js|css)/
})
],
module: {
rules: [{
test: /\.js$/,
include: [path.resolve(__dirname, './src/js')],
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
sourceMap: true
}
}]
}],
}
}
I tried to unify all code in a single block(module.exports)
error when I try to run the command - npm run dev-server
- cannot convert and send files to ./dist folder. I tried to format the webpack.config.js code in several ways. Remove: extract-text-webpack-plugin and replace by mini-css-extract-plugin