Открыть меню    

Webpack 2

plugins

знания по JavaScript - вопросы

В то время как loader оперируют с преобразованиями на отдельных файлах, плагины (plugins) оперируют с большими кусками кода.

Например, commons-chunk-plugin другой корневой плагин, который может быть использован, чтобы создать отдельный модуль с общим кодом из нескольких точек входа.

Генерируем страницу из pug-файла при помощи HtmlWebpackPlugin:

    // plugins
    plugins: [ // кастомизирует процесс сборки webpack
        new HtmlWebpackPlugin({
            filename: 'index.html',
            chunks: ['index'],
            template: PATHS.source + '/pages/index/index.pug'
        }),
        new HtmlWebpackPlugin({
            filename: 'blog.html',
            chunks: ['blog'],
            template: PATHS.source + '/pages/blog/blog.pug'
        }),
    ],

loader

loader loaders говорят webpack , что нужно делать, когда он встречает imports для разных типов файлов.

Вы можете объединить loader's вместе в серию трансформаций.

Хороший пример того как это работает - импортировать Sass из нашего JavaScript.

    // loader
    module: {
        rules: [
            {
                test: /\.pug$/,
                loader: 'pug-loader',
                options: {
                    pretty: true
                }
            }
        ]
    },

Обрабатываем Pug в скрипте - 'на лету' при помощи pug-loader (pug-loader):

// ./test.pug
div=title
//blog/blog.js
import tmpl from './test.pug';

let el = document.querySelector('.test')

let data = {
    title: 'хохохохоох'
};

el.innerHTML = tmpl(data);

webpack-dev-server:

    //webpack-dev-server - стартуем:
    "scripts": {
        "start": "webpack-dev-server --env development",
    },

webpack-dev-server редактируется посредством объеста devServer, который является свойством module (module.exports)

Production & Development

Разделение конфига на development и production.

Разделяем задачи посредством параметра env (--env development, где development это значение для env):

    "scripts": {
        "start": "webpack-dev-server --env development",
        "build": "webpack --env production",
    },
// only development
const developmentConfig =  {
    devServer: {
        // в консоли увидем только ошибки
        stats: 'errors-only',
        port: 9000
    }
};

module.exports = function (env) {
    // для production будет один объект, а для development другой
    if (env === 'production') {
        return common;
    };
    if (env === 'development') {
        return Object.assign(
            {},
            common,
            developmentConfig
        );
    };
};

Комментарии к статье

Добавить комментарий