Ответы пользователя по тегу Webpack
  • Как правильно настроить проект webpack?

    @tr0yka Автор вопроса
    Приведу сам же рабочий конфиг. Вот хоть бы где-то было сказано, что именно так надо делать, что бы оно работало нормально. Вся инфа собриралась по кусочку.

    const path = require('path');
    const glob = require('glob');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    let pluginsOptions = [];
    let pages = glob.sync(__dirname + '/src/pug/pages/*.pug');
    pages.forEach(function (file) {
        let base = path.basename(file, '.pug');
        pluginsOptions.push(
            new HtmlWebpackPlugin({
                filename: './' + base + '.html',
                template: './src/pug/pages/' + base + '.pug',
                inject: true,
            })
        )
    });
    pluginsOptions.push(new ExtractTextPlugin('/css/style.css'));
    
    
    module.exports = {
        entry: './src/index.js',
        devServer: {
            contentBase: './dist',
        },
        output: {
            filename: './js/bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
        module: {
            rules: [
                {
                    test: /\.less/,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: ['css-loader', 'less-loader']
                    })
                },
                {
                    test: /\.pug$/,
                    use: [
                        {
                            loader: 'pug-loader',
                            options: {
                                pretty: true
                            }
                        }
                    ],
                },
                {
                    test: /\.(png|svg|jpg|gif)$/,
                    loader: 'file-loader',
                    options: {
                        outputPath: './images',
                        name: '[name].[ext]',
                        esModule: false,
                        publicPath: '/images',
                    },
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf)$/,
                    loader: 'file-loader',
                    options: {
                        outputPath: './fonts',
                        esModule: false,
                        publicPath: '/fonts',
                    },
                },
    
            ]
        },
        plugins: pluginsOptions
    };
    Ответ написан
    Комментировать
  • Как настроить pug в Webpack для многостраничной верстки?

    Попробуй те так:
    let pages = glob.sync(__dirname + '/source/pages/*.pug');
      pages.forEach(function (file) {
        let base = path.basename(file, '.pug');
        pluginsOptions.push(
          new HtmlWebpackPlugin({
            filename: './' + base + '.html',
            template: './pages/' + base + '.pug',
            inject: true
          })
        )
      });
    ..........
    plugins: pluginsOptions
    Ответ написан
    Комментировать