Initial support for kirby 3

[arnaudjuracek]

First of all, thanks to @tststs and @grommas for the initial work on the kirby 3 support. To all of the kirby 3 users, feel free to test the support using the kirby-3 branch and comment this PR.

Once this PR reviewed and merged to master, we will work on some new features and tweaks. Kirby-webpack for Kirby 2 will still be available on a dedicated kirby-2 branch.

[maximelebreton]

Hello @arnaudjuracek I can't make blueprints working on the kirby-3 branch, is it due to the work in progress?

Thanks!

[maximelebreton]

Ok it was due to the default site.yml blueprint:

After comment the three last lines it's now working. Strange defaults...

title: Site

columns:
  - width: 1/2
    sections:
      pages:
        type: pages
        # create: default
        # template:
        #   - default

[8grad]

Is anyone still working on this project? I have just realised that npm run build and npm run stats is broken due to mismatching dependencies of ExtractTextPlugin that has been replaced by mini-css-extract-plugin… 

-- Has anyone run into the same problem? -- Has anyone fixed kirby-webpack-kirby-3/webpack.config.prod.js yet?

🙏🏼

[antoine1000]

Hi @8grad,

The project is not really active, but here is my working prod config for Kirby 3 :

webpack.config.prod.js :

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const common = require('./webpack.config.common');
const user = require('./scripts/utils/format-config')(require('./main.config.js'));

const prodConfig = {
  mode: 'production',
  entry: user.entries,
  module: {
    rules: [
      {
        test: user.css.sourceRegexExt,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: common.CSSLoaders
        })
      }
    ]
  },
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),

    // Extract all css into one file
    new ExtractTextPlugin({
      filename: (getPath) => {
        const ext = path.extname(getPath('[name]'));
        // If you import css from js entry files, these lines avoid to
        // override the js files with the extract-text-plugin output.
        // Instead, replace the bundle filepath extension by .css
        return (ext === '.css')
          ? getPath('[name]')
          : getPath('[name]').slice(0, -ext.length) + '.css';
      },
      allChunks: true
    }),

    // Minification and size optimization
    new TerserPlugin({
      sourceMap: true,
      parallel: true,
      terserOptions: {
        mangle: true,
        keep_classnames: true,
        keep_fnames: false,
        compress: { inline: false, drop_console: true },
        output: { comments: false }
      }
    }),

    new webpack.optimize.OccurrenceOrderPlugin()
  ],
  devtool: '#source-map'
};

module.exports = merge(common.webpack, prodConfig);

and package.json :

{
  "name": "kirby-webpack",
  "version": "1.0.0",
  "description": "A kirby starter-kit with modern frontend tools",
  "main": "index.js",
  "scripts": {
    "stats": "node scripts/check-preprocessor.js && cross-env NODE_ENV=production webpack -p --config webpack.config.prod.js --profile --json > stats.json && echo \"→ Stats.json created\" && echo \"→ Drop your file to https://chrisbateman.github.io/webpack-visualizer/\"",
    "start": "node scripts/check-preprocessor.js && cross-env NODE_ENV=development node scripts/webpack-serve.js",
    "build": "node scripts/check-preprocessor.js && cross-env NODE_ENV=production node scripts/webpack-build.js",
    "build:preprod": "cross-env APP_ENV=preprod npm run build",
    "lint": "npm run lint:js",
    "lint:js": "eslint --ext .js ./config ./scripts ./src --cache",
    "test": "npm run lint",
    "postinstall": "npm run kirby:update",
    "kirby:update": "node scripts/kirby-update.js",
    "kirby:ls": "node scripts/kirby-ls.js",
    "kirby:add": "node scripts/kirby-add.js",
    "kirby:remove": "node scripts/kirby-remove.js"
  },
  "keywords": [],
  "author": "Brocessing (http://github.com/brocessing)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/brocessing/kirby-webpack/issues"
  },
  "homepage": "https://github.com/brocessing/kirby-webpack#readme",
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/runtime": "^7.8.7",
    "@pqml/node-php-server": "^0.4.0",
    "autoprefixer": "^9.7.4",
    "babel-loader": "^8.0.6",
    "browser-sync": "^2.26.7",
    "cross-env": "^7.0.2",
    "css-loader": "^3.4.2",
    "cssnano": "^4.1.10",
    "eslint": "^6.8.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^5.1.0",
    "fs-extra": "^8.1.0",
    "github-download": "^0.5.0",
    "kool-shell": "^2.1.0",
    "node-sass": "^4.13.1",
    "postcss-loader": "^3.0.0",
    "progress-bar-webpack-plugin": "^2.1.0",
    "resolve-url-loader": "^3.1.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "tail": "^2.0.3",
    "terser-webpack-plugin": "^2.3.5",
    "webpack": "^4.42.0",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-merge": "^4.2.2"
  },
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "iOS 11"
  ]
}

I'll try to push these changes on the k3 branch asap. Tell me if it works for you!

[8grad]

Hey @antoine1000 , ⚡️ thanks a lot! 4.0.0-beta.0 for the extract-text-webpack-plugin Plugin seems to have done the trick. I will further test increasing versions of others. I'll try to contribute to the development of version 3

[chrtz]

I've also tried extract-text-webpack-plugin 4.0.0-beta.0. But it's also deprecated I guess.

Then I realized that the kirby-2 branch also uses the mini-css-extract-plugin. It also uses some updated dependencies in comparison to this branch.

So I kinda merged them together and made some fixes on my own. Most things seems to work, so I might do a PR. I just don't have any spare time to do it soon.