All Projects → wearereasonablepeople → webpacker

wearereasonablepeople / webpacker

Licence: ISC license
🔸 Webpack configuration manager

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to webpacker

Webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
Stars: ✭ 60,034 (+333422.22%)
Mutual labels:  amd, plugins, build-tool, loaders, esm
Steal
Gets JavaScript
Stars: ✭ 1,353 (+7416.67%)
Mutual labels:  amd, plugins, build-tool
loaders
ECMAScript Modules Loaders
Stars: ✭ 65 (+261.11%)
Mutual labels:  loaders, esm
nanobundle
Yet another build tool for libraries, powered by esbuild
Stars: ✭ 45 (+150%)
Mutual labels:  build-tool, esm
autosetup
A better, faster autoconf replacement
Stars: ✭ 60 (+233.33%)
Mutual labels:  build-tool
Autodesk-Fusion-360-for-Linux
This is a project, where I give you a way to use Autodesk Fusion 360 on Linux!
Stars: ✭ 810 (+4400%)
Mutual labels:  amd
pyplugs
Decorator based plugin architecture for Python
Stars: ✭ 56 (+211.11%)
Mutual labels:  plugins
Khub
A repo for all my released BetterDiscord plugins and themes.
Stars: ✭ 34 (+88.89%)
Mutual labels:  plugins
crossbow
Cross-Platform Rust Toolkit for Games 🏹
Stars: ✭ 80 (+344.44%)
Mutual labels:  build-tool
kotlin-plugin-generated
A Kotlin compiler plugin that annotates Kotlin-generated methods for improved coverage reports
Stars: ✭ 33 (+83.33%)
Mutual labels:  build-tool
rabbitmq-auth-backend-cache
Authorisation result caching plugin (backend) for RabbitMQ
Stars: ✭ 17 (-5.56%)
Mutual labels:  plugins
ddcpuid
🔬 dd's x86 CPU Identification tool
Stars: ✭ 21 (+16.67%)
Mutual labels:  amd
build
Build system scripts based on GENie (https://github.com/bkaradzic/genie) project generator
Stars: ✭ 30 (+66.67%)
Mutual labels:  build-tool
modmail-plugins
🐦
Stars: ✭ 39 (+116.67%)
Mutual labels:  plugins
meteor-graphql
Compiler plugin that supports GraphQL files in Meteor
Stars: ✭ 56 (+211.11%)
Mutual labels:  build-tool
JUCE ARA
The JUCE cross-platform C++ framework, augmented with support for the Celemony ARA API
Stars: ✭ 32 (+77.78%)
Mutual labels:  plugins
made-in-cameroon
A curated list of awesome tools and projects built by Cameroonian developers
Stars: ✭ 14 (-22.22%)
Mutual labels:  plugins
next-purgecss
nextjs + purgecss for smaller css bundles
Stars: ✭ 129 (+616.67%)
Mutual labels:  plugins
extract-files
A function to recursively extract files and their object paths within a value, replacing them with null in a deep clone without mutating the original value. FileList instances are treated as File instance arrays. Files are typically File and Blob instances.
Stars: ✭ 48 (+166.67%)
Mutual labels:  esm
AntSword-Store.github.io
AntSword 插件市场,新插件上架申请、后门插件举报
Stars: ✭ 28 (+55.56%)
Mutual labels:  plugins

webpacker

Build Status Coverage Status

Webpack configuration manager

Motivation

Setting up webpack with a bunch of plugins and environments every time you start a new project can be time consuming and often confusing. Webpacker aims to provide you with an easy way to use standard webpack configurations without the hassle of setting them up yourself all the time.

Installation

npm i --save-dev webpacker

Usage

Commands

For now there are 3 commands you can use.

  • webpacker serve => Webpacker will serve your project for development purposes.
  • webpacker build => Webpacker will build your project and output it to a folder.
  • webpacker stats => Webpacker will build your project and output it to a folder and it will open a browser window with information about your bundle sizes.

Loaders

Name Additional parameters allowed Description
css {env, postcssOpts} Loads a CSS file
cyclejs {excludePattern, plugins, presets} A functional and reactive JavaScript framework for predictable code. Uses babel-loader
graphql {excludePattern} A query language for your API
react {excludePattern, plugins, presets} A JavaScript library for building user interfaces. Uses babel-loader
typescript {excludePattern, transpileOnly, tsconfigPath} TypeScript loader for webpack. Uses ts-loader
scss {env, scssVariables, postcssOpts} Loads a Sass/SCSS file and compiles it to CSS.
utils {env, postcssOpts} An aggregation of postcss-loader, url-loader and style-loader

Plugins

Name Additional parameters allowed Description
configure {env, constants} Shorthand for using the DefinePlugin on process.env keys
copy {copy} Copies individual files or entire directories to the build directory
clean {dry, cleanStaleWebpackAssets, protectWebpackAssets} A webpack plugin to remove/clean your build folder(s)
css {devServer} It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps
favicon {cwd, logo} Allows to use the favicons generator with webpack
html {cwd, index} Plugin that simplifies creation of HTML files to serve your bundles
stats Visualize size of webpack output files with an interactive zoomable treemap
compress {devServer} Prepare compressed versions of assets
lodash opts Treeshaking plugin for lodash-es
forkTsChecker {tsconfigPath} Webpack plugin that runs TypeScript type checker on a separate process.

Dotfile

To provide configuration to webpacker, you'll need to add a .webpacker.js file in the root of your project. The location of the config file can be changed by passing --config path/to/my/file.js when running webpacker.

The .webpacker.js file needs to export an object with at least the preset key.

Preset

The preset defines which loaders and plugins will be used. If the loader or plugin you need is not available, please submit an issue or a PR.

To provide a consistent way of providing arguments to the loaders and plugins, 2 functions are available to help: setLoader and setPlugin.

These functions can be called with the name of the plugin/loader as the first argument and with optional additional arguments as the second.

For a list of available loaders, please check ./loaders/index.js. For a list of available plugins, please check ./plugins/index.js.

Other options

The following options can be adjusted by returning them as a key in .webpacker.js. The options should be functions and their only argument is the function that webpacker itself uses internally. You can choose to call this given function and extend on its return value, or choose to not use the function and return a value of your choosing (refer to the documentation of each option to see what has to be returned).

devServer

devServer is used to define options for webpack-dev-server, which is used when running webpacker serve.

entry

entry is for webpack's entry option. By default its value is ./src/index.js.

output

output is for webpack's output option.

devtool

devtool is for webpack's devtool option.

Example file

const path = require('path');
const {setLoader, setPlugin} = require('webpacker/utils');
const constants = require(`./config/${process.env.NODE_ENV || 'development'}`);

module.exports = {
  output: fn => fn({path: path.join(__dirname, 'build')}),
  preset: {
    loaders: [
      setLoader('react'),
      setLoader('typescript'),
      setLoader('css'),
      setLoader('scss'),
    ],
    plugins: [
      setPlugin('configure', {constants}),
      setPlugin('css'),
      setPlugin('favicon', {logo: './public/img/streamline.svg'}),
      setPlugin('html'),
    ],
  }
};

Samples

Help us

Support us by giving feedback, opening a pull request or just by starring the project!

License

ISC

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].