4.0.0 • Published 4 years ago
@easy-team/easywebpack-js v4.0.0
easywebpack-js
Buiding JavaScript Lib for Webpack
Install
- Webpack 4
// babel 6
$ npm i easywebpack-js --save-dev
or
// babel 7
$ npm i @easy-team/easywebpack-js --save-dev- Webpack 3
$ npm i easywebpack-js@3 --save-devWebapck Building Script
Node Build Mode
- write webpack build config for easywebpack-js
// build/index.js
const easywebpack = require('easywebpack-js');
const config = {
env: process.env.BUILD_ENV,
entry: {
'index': 'lib/index.js'
}
};
easywebpack.build(config);- node build mode
{
"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",
}
}Webapck Building 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"
}
}Webpack React Project Config
${root}/webpack.config.js
module.exports = {
....
externals: {
'react': 'ReactLib.default.React',
'react-dom': 'ReactLib.default.ReactDOM'
},
}Add 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>