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
