# @sidewaysnyc/classic-wp-webpack

> It helps to forget about any config on the classic wp projects, where you only need to set some variables and there you go! you would be ready to work.

Latest version **3.0.1** (published 2022-03-08) · PRIVATIVE license · 0 weekly downloads

## Install

```sh
npm install @sidewaysnyc/classic-wp-webpack
pnpm add @sidewaysnyc/classic-wp-webpack
yarn add @sidewaysnyc/classic-wp-webpack
bun add @sidewaysnyc/classic-wp-webpack
```

Provides the command `classic-wp-webpack-update`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2022-03-08 |
| First published | 2019-12-10 |
| Weekly downloads | 0 |
| License | PRIVATIVE |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 27 |
| Unpacked size | 16.5 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| Author | Sideways |
| Maintainers | sidewaysnyc |

## Links

- npm: https://www.npmjs.com/package/@sidewaysnyc/classic-wp-webpack
- Repository: https://github.com/wearesideways/classic-wp-webpack
- Homepage: https://github.com/wearesideways/classic-wp-webpack#readme
- Issues: https://github.com/wearesideways/classic-wp-webpack/issues
- npm.io page: https://npm.io/package/@sidewaysnyc/classic-wp-webpack

## Dependencies (27)

- [ncp](https://npm.io/package/ncp.md) ^2.0.0
- [open](https://npm.io/package/open.md) ^8.4.0
- [isdev](https://npm.io/package/isdev.md) ^1.0.1
- [eslint](https://npm.io/package/eslint.md) ^8.10.0
- [prompts](https://npm.io/package/prompts.md) ^2.4.2
- [webpack](https://npm.io/package/webpack.md) ^5.68.0
- [node-sass](https://npm.io/package/node-sass.md) ^7.0.1
- [stylelint](https://npm.io/package/stylelint.md) ^14.4.0
- [css-loader](https://npm.io/package/css-loader.md) ^6.6.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.17.5
- [sass-loader](https://npm.io/package/sass-loader.md) ^12.4.0
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.9.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.2
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.3
- [style-loader](https://npm.io/package/style-loader.md) ^3.3.1
- [postcss-import](https://npm.io/package/postcss-import.md) ^14.0.2
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^5.3.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.16.11
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^7.4.1
- [resolve-url-loader](https://npm.io/package/resolve-url-loader.md) ^5.0.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^4.7.4
- [assets-webpack-plugin](https://npm.io/package/assets-webpack-plugin.md) ^7.1.1
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^5.3.1
- [imagemin-webpack-plugin](https://npm.io/package/imagemin-webpack-plugin.md) ^2.4.2
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.5.3
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.5.0
- [filemanager-webpack-plugin](https://npm.io/package/filemanager-webpack-plugin.md) ^6.1.7

## Recent versions

- 3.0.1 (latest) — 2022-03-08
- 3.0.0 — 2022-03-07
- 2.0.2 — 2020-10-16
- 2.0.1 — 2020-05-06
- 2.0.0 — 2020-05-06
- 1.0.18 — 2020-04-01
- 1.0.17 — 2020-02-12
- 1.0.16 — 2020-02-05
- 1.0.15 — 2020-02-05
- 1.0.14 — 2020-01-27
- 1.0.13 — 2020-01-17
- 1.0.12 — 2020-01-15
- 1.0.11 — 2019-12-17
- 1.0.10 — 2019-12-17
- 1.0.9 — 2019-12-17
- … 9 more at https://npm.io/package/@sidewaysnyc/classic-wp-webpack/versions

## README

# classic-wp-webpack

It helps to forget about any configuration on the classic Wordpress projects.

Everything inside this project could be easily modified once you install this package and the
build directory has been created.

The idea is make this as simple as just `npm i` and start developing but at the same time having the option to modify the rules or add anything related with webpack for your specific project.

If you want to install this on your wp project.

**Note:** Make sure you have the latest node version. Now working with v12.13

### New Project

Run:

```
npm i @sidewaysnyc/classic-wp-webpack@latest --save-dev
```

Then:

- Add to scripts `"update-webpack": "classic-wp-webpack-update"` on package.json
- Run `npm run update-webpack`

**Note:**

If you already installed the script will replace build folder and wont ask you again about the domain

### Existing project

- [ ] Go to the repository and theme path
- [ ] Remove all dependencies that are on [classic-wp-webpack dependencies](https://github.com/wearesideways/classic-wp-webpack/blob/master/package.json) already
- [ ] Remove build folder
- [ ] `npm i @sidewaysnyc/classic-wp-webpack@latest --save-dev`
- [ ] Add to scripts `"update-webpack": "classic-wp-webpack-update"`
- [ ] Run `npm run update-webpack`
- [ ] Run `npm run watch`
- [ ] See if everything is running well 

#### Steps to update

- [ ] Go to the repository and theme path
- [ ] Change version of the classic-wp-webpack `package.json`
- [ ] Add to scripts `"update-webpack": "classic-wp-webpack-update"`
- [ ] Run `npm run update-webpack`

#### Analyze dependencies
- Run `npm run prod --analyze`, by adding flag `--analyze` will run a server and shows you details of your webpack dependencies

Note: This last step will replace /build folder, so make sure you have custom code versioned to avoid losing your code.
It could be necessary to adjust `.babelrc` or some extra file.

### Migrating to V2

V2 brings Hot Module Reloading (HMR) for CSS and initial support for dynamic imports.

In all previous instances where we use webpack we often have to deal with the fact that scripts, styles, images, etc
are not stored in the root of the domain like www.example.com/app.hash.js, but rather in some nested directory.

To deal with this we have resorted to many hacks (see `$asset-path` in SASS).
Fortunately there is a way to fix all such problems: by using webpack's publicPath option.

This option allows you to tell webpack that all assets are in a subdirectory, this works for images defined in SCSS, dynamic JS imports and even HMR.

In short, here's what you need to do:

1. Add a PUBLIC_PATH option to your build settings file, with the value of the full path from the root of the domain to the dist folder:

   ```js
   // build-settings.js
   module.exports = {
     ...,
     PUBLIC_PATH: '/wp-content/themes/[my_theme]/dist/'
   }
   ```

2. Ensure your `$image-path` and/or `$fonts-path` in SASS are relative and not absolute:

   **Wrong** ❌

   ```scss
   $asset-path: '/wp-content/themes/xyz/assets/';
   $image-path: $asset-path + 'images/';
   $fonts-path: $asset-path + 'fonts/';
   ```

   **Correct** ✅

   ```scss
   $image-path: '../images/';
   $fonts-path: '../fonts/';
   ```

3. In the PHP function that reads the manifest file, make sure to remove all logic that detects if the asset is a URL or a file, just do:

   ```php
   function getHashedAsset($fileType, $isEditor = false)
   {
       $feature = !$isEditor ? 'app' : 'editor';
       $manifestFile = get_template_directory() . '/dist/manifest.json';
       $manifest = json_decode(file_get_contents($manifestFile), true)[$feature];

       $assetPath = $manifest[$fileType] ?? '';

       return filter_var($assetPath, FILTER_VALIDATE_URL) ? $assetPath : get_home_url(null, $assetPath);
   }
   ```

4. Have a 🍺

#### Dynamic imports

This is an optional step to support dynamic imports.

1. Run `npm i babel-eslint eslint`
2. Update your ESLint's parser (so that `import()` is not a syntax error):

   ```json
   {
       "rules": {
           ...
        },
       "parser": "babel-eslint"
   }
   ```

#### jQuery support

Add flag to `build-settings.js`

```
  LEGACY_AUTO_IMPORT_JQUERY: true
```

---
_Source: https://npm.io/package/@sidewaysnyc/classic-wp-webpack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._