1

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)

my package.json

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
PlayMa256
  • 6,603
  • 2
  • 34
  • 54
  • 1
    all files must be linked from your entry point. Drop the first config and import the sccs file inside your js and add the scss rule to the second module.exports – PlayMa256 Oct 23 '18 at 18:39

0 Answers0