├── .npmignore
├── .npmrc
├── .eslintignore
├── src
├── style.css
├── index.js
├── init.js
└── Example.js
├── .gitignore
├── __tests__
├── __fixtures__
│ └── index.html
└── test.js
├── postcss.config.js
├── template.html
├── babel.config.json
├── Makefile
├── README.md
├── webpack.config.js
├── .github
└── workflows
│ └── nodejs.yml
├── eslint.config.js
└── package.json
/.npmignore:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | legacy-peer-deps=true
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | color: burlywood;
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | *.log
3 | dist
4 | assets
5 |
--------------------------------------------------------------------------------
/__tests__/__fixtures__/index.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: [
3 | 'postcss-preset-env',
4 | ],
5 | };
6 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | import init from './init.js';
4 | import './style.css';
5 |
6 | init();
7 |
--------------------------------------------------------------------------------
/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Webpack Package
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/babel.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | [
4 | "@babel/preset-env",
5 | {
6 | "targets": {
7 | "node": "current"
8 | }
9 | }
10 | ]
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | develop:
2 | npx webpack serve
3 |
4 | install:
5 | npm ci
6 |
7 | build:
8 | NODE_ENV=production npx webpack
9 |
10 | test:
11 | npm test
12 |
13 | lint:
14 | npx eslint .
15 |
16 | .PHONY: test
17 |
--------------------------------------------------------------------------------
/src/init.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | import Example from './Example.js';
4 |
5 | export default () => {
6 | const element = document.getElementById('point');
7 | const obj = new Example(element);
8 | obj.init();
9 | };
10 |
--------------------------------------------------------------------------------
/src/Example.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | export default class Example {
4 | constructor(element) {
5 | this.element = element;
6 | }
7 |
8 | init() {
9 | this.element.textContent = 'hello, world!';
10 | console.log('ehu!');
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/__tests__/test.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | import { promises as fs } from 'fs';
4 | import path from 'path';
5 | import init from '../src/init.js';
6 |
7 | beforeEach(async () => {
8 | const pathToHtml = path.resolve(__dirname, '__fixtures__/index.html');
9 | const html = await fs.readFile(pathToHtml, 'utf8');
10 | document.body.innerHTML = html;
11 | });
12 |
13 | test('init', () => {
14 | init();
15 | expect(true).toBeDefined();
16 | });
17 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # webpack-package
2 |
3 | [](https://github.com/hexlet-boilerplates/webpack-package/actions)
4 | [](https://codeclimate.com/github/hexlet-boilerplates/webpack-package)
5 |
6 | ## Setup
7 |
8 | ```sh
9 | make install
10 | ```
11 |
12 | ## Run
13 |
14 | ```sh
15 | make develop
16 | ```
17 |
18 | [](https://hexlet.io?utm_source=github&utm_medium=link&utm_campaign=webpack-package)
19 |
20 | This repository is created and maintained by the team and the community of Hexlet, an educational project. [Read more about Hexlet](https://hexlet.io?utm_source=github&utm_medium=link&utm_campaign=webpack-package).
21 |
22 | See most active contributors on [hexlet-friends](https://friends.hexlet.io/).
23 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | import HtmlWebpackPlugin from 'html-webpack-plugin';
2 |
3 | export default {
4 | mode: process.env.NODE_ENV || 'development',
5 | devServer: {
6 | client: {
7 | overlay: false,
8 | },
9 | },
10 | module: {
11 | rules: [
12 | {
13 | test: /\.js$/,
14 | exclude: /node_modules/,
15 | use: {
16 | loader: 'babel-loader',
17 | options: {
18 | presets: ['@babel/preset-env'],
19 | },
20 | },
21 | },
22 | { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
23 | {
24 | test: /\.scss$/,
25 | use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader'],
26 | },
27 | {
28 | test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
29 | use: 'url-loader?limit=10000',
30 | },
31 | {
32 | test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
33 | use: 'file-loader',
34 | },
35 | ],
36 | },
37 | plugins: [
38 | new HtmlWebpackPlugin({
39 | template: 'template.html',
40 | }),
41 | ],
42 | output: {
43 | clean: true,
44 | },
45 | };
46 |
--------------------------------------------------------------------------------
/.github/workflows/nodejs.yml:
--------------------------------------------------------------------------------
1 | # Name of workflow
2 | name: Node CI
3 |
4 | # Trigger the workflow on push or pull request
5 | on:
6 | - push
7 | - pull_request
8 |
9 | jobs:
10 | build:
11 |
12 | # The type of machine to run the job on
13 | runs-on: ubuntu-latest
14 |
15 | strategy:
16 | # Node versions list
17 | matrix:
18 | node-version: [22.x]
19 |
20 | steps:
21 | # Check-out repository under GitHub workspace
22 | # https://github.com/actions/checkout
23 | - uses: actions/checkout@v4
24 | # Step's name
25 | - name: Use Node.js ${{ matrix.node-version }}
26 | # Configures the node version used on GitHub-hosted runners
27 | # https://github.com/actions/setup-node
28 | uses: actions/setup-node@v4
29 | # The Node.js version to configure
30 | with:
31 | node-version: ${{ matrix.node-version }}
32 |
33 | - name: npm install, build
34 | # Install and build project
35 | run: |
36 | make install
37 | make build
38 | # Add environment variables
39 | env:
40 | CI: true
41 |
42 | - name: Run linter
43 | run: make lint
44 |
45 | - name: Run tests
46 | run: make test
47 |
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import globals from 'globals';
2 |
3 | import path from 'path';
4 | import { fileURLToPath } from 'url';
5 | import { FlatCompat } from '@eslint/eslintrc';
6 | import pluginJs from '@eslint/js';
7 | import importPlugin from 'eslint-plugin-import';
8 |
9 | // mimic CommonJS variables -- not needed if using CommonJS
10 | const __filename = fileURLToPath(import.meta.url);
11 | const __dirname = path.dirname(__filename);
12 | const compat = new FlatCompat({
13 | baseDirectory: __dirname,
14 | recommendedConfig: pluginJs.configs.recommended,
15 | });
16 |
17 | export default [
18 | {
19 | ignores: ['dist/'],
20 | },
21 | {
22 | languageOptions: {
23 | globals: {
24 | ...globals.node,
25 | ...globals.jest,
26 | ...globals.browser,
27 | },
28 | parserOptions: {
29 | // Eslint doesn't supply ecmaVersion in `parser.js` `context.parserOptions`
30 | // This is required to avoid ecmaVersion < 2015 error or 'import' / 'export' error
31 | ecmaVersion: 'latest',
32 | sourceType: 'module',
33 | },
34 | },
35 | plugins: { import: importPlugin },
36 | rules: {
37 | ...importPlugin.configs.recommended.rules,
38 | },
39 | },
40 | ...compat.extends('airbnb-base'),
41 | {
42 | rules: {
43 | 'no-underscore-dangle': [
44 | 'error',
45 | {
46 | allow: ['__filename', '__dirname'],
47 | },
48 | ],
49 | 'import/extensions': [
50 | 'error',
51 | {
52 | js: 'always',
53 | },
54 | ],
55 | 'import/no-named-as-default': 'off',
56 | 'import/no-named-as-default-member': 'off',
57 | 'no-console': 'off',
58 | 'import/no-extraneous-dependencies': 'off',
59 | },
60 | },
61 | ];
62 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-package",
3 | "version": "0.1.0",
4 | "description": "",
5 | "type": "module",
6 | "scripts": {
7 | "test": "jest --colors"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/hexlet-boilerplates/webpack-package.git"
12 | },
13 | "author": "Kirill Mokevnin",
14 | "license": "ISC",
15 | "bugs": {
16 | "url": "https://github.com/hexlet-boilerplates/webpack-package/issues"
17 | },
18 | "homepage": "https://github.com/hexlet-boilerplates/webpack-package#readme",
19 | "jest": {
20 | "verbose": true,
21 | "testEnvironmentOptions": {
22 | "url": "http://localhost/"
23 | },
24 | "testEnvironment": "jsdom"
25 | },
26 | "main": "src/init.js",
27 | "devDependencies": {
28 | "@babel/core": "^7.20.12",
29 | "@babel/eslint-parser": "^7.19.1",
30 | "@babel/preset-env": "^7.20.2",
31 | "@eslint/js": "^9.9.1",
32 | "ajv": "^8.17.1",
33 | "babel-jest": "^29.3.1",
34 | "babel-loader": "^9.1.2",
35 | "css-loader": "^6.7.3",
36 | "debug": "^4.3.4",
37 | "eslint": "^8.57.0",
38 | "eslint-config-airbnb": "^19.0.4",
39 | "eslint-plugin-babel": "^5.3.1",
40 | "eslint-plugin-import": "^2.27.4",
41 | "eslint-plugin-jest": "^27.2.1",
42 | "file-loader": "^6.2.0",
43 | "globals": "^15.9.0",
44 | "html-webpack-plugin": "^5.5.0",
45 | "jest": "^29.3.1",
46 | "jest-cli": "^29.3.1",
47 | "jest-environment-jsdom": "^29.3.1",
48 | "postcss-loader": "^7.2.4",
49 | "postcss-preset-env": "^7.8.3",
50 | "style-loader": "^3.3.1",
51 | "url-loader": "^4.1.1",
52 | "webpack": "^5.76.0",
53 | "webpack-cli": "^5.0.1",
54 | "webpack-dev-server": "^4.11.1"
55 | },
56 | "dependencies": {
57 | "npm-check-updates": "^16.6.2",
58 | "sass": "^1.57.1",
59 | "sass-loader": "^13.2.0"
60 | }
61 | }
62 |
--------------------------------------------------------------------------------