webpack - Moving to Webpack

Question

9 months ago I was struggling with Webpack One:

[ Switching from Gulp to Webpack ]

UPDATE 30.04.20

I have to update this because now everything is a different picture, everything, as you know, evolves very fast in the web programming world, with parcel, rollup. and webpack now you can experiment with a lot of different module bundlers.

Now I will just recommend this starter pack for any JS Webpack. I really appreciate the help and constant updates of Brian Staruk, this has helped us in all of my projects and the project of the company that I work for.

https://github.com/bstaruk/starbase

========================================

UPDATE 24.07.17 || v1

We succeed finally, it was a simple syntaxis problem:

//-- webpack.config.js

'use strict';

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractStyles = new ExtractTextPlugin('styles.bundle.css');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');


let start = {

    context: path.resolve(__dirname, 'src'),
    entry: {
        scripts: './_scripts.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ['css-loader', 'postcss-loader']
                })
            },

            {
                test: /\.(woff|woff2)$/,
                use: ['url-loader'],
            },
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015']
                }
            }
        ],
    },
    output: {
        path: path.resolve(__dirname, 'dist/assets'),
        filename: '[name].bundle.js',
    },
    resolve: {
        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },
    plugins: [
        extractStyles,
    ],

};

module.exports = start;

//-- postcss.config.js
//-- Correct Syntaxis

module.exports = {
    plugins: {
        'postcss-import': {},
        'precss': {},
        'postcss-url': {},
        'postcss-cssnext': {},
        'postcss-font-magician': {},
        'postcss-reporter': {},
        'postcss-browser-reporter': {},
        'postcss-inline-svg': {},
        'postcss-urlrev': {},
        'postcss-fontpath': {},
        'postcss-object-fit-images': {}
    }
};


//-- Wrong Syntaxis:

module.exports = {
    plugins: [
        ("postcss-import")(),
        ("precss")(),
        ("postcss-url")(),
        ("postcss-cssnext")(),
        ('postcss-font-magician')(),
        ("postcss-reporter")(),
        ("postcss-browser-reporter")(),
        ('postcss-inline-svg')(),
        ('postcss-urlrev')(),
        ('postcss-fontpath')(),
        ('postcss-object-fit-images')()
    ]
};

UPDATE 20.07.17 | v0.1a | This part contain our first tryouts without success

So far, I have this:

'use strict';

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractStyles = new ExtractTextPlugin('styles.bundle.css');
const extractFonts = new ExtractTextPlugin('fonts.css');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');


let start = {

    context: path.resolve(__dirname, 'src'),
    entry: {
        scripts: './_scripts.js',
    },
    module: {
        rules: [
            {
                test: /style\.bundle\.css/,
                use: extractStyles.extract({
                    use: [
                        'style-loader',
                        'css-loader!',
                        'postcss-loader!'
                    ],
                }),
            },
            {
                test: /fonts\.css/,
                use: extractStyles.extract({
                    use: [
                        'style-loader',
                        'css-loader',
                        'postcss-loader'
                    ],
                }),
            },
            {
                test: /\.(woff|woff2)$/,
                use: ['url-loader'],
            },
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015']
                }
            }
        ],
    },
    output: {
        path: path.resolve(__dirname, 'dist/assets'),
        filename: '[name].bundle.js',
    },
    resolve: {
        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },
    plugins: [
        extractStyles,
        extractFonts,
    ],

};

module.exports = start;

And We got this Warnings and Errors:

Warning 1 : (node:16532) DeprecationWarning: Chunk.modules is
deprecated. Use
Chunk.getNumberOfModules/mapModules/forEachModule/containsModule
instead.

ERROR in ./_cssnext/_styles.css Module parse failed:
/Users/development/htdocs/src/_cssnext/_styles.css
Unexpected charac ter '@' (2:0) You may need an appropriate loader to
handle this file type. | /* Shared */ | @import "shared/colors.css"; |
@import "shared/typography.css"; |  @ ./_scripts.js 3:14-47

I thought something was wrong with cssnext so I decide to add a postcss.config.js

with:

module.exports = {
    plugins: [
        require("postcss-import")(),
        require("precss")(),
        require("postcss-url")(),
        require("postcss-cssnext")(),
        require('postcss-font-magician')(),
        require("postcss-reporter")(),
        require("postcss-browser-reporter")(),
        require('postcss-inline-svg')(),
        require('postcss-urlrev')(),
        require('postcss-fontpath')(),
        require('postcss-object-fit-images')()
    ]
};

But I keep getting this errors and warning.

What do you suggest?

----

Thank you