@stackup/webpack
$ yarn add @stackup/webpack --dev
Last updated 11 days ago by rzane .
MIT · Original npm · Tarball · package.json
$ cnpm install @stackup/webpack 
SYNC missed versions from official npm registry.

@stackup/webpack

Build Version License

Functions that you can compose to build the perfect Webpack configuration. These functions bake in best practices, so you can stop copy-pasting them from the internet!

Install

$ yarn add @stackup/webpack --dev

Usage

const path = require("path");
const webpack = require("@stackup/webpack");

module.exports = webpack.pipeline([
  // Set your entrypoint
  webpack.entry("./src/index.tsx"),

  // Output to `dist/`
  webpack.output({
    path: path.join(__dirname, "dist"),
    publicPath: "/",
  }),

  // Build JavaScript/Typescript with Babel
  webpack.babel(),

  // Compile CSS with PostCSS
  webpack.postcss(),

  // Allow importing SVG files as React components
  webpack.svg(),

  // Load SVG and PNG files as plain ol' files.
  webpack.files({ test: /\.(jpg|png)$/ }),

  // Build an HTML file and bake in all of the necessary references.
  webpack.html(),

  // Create a vendor chunk to optimize your bundle!
  webpack.vendor(),

  // Minify JavaScript and CSS in production
  webpack.minify(),

  // Enable GZIP compression
  webpack.gzip(),

  // Generate favicons and a web app manifest.json
  webpack.favicons({
    name: "My App",
    logo: "src/assets/logo.png",
    backgroundColor: "#ffffff",
    themeColor: "#6c63ff",
  }),

  // Merge in environment-specific configuration
  webpack.mode({
    development: webpack.merge({
      devServer: {
        port: 3000,
        contentBase: "./dist",
        historyApiFallback: {
          disableDotRule: true,
        },
      },
    }),
  }),
]);

Babel

To compile modern JavaScript, you'll first need to install Babel:

$ yarn add @babel/core @babel/preset-env core-js --dev

Next, you'll need to create a .babelrc.js file:

module.exports = (api) => {
  const env = {
    /**
     * Import polyfills from core-js v3 as needed
     */
    useBuiltIns: "entry",
    corejs: { versions: 3 },

    /**
     * Setting `modules: false` enables ES modules, which is required
     * for tree-shaking. However, Jest doesn't support ES modules.
     *
     * NOTE: The environment check must happen before enabling caching.
     */
    modules: api.env("test") ? "commonjs" : false,
  };

  /**
   * Enable caching
   */
  api.cache(true);

  /**
   * Return our configuration
   */
  return {
    presets: [["@babel/preset-env", env]],
  };
};

TypeScript

To build TypeScript applications, follow the instructions in the Babel section.

You'll also need to install the Babel preset for TypeScript:

$ yarn add @babel/preset-typescript --dev

Then, add the preset to your Babel configuration:

- presets: [["@babel/preset-env", env]],
+ presets: [["@babel/preset-env", env], "@babel/preset-typescript"],

Finally, create a tsconfig.json file:

{
  "include": ["src", "types"],
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "isolatedModules": true,
    "forceConsistentCasingInFileNames": true
  }
}

The target, module, moduleResolution, and jsx are especially important. Those settings above instruct TypeScript to let Babel do the heavy lifting.

React

To build React applications, follow the instructions in the Babel section.

You'll also need to install the Babel preset for React:

$ yarn add @babel/preset-react --dev

Then, add the preset to your Babel configuration:

- presets: [["@babel/preset-env", env]],
+ presets: [["@babel/preset-env", env], "@babel/preset-react"],

Current Tags

  • 0.2.2                                ...           latest (11 days ago)

7 Versions

  • 0.2.2                                ...           11 days ago
  • 0.2.1                                ...           11 days ago
  • 0.2.0                                ...           11 days ago
  • 0.1.0                                ...           2 months ago
  • 0.1.0-alpha.2                                ...           2 months ago
  • 0.1.0-alpha.1                                ...           2 months ago
  • 0.1.0-alpha.0                                ...           2 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 35
Last Day 0
Last Week 0
Last Month 43
Dev Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |