Easywebpack-js NPM

easywebpack-js

Buiding JavaScript Lib for Webpack

Install

Webpack 5

$ npm i easywebpack-js --save-dev // babel 7

Webpack 4

$ npm i @easy-team/easywebpack-js --save-dev      // babel 7

or

$ npm i easywebpack-js --save-dev                 // babel 6

Webpack 3

$ npm i easywebpack-js@3 --save-dev

Document

QuickStart

Webapck Building Script

Node Build Mode

write webpack build config

// build/index.js
const easywebpack = require('easywebpack-js');
const config = {
  env: process.env.BUILD_ENV,
  entry: {
    'index': 'lib/index.js'
  }
};
easywebpack.build(config);

build script command

{
 "scripts": {
   "build:test": "cross-env BUILD_ENV=test NODE_ENV=development node build/index.js",
   "build:prod": "cross-env BUILD_ENV=prod NODE_ENV=production node build/index.js",
 }
}

easywebpack-cli

write easywebpack-cli for easywebpack-js solution

// ${app_root}/webpack.config.js
const easywebpack = require('@easy-team/easywebpack-js');
module.exports = {
  framework: 'js',
  entry: {
    'index': 'lib/index.js'
  }
};

easywebpack-cli command build

{
 "scripts": {
   "build:test": "easy build test",
   "build:prod": "easy build prod",
 }
}

Building Webpack Common Script Lib

Write React Lib Entry Code

${root}/src/react-lib.js

import React from 'react';
import ReactDOM from 'react-dom';

// window.React = React;
// window.ReactDOM = ReactDOM;

export default {
  React,
  ReactDOM
}

Webpack React Lib Building

${root}/webpack.config.js

module.exports = {
  framework: 'js',
  entry: {
    'react-lib': 'scr/react-lib.js'
  },
  output: {
    library: "ReactLib" 
  }
}

Project Webpack Config

${root}/webpack.config.js

module.exports = {
  ....
  externals: {
    'react': 'ReactLib.default.React',
    'react-dom': 'ReactLib.default.ReactDOM'
  },
}

HTML Script Link

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>React Common Lib Test</title>
    <script src="/react-lib.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>