Skip to content

Commit e586d38

Browse files
phucbmphucbm
authored
Initial commit
0 parents  commit e586d38

25 files changed

+1242
-0
lines changed

‎.babelrc.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env"
4+
],
5+
"plugins": [
6+
"@babel/plugin-proposal-class-properties"
7+
]
8+
}

‎.eslintrc.json

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"rules": {
3+
"prefer-template": "off",
4+
"no-var": 1,
5+
"no-unused-vars": 1,
6+
"camelcase": 1,
7+
"no-nested-ternary": 1,
8+
"no-console": 1,
9+
"no-template-curly-in-string": 1,
10+
"no-self-compare": 1,
11+
"import/prefer-default-export": 0,
12+
"arrow-body-style": 1,
13+
"import/no-extraneous-dependencies": [
14+
"off",
15+
{
16+
"devDependencies": false
17+
}
18+
]
19+
},
20+
"ignorePatterns": [
21+
"dist",
22+
"node_modules",
23+
"webpack.*",
24+
"config/paths.js"
25+
],
26+
"env": {
27+
"browser": true,
28+
"es6": true
29+
},
30+
"extends": [
31+
"eslint:recommended",
32+
"prettier"
33+
],
34+
"parserOptions": {
35+
"ecmaVersion": 2021,
36+
"sourceType": "module"
37+
},
38+
"plugins": [
39+
"prettier"
40+
],
41+
"settings": {
42+
"import/resolver": {
43+
"webpack": {
44+
"config": "config/webpack.common.js"
45+
}
46+
}
47+
}
48+
}

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/package-lock.json
2+
/node_modules/
3+
/.idea/
4+
/package-lock.json

‎.npmignore

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.idea
2+
.gitignore
3+
.babelrc.json
4+
.eslintrc.json
5+
.prettierrc.json
6+
jsconfig.json
7+
/config
8+
/public
9+
/src
10+
/web
11+
/dev

‎.prettierrc.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"trailingComma": "es5",
3+
"singleQuote": true,
4+
"tabWidth": 2,
5+
"printWidth": 100,
6+
"semi": false
7+
}

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 Phuc Bui
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Wellii - Webpack Library Boilerplate
2+
3+
A boilerplate to develop JavaScript library with:
4+
5+
- UMD version
6+
- NPM package
7+
- Multiple dev servers
8+
9+
> CSS file will not be included in production build.
10+
11+
## Examples
12+
13+
- Production
14+
site: https://wellii.netlify.app [![Netlify Status](https://api.netlify.com/api/v1/badges/3dcd8303-517a-4297-b027-98b9adcc7c5c/deploy-status)](https://app.netlify.com/sites/wellii/deploys)
15+
- Dev
16+
site: https://wellii-dev.netlify.app [![Netlify Status](https://api.netlify.com/api/v1/badges/9d0e745c-a957-4c34-923f-d74852270174/deploy-status)](https://app.netlify.com/sites/wellii-dev/deploys)
17+
- Distribution files: [/dist](https://github.com/phucbm/webpack-library-boilerplate/tree/main/dist)
18+
19+
## Todos
20+
21+
1. Update `package.json`
22+
- `name`: output file name
23+
- `prettyName`: output library name
24+
- ...
25+
2. Library script start with `src/_index.js`, **do not rename this file**.
26+
3. Edit dev site in folder `dev`
27+
4. Edit production site in folder `web`
28+
29+
## Deployment
30+
```shell
31+
# Install
32+
npm i
33+
34+
# Run production server
35+
npm run web
36+
37+
# Run dev server
38+
npm run dev
39+
40+
# Generate UMD and module version
41+
npm run prod
42+
43+
# Generate UMD and module version then publish NPM package
44+
npm run publish
45+
46+
# Build production site
47+
npm run build
48+
49+
# Build dev site
50+
npm run build-dev
51+
```

‎config/config.js

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
const packageInfo = require('../package.json');
2+
3+
/**
4+
* Environment variables
5+
* scripts: cross-env NODE_ENV=development
6+
*/
7+
const env = process.env;
8+
9+
10+
/**
11+
* Banner
12+
*/
13+
const bannerConfig = {
14+
banner: `
15+
/**!
16+
* ${packageInfo.prettyName} v${packageInfo.version}
17+
* @author ${packageInfo.author.name}
18+
* @homepage ${packageInfo.homepage}
19+
* @license ${packageInfo.license} ${new Date().getFullYear()}
20+
*/`,
21+
raw: true
22+
};
23+
24+
25+
/**
26+
* Paths
27+
*/
28+
const path = require('path');
29+
const paths = {
30+
// Source files
31+
src: path.resolve(__dirname, '../src'),
32+
entry: path.resolve(__dirname, '../src/_index.js'),
33+
34+
// Production build files
35+
dist: path.resolve(__dirname, '../dist'),
36+
37+
// Build web
38+
build: path.resolve(__dirname, '../build'),
39+
40+
// Static files that get copied to build folder
41+
public: path.resolve(__dirname, '../public'),
42+
};
43+
44+
45+
/**
46+
* Server
47+
*/
48+
const server = {
49+
// Determine how modules within the project are treated
50+
module: {
51+
rules: [
52+
// JavaScript: Use Babel to transpile JavaScript files
53+
{test: /\.js$/, use: ['babel-loader']},
54+
55+
// Images: Copy image files to build folder
56+
{test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource'},
57+
58+
// Fonts and SVGs: Inline files
59+
{test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline'},
60+
61+
// HTML
62+
{test: /\.html$/i, loader: "html-loader",},
63+
64+
// Styles: Inject CSS into the head with source maps
65+
{
66+
test: /\.(sass|scss|css)$/,
67+
use: [
68+
'style-loader',
69+
{
70+
loader: 'css-loader',
71+
options: {sourceMap: true, importLoaders: 1, modules: false},
72+
},
73+
{loader: 'postcss-loader', options: {sourceMap: true}},
74+
{loader: 'sass-loader', options: {sourceMap: true}},
75+
],
76+
},
77+
],
78+
},
79+
80+
resolve: {
81+
modules: [paths.src, 'node_modules'],
82+
extensions: ['.js', '.jsx', '.json'],
83+
alias: {
84+
'@': paths.src,
85+
assets: paths.public,
86+
},
87+
},
88+
89+
// Control how source maps are generated
90+
devtool: 'inline-source-map',
91+
};
92+
93+
94+
/**
95+
* Export
96+
*/
97+
module.exports = {
98+
paths,
99+
packageInfo,
100+
bannerConfig,
101+
server,
102+
env
103+
};

‎config/webpack.build.js

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2+
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
3+
const {merge} = require('webpack-merge');
4+
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
5+
const CopyWebpackPlugin = require("copy-webpack-plugin");
6+
const HtmlWebpackPlugin = require("html-webpack-plugin");
7+
const {paths, server, packageInfo, env} = require('./config');
8+
const path = require("path");
9+
10+
/**
11+
* Sample variables: "cross-env ENTRY=web"
12+
* ENTRY: folder to start building the bundle
13+
*/
14+
const entryFolder = env.ENTRY || 'web';
15+
const entryPath = path.resolve(__dirname, `../${entryFolder}`);
16+
17+
module.exports = merge(server, {
18+
mode: 'production',
19+
devtool: false,
20+
21+
// Where webpack looks to start building the bundle
22+
entry: [entryPath + '/script.js'],
23+
24+
output: {
25+
path: paths.build,
26+
publicPath: '/',
27+
filename: 'js/[name].[contenthash].bundle.js',
28+
},
29+
module: {
30+
rules: [
31+
{
32+
test: /\.(sass|scss|css)$/,
33+
use: [
34+
MiniCssExtractPlugin.loader,
35+
{
36+
loader: 'css-loader',
37+
options: {
38+
importLoaders: 2,
39+
sourceMap: false,
40+
modules: false,
41+
},
42+
},
43+
'postcss-loader',
44+
'sass-loader',
45+
],
46+
},
47+
],
48+
},
49+
plugins: [
50+
// Extracts CSS into separate files
51+
new MiniCssExtractPlugin({
52+
filename: 'styles/[name].[contenthash].css',
53+
chunkFilename: '[id].css',
54+
}),
55+
// Removes/cleans build folders and unused assets when rebuilding
56+
new CleanWebpackPlugin(),
57+
58+
// Copies files from target to destination folder
59+
new CopyWebpackPlugin({
60+
patterns: [
61+
{
62+
from: paths.public,
63+
to: 'assets',
64+
globOptions: {
65+
ignore: ['*.DS_Store'],
66+
},
67+
noErrorOnMissing: true,
68+
},
69+
],
70+
}),
71+
72+
// Generates an HTML file from a template
73+
// Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
74+
new HtmlWebpackPlugin({
75+
inject: true,
76+
hash: true,
77+
title: packageInfo.prettyName,
78+
favicon: paths.public + '/images/favicon.png',
79+
template: entryPath + '/index.html', // template file
80+
filename: 'index.html', // output file
81+
}),
82+
],
83+
optimization: {
84+
minimize: true,
85+
minimizer: [new CssMinimizerPlugin(), '...'],
86+
runtimeChunk: {
87+
name: 'runtime',
88+
},
89+
},
90+
performance: {
91+
hints: false,
92+
maxEntrypointSize: 512000,
93+
maxAssetSize: 512000,
94+
},
95+
})

0 commit comments

Comments
 (0)