easy-webpack / core

An easy way to create configuration files for Webpack
MIT License
68 stars 6 forks source link

Documentation format of each easy-webpack module #35

Open Holi0317 opened 7 years ago

Holi0317 commented 7 years ago

Currently, all easy-webpack modules do not have any documentation. This require users to check source code for each module's function and how to use it. I would like to help with documentation and improve easy-webpack.

Before starting, what should be included in documentation? I can think of the followings.

@niieani

Take config-css as example. Here is the sample documentation.

@easy-webpack/config-css

Include and inject css using css-loader and style-loader

Installation

npm install --save-dev @easy-webpack/config-css

easy-webpack is also required.

Usage

// webpack.config.js
const generateConfig = require('@easy-webpack/core').generateConfig;

const baseConfig = { ... }; // project-specific config like the entry file(s)

module.exports = generateConfig(
  baseConfig,

  require('@easy-webpack/config-css')
    ({ filename: 'styles.css', allChunks: true, sourceMap: false })
);

/*
module.exports will be the following:
{
  ...
}
*/

On any JavaScript module, simply import your css file and it will be injected into the DOM globally.

// app.js
require('./style.css')  // CommonJS style import
import './style.css'    // ES Module import

Options

filename

Type: String Default: [name].css

Filename of the extracted css file. Only be used if extractText is not false or undefined.

allChunks

(Other options)

Related tutorials

Tips

Add PostCSS to pipeline

PostCSS is a set of plugins that can transform your CSS.

To add PostCSS install postcss-loader first.

Then, (etc...)

niieani commented 7 years ago

Sounds great! If you're willing to contribute the README files for individual repositories, I'll merge them all ASAP!

Thanks.