Конфиг Webpack 3, помогите настроить, пожалуйста! Опции

[LeXx_Kiev]

Я очень слоупочу и переползаю со сборки простого фронта (не фреймворки) с Gulp на Webpack.
Но не получается по-человечески настроить конфиг Webpack.

Что дано:

1. Структура папок
   » Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
   
2. Точка входа JS: ./src/js/index.js
3. Точка входа SASS: ./src/sass/bundle.scss
4. HTML: ./src/templates

Что нужно:

1. Собрать JS в один файл, минифицировать, положить в ./build/js
2. Собрать SASS в один файл CSS, минифицировать, положить в ./build/css
3. Скопировать все изображения в ./build/img
4. Скопировать все шрифты в ./build/fonts
5. Возможность пользоваться вставкой кусков шаблонов в разные HTML документы. С Gulp пользовался rigger с таким синтаксисом
   
   » Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
   
   
   С Webpack пытался пользоваться html-loader, но синтаксис типа <%= html-loader?interpolate=require!header/navbar.html %> упорно не работает и вставляется просто как текст.

Текущие зависимости в package.json:

» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «

"devDependencies": {
    "copy-webpack-plugin": "^4.3.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }

Текущий конфиг webpack.config.js:

» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «

const path = require('path');
const HmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const PATHS = {
    source: path.join(__dirname, 'src'),
    build: path.join(__dirname, 'build')
};

const common = {
    entry: PATHS.source + '/js/index.js',
    output: {
        path: PATHS.build,
        filename: 'js/bundle.js'
    },
    module: {
        rules: [
            { test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.css$/,
                loader: 'css-loader'
            },
            {
                test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    name: 'fonts/[name].[ext]'
                }
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    name: 'img/[name].[ext]'
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ],
        loaders: [
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'img/[name].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[ext]'
                }
            },
            {
                test: /\.css$/,
                loader: 'css-loader'
            },
            {
                test: /\.scss$/,
                loader: 'css-loader!sass-loader',
            }
        ]
    },
    plugins: [
        new HmlWebpackPlugin({
            template: './src/templates/index.html',
            filename: 'index.html'
        }),
        new HmlWebpackPlugin({
            template: './src/templates/benefits.html',
            filename: 'benefits.html'
        }),
        new ExtractTextPlugin('css/bundle.css'),
        new CopyWebpackPlugin([
            {
                from: './src/fonts',
                to: 'fonts'
            },
            {
                from: './src/img',
                to: 'img'
            }
        ])
    ]
};

const devConfig = {
    devServer: {
        port: 9000,
        contentBase: './src',
        watchContentBase: true
    }
};

module.exports = (env) => {
    if (env === 'production') {
        return common;
    }

    if (env === 'development') {
        return Object.assign(
            {},
            common,
            devConfig
        );
    }
};

Никак не получается добиться нужного эффетка. То картинки со шрифтами не копирует, то CSS в 11 метров получается, ибо туда картинки в base64 кодируются... Короче профан я еще в Webpack

Сообщение отредактировал LeXx_Kiev - Dec 26 2017, 15:46

[LeXx_Kiev]

Вот с таким конфигом удалось частично победить задачу:

» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «

const webpack = require('webpack');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const path = require('path');
const HmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const PATHS = {
    source: path.join(__dirname, 'src'),
    build: path.join(__dirname, 'build')
};

const common = {
    entry: PATHS.source + '/js/index.js',
    output: {
        path: PATHS.build,
        filename: 'js/bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader?-minimize', 'sass-loader']
                })
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader?-minimize',
                            options: {
                                minimize: true
                            }
                        }
                    ]
                })
            },
            {
                test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]'
                }
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[ext]'
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ],
        loaders: [
            {
                test: /\.html$/,
                loader: ['file-loader', 'html-loader']
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: ['file-loader'],
                options: {
                    name: 'img/[name].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: ['file-loader'],
                options: {
                    name: 'fonts/[name].[ext]'
                }
            },
            {
                test: /\.css$/,
                loader: 'css-loader?-minimize'
            },
            {
                test: /\.scss$/,
                loader: 'css-loader!sass-loader',
            }
        ]
    },
    plugins: [
        new HmlWebpackPlugin({
            template: './src/templates/index.html',
            filename: 'index.html'
        }),
        new HmlWebpackPlugin({
            template: './src/templates/benefits.html',
            filename: 'benefits.html'
        }),
        new ExtractTextPlugin('css/bundle.css'),
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            include: /\.min\.js$/
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.min\.css$/,
            cssProcessorOptions: { discardComments: { removeAll: true } }
        }),
        new CopyWebpackPlugin([
            {
                from: './src/img',
                to: 'img'
            }
        ])
    ],
    devtool: "source-map"
};

const devConfig = {
    devServer: {
        port: 9000,
        contentBase: './src',
        watchContentBase: true
    }
};

module.exports = (env) => {
    if (env === 'production') {
        return common;
    }

    if (env === 'development') {
        return Object.assign(
            {},
            common,
            devConfig
        );
    }
};

Однако инклуд шаблонов не пашет все равно (( И JS с CSS не минифицируются (

[SyntaxError]

Тебе будет легче в gulp это делать, т.к. вебпак конечно можно тоже заставить, но танцы с бубном будут.

[LeXx_Kiev]

Все завел с использованием EJS и ejs-compiled-loader

[Анттошка]

А зачем? Вебпак медленнее собирает стили.

[LeXx_Kiev]

А зачем? Вебпак медленнее собирает стили.

Так если бы только стили собирать нужно было. Там дофига всего. Плюс у меня галп сжирает больше оперативки на фоне (почему-то ) и разогревает ноут

[Анттошка]

Ну так пускай вебпак и дальше собирает себе скрипты, а остальное оставить галпу =)

[LeXx_Kiev]

Ну так пускай вебпак и дальше собирает себе скрипты, а остальное оставить галпу =)

Та уже настроил слава Богу, пусть себе уже один вебпак живет )

[Barrybiori]

Чувак этот хороший - курсы у него обычно полные. Но этот получился каким-то поверхностным. Объяснил как простенький конфиг сделать, как стандартный дев-сервер запустить. Про сжатие скриптов не рассказал. Про настройку авторелоада с webpack-hot-middleware тоже. Конечно, кое-что узнал, но уверенности в использовании так и не появилось. Хорошо, что пираты тут выложили, а то бы зря я деньги потратил.