inject-text-webpack-plugin

Inject Text Plugin

Inject text from glob into template (useful for creating templated scss).

Install

npm install --save-dev inject-text-webpack-plugin

Usage

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const SuppressChunksPlugin = require('suppress-chunks-webpack-plugin').default;
const WebpackPreBuildPlugin = require('pre-build-webpack');
const InjectTextPlugin = require('inject-text-webpack-plugin').default;

const path = require('path');
const paths = {
    DIST: path.resolve(__dirname, 'dist'),
    SRC: path.resolve(__dirname, 'src'),
    BUILD: path.resolve(__dirname, 'build'),
};

const injector = new InjectTextPlugin({
    templateFile: 'src/styles/the_template.scss',
    outputFile: 'build/application.scss',
    sources: 'src/**/*.scss',
    filter: '**/styles/**/*.scss',
    itemTemplate: '@import "<%- item %>";',
    placeholder: '/* [inject:scss:placeholder] */',
});


module.exports = {
    entry: {
        index: path.join(paths.SRC, 'initialize.js'),
        scss: path.join(paths.BUILD, 'application.scss')
    },
    output: {
        path: path.join(paths.DIST),
        filename: 'js/[name].js',
        chunkFilename: 'js/[name].js'
    },
    plugins: [
        new ExtractTextPlugin('css/application.css'),
        new SuppressChunksPlugin({ name: 'scss', match: /\.js(\.map)?$/ }),
        new webpack.WatchIgnorePlugin([path.join(paths.BUILD, 'application.scss')]),
        new WebpackPreBuildPlugin(function () {
            injector.execute();
        })
    ],
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader']},
            { test: /\.html$/, use: ['file-loader']},
            {
                test: /scss$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        { loader: 'postcss-loader', options: { config: { path: 'postcss.config.js' } } },
                        { loader: 'sass-loader' }
                    ]
                })
            }
        ]
    }
};

Parameters and usage

templateFile

Specify the path to the template you want to use, this template should contain placeholder. This is where the filenames of the resulting glob are inserted (after being passed to the itemTemplate).

outputFile

Path to where the output is saved.

sources

Glob for the input files, all files matching this pattern are inserted into the templateFile instead of the placeholder.

filter

Filter out unwanted files by setting this glob pattern (can be omitted).

itemTemplate

Each file found by sources is inserted into the templateFile using this (lodash) template. The plugin uses the name item in the template, so use something like @import "<%- item %>"; as the itemTemplate.

placeholder

This text should be present in the templateFile and gets replaced by the filenames of the resulting glob (after being passed to the itemTemplate).

Example

Existing file structure:

WebApp
|-- src
|   |-- components
|   |   +-- navigation
|   |       |-- navigation.js
|   |       +-- navigation.scss
|   +-- styles
|       |-- mixins.scss
|       |-- overrides.scss
|       |-- the_template.scss
|       +-- vars.scss
+-- webpack.config.js

Contents of the_template:

@import "src/styles/vars.scss";

/* [inject:scss:placeholder] */

@import "src/styles/mixins.scss";
@import "src/styles/overrides.scss";

Plugin parameters:

const injector = new InjectTextPlugin({
    templateFile: 'src/styles/the_template.scss',
    outputFile: 'build/application.scss',
    sources: 'src/**/*.scss',
    filter: '**/styles/**/*.scss',
    itemTemplate: '@import "<%- item %>";',
    placeholder: '/* [inject:scss:placeholder] */',
});

Resulting file:

@import "src/styles/vars.scss";

@import "src/components/navigation/navigation.scss";

@import "src/styles/mixins.scss";
@import "src/styles/overrides.scss";