webpack-multiple-themes-compile

    3.0.0 • Public • Published

    webpack multiple themes compile

    Build Status Coverage Status Packagist webpack

    English | 中文版

    This library use to overwrite webpack config to output multiple themes in once compile.

    If you used webpack version lower than 3 , please use webpack-multiple-themes-compile@1.

    If you used Webpack 4, please use webpack-multiple-themes-compile@2.x.

    Install

    npm i webpack-multiple-themes-compile webpack-merge

    Example

    Origin webpack.config.js

    module.exports = {
      output: {
        path: outPutPath,
        filename: '[name].js',
        chunkFilename: '[name].js',
      },
      // There is another options.
    };

    Change the webpack.config.js file.

    + const merge = require('webpack-merge');
    + const multipleThemesCompile = require('webpack-multiple-themes-compile');
    - module.exports = {
    + const webpackConfigs = {
      output: {
        path: outPutPath,
        filename: '[name].js',
        chunkFilename: '[name].js'
      }
      // There is another options.
    };
    
    + module.exports = merge(
    +   webpackConfigs,
    +   multipleThemesCompile({
    +     themesConfig: {
    +       green: {
    +         color: '#008000'
    +       },
    +       yellow: {
    +         import: [
    +           '~thirdpartylibrary/styles/yellow.less'
    +         ],
    +         color: '#ffff00'
    +       }
    +     },
    +     lessContent: 'body{color:@color}'
    +   })
    + );

    Output directory tree.

    .
    ├── theme-green.css
    ├── theme-yellow.css
    └── themes.js
    

    API

    /**
     * @param configs
     */
    multipleThemesCompile(configs);
    

    configs

    Property Type(Default) Description
    styleLoaders Array [{ loader: 'css-loader' }, { loader: 'less-loader' }] The loaders to compile less.Details in webpack homepage
    themesConfig* Object Theme configuration. key for the file name of the generated css, value for the object .The object's key, the value is the name of the variable to be overwritten, and the value of the variable.
    lessContent String | (themeName:string,config:Object)=> String @import "../index"; The content of cache less.
    preHeader String // Generate by Script. The header of generate files.
    cacheDir String ./src/less/themes Cache Directory.
    cwd String __dirname Relative output directory.
    outputName String theme-[name].css Finally output pathname.Options similar to the same options in webpackOptions.output.
    publicPath String../../ publicPath configuration for mini-css-extract-plugin

    Notice

    If you used html-webpack-plugin,maybe you need added this config:

     new HtmlwebpackPlugin({
       filename: 'index.html',
       template: 'src/index.html',
       inject: 'body',
       // exclude themes.js
    +  excludeChunks: Object.keys(themesConfig)
     })

    Install

    npm i webpack-multiple-themes-compile

    DownloadsWeekly Downloads

    263

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    17.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • hiyangguo
    • superman66