- Pre requisites
- A little about the assembly.
- Beginning of work.
- Folder structure
- Npm scripts
- Dev dependencies
To build and run this project locally you need Node.js.
This project uses webpack version 4.43.0. Instead of webpack-cli, Node Interface is used. This assembly supports files such as: .sass, .scss, .css, .js, .ts, .pug, .html .jpg, .png, .jpeg, .svg, .woff2, .woff, .eot, .ttf. This assembly also uses caching and code-splitting and can compress and minify code. Jest is used as a framework for unit testing and jest and puppeteer are used for testing e2e.
- Clone the repository.
git clone https://github.com/Ikrom-Murodov/Webpack-4.git
- Install dependencies.
cd Webpack-4
yarn
- Build project.
yarn run build
- Run the project.
yarn run dev
| Name | Description |
|---|---|
| node_modules | Contains all your npm dependencies. |
| dist | Contains files ready to use (output). Your code that you use in production |
| src | Contains all the source code for your application |
| typings | Stores .d.ts declaration files that were not found in DefinitelyTyped. |
| webpack | Contains all files and folders for webpack config. |
| .browserslistrc | Configuration for sharing target browsers and Node.js versions. |
| .editorconfig | EditorConfig is a configuration file and a set of extensions to many code editors and IDEs |
| .eslintignore | Configuring settings for ESLint, paths that will be excluded from linting (i.e. ignored and the linter does not affect them) |
| .eslintrc | Settings config for ESLint that determines the style of coding |
| .gitignore | Don't track change in files with git |
| .prettierrc | Prettier config file |
| .babel.config.js | Configuration file for babel learn more |
| .jest.config.js | Configuration file for Jest. |
| jest.puppeteer.config.js | Configuration file for jest and puppeteer. |
| package.json | File containing npm dependencies |
| postcss.config.js | Postcss config file |
| tsconfig.json | Configuration file for TypeScript. |
| yarn.lock | Yarn needs an exact version for each installed dependency. To do this, Yarn uses the yarn.lock file in your project's root directory. |
| Name | Description |
|---|---|
| src/css | Contains all your original css styles |
| src/fonts | Contains all your original fonts |
| src/images | Contains all your original images |
| src/pug | Contains all your original pug template, which will then be compiled into a .html file |
| src/sass | Contains all your original sass styles, which will then be compiled into a .css file |
| src/ts | Contains all your original TypeScript scrips, which will then be compiled into a .js file |
| Name | Description |
|---|---|
| webpack/config | Contains all your webpack config files. |
| webpack/config/webpack.base.js | The base webpack config file from which other webpack config files will 'inherit'. |
| webpack/config/webpack.dev.js | Webpack config file for development mode that 'inherits' from webpack.base.js |
| webpack/config/webpack.prod.js | Webpack config file for boot mode (production), which 'inherits' from webpack.base.js |
| webpack/modules | Contains all webpack config modules |
| webpack/modules/base | Contains the base modules to be used in the file - webpack/config/webpack.base.js |
| webpack/modules/dev | Contains modules that will be used in development mode in a file - webpack/config/webpack.dev.js |
| webpack/modules/prod | Contains modules to be used in production mode in a file - webpack/config/webpack.prod.js |
| webpack/plugins | Contains all webpack config plugins |
| webpack/plugins/base | Contains basic plugins to be used in the file - webpack/config/webpack.base.js |
| webpack/plugins/dev | Contains plugins to be used in development mode in a file - webpack/config/webpack.dev.js |
| webpack/plugins/prod | Contains plugins to be used in production mode in a file - webpack / config / webpack.prod.js |
| webpack/constans.js | Contains paths to directories such as SOURCE_DIRECTORY, BUILD_DIRECTORY and they can be customized, that is, you can specify the project build path by changing the BUILD_DIRECTORY variable |
| webpack/dev.js | Contains settings for how webpack should work in development mode, and also gets the webpack config file (webpack / config / webpack.dev.js) |
| webpack/prod.js | Contains settings for how webpack should work in production mode and also gets the webpack config file (webpack / config / webpack.prod.js) |
| webpack/helper | Contains all plugins and loaders that are repeated in webpack config files |
| Script name | Description |
|---|---|
| dev | (yarn run dev) Webpack run project in development mode |
| build | (yarn run build) Webpack will start building the project in production mode |
| lint | (yarn run lint) Eslint starts checking the code |
| all-tests | (yarn run all-tests) Jest starts running all your tests |
| e2e-tests | (yarn run e2e-tests) Jest starts running your e2e-tests |
| Package name | Description |
|---|---|
| @babel/cli @babel/cli | |
| @babel/core @babel/core | |
| @babel/preset-env @babel/preset-env | |
| @babel/preset-typescript @babel/preset-typescript | |
| @types/expect-puppeteer | |
| @types/jest | |
| @types/jest-environment-puppeteer | |
| @types/puppeteer | |
| @typescript-eslint/eslint-plugin | |
| @typescript-eslint/parser @typescript-eslint/parser | |
| app-root-path app-root-path | |
| autoprefixer autoprefixer | |
| babel-jest babel-jest | |
| babel-loader узнать больше | |
| chalk Chalk | |
| clean-webpack-plugin clean-webpack-plugin | |
| copy-webpack-plugin copy-webpack-plugin | |
| css-loader css-loader | |
| css-mqpacker css-mqpacker | |
| cssnano cssnano | |
| eslint ESLint | |
| eslint-config-airbnb-typescript eslint-config-airbnb-typescript | |
| eslint-plugin-jest eslint-plugin-jest | |
| esm esm | |
| file-loader file-loader | |
| html-webpack-plugin html-webpack-plugin | |
| image-webpack-loader image-webpack-loader | |
| jest jest | |
| jest-puppeteer jest-puppeteer | |
| mini-css-extract-plugin mini-css-extract-plugin | |
| node-sass node-sass | |
| postcss-loader postcss-loader | |
| prettier prettier | |
| pug pub | |
| pug-loader pug-loader | |
| puppeteer puppeteer | |
| sass-loader sass-loader | |
| source-map-loader source-map-loader | |
| style-loader style-loader | |
| tslib tslib | |
| typescript typescript | |
| webpack webpack | |
| webpack-dev-server webpack-dev-server | |
| webpack-merge webpack-merge |