@pinnacle0/webpack-util
v0.7.4
Published
This project is to provide two helpers, based on `webpack`:
Downloads
400
Readme
@pinnacle0/webpack-util
This project is to provide two helpers, based on webpack
:
Following Convention Over Configuration
,
we provide two all-in-one tools for webpack development and build.
WebpackServerStarter
new WebpackServerStarter({
projectDirectory: path.join(__dirname, ".."),
port: 1234,
}).run();
- Creates a
webpack
compiler instance (development mode) and runs it withwebpack-dev-server
. - Starts a
localhost
https server in1234
port.
WebpackBuilder
new WebpackBuilder({
projectDirectory: path.join(__dirname, ".."),
}).run();
- Checks if the project structure complies to convention described below.
- Checks if source files complies with project
prettier
/stylelint
/eslint
rules. - Run test if supported by
package.json
scripts. - Creates a
webpack
compiler instance (production mode) and bundle into anindex.html
with related CSS/JS/images etc.
Project Tech Stack Requirement
TypeScript/JavaScript
CSS/LESS
eslint
stylelint
prettier
Note: CSS/LESS only website also supported, without any JavaScript.
Project Folder Structure
The following structure can be used for a basic project setup.
<projectDirectory>
├── build/
│ └── dist/
│ (Output directory for build artifacts, content will be
│ overwritten by each build, should be ignored by git)
├── src/
│ ├── index.html
│ │ (HTML entry)
│ └── index.{ts,tsx,js,jsx,less,css}
│ (Main entry)
├── static/
│ (Directory to serve static files, e.g: robots.txt)
├── tsconfig.json
│ (TypeScript config)
├── .eslintrc.js
│ (ESLint config, can be moved to upper directories)
├── prettier.config.js
│ (Prettier config, can be moved to upper directories)
├── stylelint.config.js
│ (Stylelint config, can be moved to upper directories)
└── package.json
(Project manifest file)
Monorepo Folder Structure
The following structure can be used for a npm/yarn/pnpm workspace setup.
<workspaceRootDirectory>
├── packages/
│ ├── project1/
│ │ ├── build/dist/
│ │ ├── config/
│ │ │ ├── tsconfig.script.json (extends: "../../../tsconfig.base.json", ...)
│ │ │ ├── tsconfig.src.json (extends: "../../../tsconfig.base.json", ...)
│ │ │ └── tsconfig.test.json (extends: "../../../tsconfig.base.json", ...)
│ │ ├── script/
│ │ │ ├── build.ts
│ │ │ └── start.ts
│ │ ├── src/
│ │ │ ├── index.html
│ │ │ └── index.{ts,tsx,js,jsx,less,css}
│ │ ├── static/
│ │ ├── tsconfig.json (files: [], references: [{path: "config/tsconfig.src.json"}, ...])
│ │ └── package.json
│ └── project2/
│ ├── build/dist/
│ ├── config/
│ │ ├── tsconfig.script.json (extends: "../../../tsconfig.base.json", ...)
│ │ ├── tsconfig.src.json (extends: "../../../tsconfig.base.json", ...)
│ │ └── tsconfig.test.json (extends: "../../../tsconfig.base.json", ...)
│ ├── script/
│ │ ├── build.ts
│ │ └── start.ts
│ ├── src/
│ │ ├── index.html
│ │ └── index.{ts,tsx,js,jsx,less,css}
│ ├── static/
│ ├── tsconfig.json (files: [], references: [{path: "config/tsconfig.src.json"}, ...])
│ └── package.json
├── tsconfig.base.json (Define common options to be extended by other tsconfig files)
├── .eslintrc.js
├── prettier.config.js
├── stylelint.config.js
└── package.json