2

Перехожу с Gulp на Webpack.

Проблема в настройке конфига Webpack.

Что дано:

  • Структура папок

    Структура папок

  • Точка входа JS: ./src/js/index.js

  • Точка входа SASS: ./src/sass/bundle.scss

  • HTML: ./src/templates

Что нужно:

  • Собрать JS в один файл, минифицировать, положить в ./build/js
  • Собрать SASS в один файл CSS, минифицировать, положить в ./build/css
  • Скопировать все изображения в ./build/img
  • Скопировать все шрифты в ./build/fonts
  • Возможность пользоваться вставкой кусков шаблонов в разные HTML документы. С Gulp пользовался rigger с таким синтаксисом

Синтаксис 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.

1
  • С вот таким конфигом не завелось только include в HTML 26 дек 2017 в 14:30

2 ответа 2

0

С вот таким конфигом не завелось только include в HTML

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: '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'
            },
            {
                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'
            }
        ])
    ],
    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
        );
    }
};
0

Решение пришло использованием EJS и вот таким конфигом webpack:

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',
                            options: {
                                minimize: true,
                                sourceMap: true,
                                root: '..',
                                url: false
                            }
                        }
                    ]
                })
            },
            {
                test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/',
                    useRelativePath: true
                }
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'file-loader?outputPath=img/',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'img/',
                    useRelativePath: true
                }
            },
            {
                test: /\.html$/,
                use: ["ejs-compiled-loader", "html-loader"]
            },
            {
                test: /\.ejs$/,
                loader: 'ejs-compiled-loader'
            }
        ],
        loaders: [
            {
                test: /\.html$/,
                use: ["ejs-compiled-loader", "html-loader"]
            },
            {
                test: /\.ejs$/,
                loader: 'ejs-compiled-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: ['file-loader?outputPath=img/'],
                options: {
                    name: '[name].[ext]',
                    outputPath: 'img/',
                    useRelativePath: true
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: ['file-loader'],
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/',
                    useRelativePath: true
                }
            },
            {
                test: /\.css$/,
                loader: 'css-loader',
                options: {
                    root: '..',
                    url: false,
                    minimize: true,
                    sourceMap: true
                }
            },
            {
                test: /\.scss$/,
                loader: 'css-loader!sass-loader',
                options: {
                    minimize: true,
                    sourceMap: true
                }
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            _: "underscore"
        }),
        new HmlWebpackPlugin({
            template: './src/templates/index.ejs',
            filename: 'index.html',
            inject: true
        }),
        new HmlWebpackPlugin({
            template: './src/templates/benefits.ejs',
            filename: 'benefits.html',
            inject: true
        }),
        new HmlWebpackPlugin({
            template: './src/templates/success_stories.ejs',
            filename: 'success_stories.html',
            inject: true
        }),
        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,
        historyApiFallback: {
            rewrites: [
                { from: /^\/$/, to: '/index.html' },
                { from: /^\/benefits/, to: '/benefits.html' },
                { from: /^\/success-stories/, to: '/success_stories.html' },
            ],
            disableDotRule: true
        },
        openPage: '/success-stories'
    }
};

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.