webpack 5 just installed

Author: wclr

README.md

@@ -6,7 +6,7 @@
 
 ## Why
 
-Webpack is really a great Packager Manager and Bundler, despite all its caveats (mostly related to configuration and performance) it really gives has much more capabilities and puts less limitations on the user than any other bunder I've tried. But some (quite basic) higher level problems seem do be not solved even there.
+Webpack is really a great Packager Manager and Bundler, despite all its caveats (mostly related to configuration and performance) it gives has much more capabilities and puts less limitations on the user than any other bunder I've tried. But some (quite basic) higher level problems seem do be not solved even there.
 
 All the methods of i18n of JS frontend apps (particularly loading/delivering language-specific usually UI-related data) I've seen out there - just ~~suck~~ could not satisfy my really basic requirements (which are mostly - simplicity and flexibility). Sounds strange, but feels like **no one knows how to make it right.** So, this package trying to approach the problem in a bit opinionated but at the same time flexible and generalized way. And this approach turned to be also useful for loading any kind of dictionary-like data sets.
 
@@ -175,7 +175,7 @@ export interface LoaderOptions {
 
 ## Caveats
 
-There are currently some problems with created bundle's names due to the problem that chunk names are not always available during the Webpack build. But this probably is going to be solved somehow.
+There are currently some problems with created bundle's names due to the fact that chunk/modules names are not always available when the loader performs. But this probably is going to be solved somehow.
 
 ## How it works
 

package.json

@@ -10,6 +10,9 @@
     "wp4-build": "ts-node-dev webpack4/build",    
     "wp4-watch": "h --n lp-loader-wp4 -- ts-node-dev webpack4/watch",
     "wp4-wds": "h --n lp-loader-wp4-wds -- ts-node-dev webpack4/wds",
+    "wp5-build": "ts-node-dev webpack5/build",    
+    "wp5-watch": "h --n lp-loader-wp5 -- ts-node-dev webpack4/watch",
+    "wp5-wds": "h --n lp-loader-wp5-wds -- ts-node-dev webpack4/wds",
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepublishOnly": "tsc"
   },

webpack4/webpack.config.ts

@@ -1,6 +1,6 @@
 import * as webpack from 'webpack'
 import * as path from 'path'
-import * as fs from 'fs'
+
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CleanWebpackPlugin = require('clean-webpack-plugin')
 import { LoaderOptions } from '../src/lp-loader'

webpack5/build.ts

@@ -0,0 +1,8 @@
+import * as webpack from 'webpack'
+import { makeConfig } from './webpack.config'
+
+const conf = makeConfig(true)
+const compiler = webpack(conf)
+
+compiler.run((err, stats) => {
+})

webpack5/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "webpack5",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "webpack": "^5.0.0-beta.17",
+    "webpack-dev-server": "^3.11.0"
+  }
+}

webpack5/watch.ts

@@ -0,0 +1,19 @@
+import * as webpack from 'webpack'
+import { makeConfig } from './webpack.config'
+import * as http from 'http'
+import { join } from 'path'
+const staticServer = require('node-static').Server
+
+const compiler = webpack(makeConfig(true))
+
+compiler.watch({ poll: 100 }, (err, stats) => {
+  console.log(stats.toJson('minimal' as any))
+})
+
+const file = new staticServer(join(__dirname + '/build'))
+console.log('Static HTTP server is listenting on', process.env.PORT)
+http.createServer((request, response) => {
+  request.addListener('end', function () {
+    file.serve(request, response);
+  }).resume();
+}).listen(process.env.PORT)

webpack5/wds.ts

@@ -0,0 +1,14 @@
+import * as webpack from 'webpack'
+import config from './webpack.config'
+const WebpackDevServer = require('webpack-dev-server')
+
+new WebpackDevServer(webpack(config), {
+  disableHostCheck: true,
+  hot: true,
+  stats: { colors: true },
+  port: process.env.PORT,
+  historyApiFallback: {
+    index: 'index.html',
+  }
+})
+  .listen(process.env.PORT)

webpack5/webpack.config.ts

@@ -0,0 +1,99 @@
+import * as webpack from 'webpack'
+import * as path from 'path'
+import * as fs from 'fs'
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CleanWebpackPlugin = require('clean-webpack-plugin')
+import { LoaderOptions } from '../src/lp-loader'
+export const makeConfig = (isProduction = false) => {
+  const isDevelopment = !isProduction
+
+  process.env.LP_DEBUG = 'true'
+  
+  const appEntry = [
+    path.join(__dirname, '../app/app')
+  ]
+
+  const buildDir = path.join(__dirname, 'build')
+  const tsLoaderOptions = {
+    compilerOptions: {
+      module: "esnext",
+      declaration: false,
+      moduleResolution: 'node'
+    }
+  }
+  const lpTsIndexFiles = /dict(\\|\/)index\.ts/
+  const lpLoader = path.join(__dirname, '../src/lp-loader')
+  const config: webpack.Configuration = {
+    //mode: 'development',    
+    entry: {
+      app: appEntry
+    },
+    output: {
+      path: buildDir,
+      filename: '[name]-[hash].js',
+      chunkFilename: '[name]-[chunkhash].js',
+      publicPath: '/'
+    },
+    plugins: [
+      //new (webpack as any).NamedModulesPlugin(),
+      ...isDevelopment ? [
+        new webpack.HotModuleReplacementPlugin()
+      ] : [
+          new CleanWebpackPlugin([buildDir], {
+            root: path.resolve(__dirname, '../..')
+          })
+        ],
+      new HtmlWebpackPlugin({
+        title: 'LP-Loader ' + (isDevelopment ? 'Dev' : 'Build'),
+        filename: 'index.html'
+      })
+    ],
+    module: {
+      rules: [
+        {
+          test: lpTsIndexFiles, loaders: [
+            {}
+            {
+              loader: lpLoader, query: {
+                name: 'language.pack',
+                include: /(\\|\/)\w{2}\.ts/
+              } as LoaderOptions
+            },
+            //{ loader: 'ts-loader', query: tsLoaderOptions } as any
+            //{ loader: path.join(__dirname, 'ts-simple-loader'), query: tsLoaderOptions } as any
+          ]
+        },
+        {
+          test: /\.ts$/,
+          loader: 'ts-loader',
+          //iexclude: [lpTsIndexFiles],
+          query: tsLoaderOptions
+        },
+        { test: /\.css$/, loader: 'style!css' },
+      ]
+    },
+    devtool: isDevelopment ? 'eval' : 'inline-source-map',
+    resolve: {
+      extensions: ['.ts', '.js'],
+      alias: {
+        //'lp': path.resolve(__dirname, '../../lib/lp-loader.ts'),
+      }
+    },
+    resolveLoader: {
+      extensions: ['.ts', '.js'],
+      alias: {
+        //'ts': 'awesome-typescript-loader'
+        //'ts': 'ts-loader'
+      },
+      modules: [
+        path.resolve(__dirname, 'node_modules'),
+        path.resolve(__dirname, '../node_modules'),
+        path.resolve(__dirname, '../src'),
+      ]
+    }
+  }
+
+  return config
+}
+
+export default makeConfig()

webpack5/webpack3/build.ts

@@ -0,0 +1,7 @@
+import * as webpack from 'webpack'
+import { makeConfig } from './webpack.config'
+
+const compiler = webpack(makeConfig(true))
+
+compiler.run((err, stats) => {
+})

webpack5/webpack3/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "webpack3",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@types/webpack": "^3.0.10",
+    "clean-webpack-plugin": "^0.1.16",
+    "html-webpack-plugin": "^2.30.1",
+    "ts-loader": "^2.3.4",
+    "webpack": "^3.5.5",
+    "webpack-dev-server": "^2.7.1"
+  }
+}