Switching from Gulp to Webpack

Question

UPDATE 30.04.20

[ Moving to Webpack ]

My first question is about how recommended is this switch for simple projects, just to Pre-Process/Con

Answer 1

It depends on the answer to the question: do you see any advantage to load css as part of webpack bundle or not. If you are going to load css to the browser with <link> then probably webpack doesn't bring you any advantage.

Except of "having one tool". But not one configuration - do not forget that you still need specific webpack configuration that compiles only css to speadup development (compile js is significantly slow) and it is not so easy to achieve (there are some side effects with current webpack 4 when you compile only css).

Answer 2

For simple projects, I would not recommend the switch at all. In the end it's a personal taste I think, and I prefer postprocessing through easily understandable javascript (gulp).

As you've said in your question, your current setup works well: so why fix something that's not broken? I'd focus on refactoring your gulp code to make it a bit more readable, split the long functions into smaller gulp tasks.

In the end, using webpack requires learning a lot of specific webpack related config options, while with gulp you're mostly just piping vanilla js commands.

Answer 3

The concepts of Gulp and Webpack are quite different: You tell Gulp how to put front-end code together step-by-step, but you tell Webpack what you want through a config file. So there is no easy one-to-one mapping if you are switching.

Our company moved from Gulp to Webpack in the past year. I found that understanding the differences of the two tools are very helpful for the transition. Here is a short article (5 min read) I wrote explaining the mindset change: https://medium.com/@Maokai/compile-the-front-end-from-gulp-to-webpack-c45671ad87fe

Although our transition took some time, we figured out how to move all we did in Gulp to Webpack. So to us, everything we did in Gulp we can also do through Webpack, but not the other way around.

Answer 4

Ok , I'm getting some great achieves thanks to this tutorial

My first approach is this:

webpack-config.js

'use strict';

const webpack    = require('webpack'),
    path         = require('path'),
    autoprefixer = require('autoprefixer'),
    glob         = require('glob');

let script = {
    entry: {
         'scripts': glob.sync('./_javascript/*.js'),
    },
    module: {
        loaders: [
            // Javascript: js, jsx
            {
                test: /\.jsx?$/,
                loader: 'babel-loader'
            },
            // CSS: scss, css
            {
                test: /\.s?css$/,
                loaders: ['style', 'css', 'sass', 'postcss-loader']
            },
            // SVGs: svg, svg?something
            {
                test: /\.svg(\?.*$|$)/,
                loader: 'file-loader?name=/img/[name].[ext]'
            },
            // Images: png, gif, jpg, jpeg
            {
                test: /\.(png|gif|jpe?g)$/,
                loader: 'file?name=/img/[name].[ext]'
            },
            // HTML: htm, html
            {
                test: /\.html?$/,
                loader: "file?name=[name].[ext]"
            },
            // Font files: eot, ttf, woff, woff2
            {
                test: /\.(eot|ttf|woff2?)(\?.*$|$)/,
                loader: 'file?name=/fonts/[name].[ext]'
            }
        ]
    },
    output: {
        path: './resources/js',
        filename: 'bundle--[name].js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin(['scripts'], 'bundle--[name].js'),
        new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
    }
})
]
};

let style = {
    entry: {
        'styles': glob.sync('./_nextcss/*.css'),
    },
    module: {
        loaders: [
            {
                test: /\.s?css$/,
                loaders: ['style', 'css', 'sass', 'postcss-loader']
            },
        ]
    },
    postcss: function (webpack) {
        return [
            require("postcss-import")({
                addDependencyTo: webpack
            }),
            require("postcss-url")(),
            require("postcss-cssnext")(),
            require("postcss-browser-reporter")(),
            require("postcss-reporter")(),
        ]
    },
    output: {
        path: './resources/css',
        filename: 'bundle--[name].css'
    },
};

module.exports = [
    script,
    style,
];

This generates a bundle--script.js successfully , but I'm having some issues with the css part.

It won't pre-process anything :/

I will be updating here if I get to work this in the meantime, I will really appreciate much, if someone can guide me.

Answer 5

I don't think you'd need postcss loader. I mean, for the time being. You are just moving from one to tool to another, so you should just keeping as lean as possible.

{ 
  test: /(\.css|\.scss)$/, 
  include: path.join(__dirname, 'src'), 
  loaders: ['style-loader', 'css-loader', 'sass-loader'] 
}

Mind that include inside my code depends on your configuration. After that I would consider to get rid of the 'relative' path you have in gulp. It could break your things if you'd want to maintain a development and production environment. Just personal experience.