Buiding JavaScript Lib for Webpack
- 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- 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", } }- 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", } }${root}/src/react-lib.js
import React from 'react'; import ReactDOM from 'react-dom'; // window.React = React; // window.ReactDOM = ReactDOM; export default { React, ReactDOM }${root}/webpack.config.js
module.exports = { framework: 'js', entry: { 'react-lib': 'scr/react-lib.js' }, output: { library: "ReactLib" } }${root}/webpack.config.js
module.exports = { .... externals: { 'react': 'ReactLib.default.React', 'react-dom': 'ReactLib.default.ReactDOM' }, }<!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>-
react-common-lib React common lib and example
-
vue-common-lib Vue common lib and example
