From cf1a71853400e1cc7c66eaac816917c744b22268 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Tue, 14 Jul 2020 11:29:25 -0400 Subject: [PATCH 1/2] Fix windows builds breaking due to mixed paths --- config/add-css-types.js | 8 +++++--- package-lock.json | 22 +++++++++++++++------- package.json | 1 + webpack.config.js | 12 ++++++------ 4 files changed, 27 insertions(+), 16 deletions(-) diff --git a/config/add-css-types.js b/config/add-css-types.js index fcfeab01..97ef9a11 100644 --- a/config/add-css-types.js +++ b/config/add-css-types.js @@ -2,6 +2,7 @@ const DtsCreator = require('typed-css-modules'); const chokidar = require('chokidar'); const util = require('util'); const sass = require('node-sass'); +const normalizePath = require('normalize-path'); const sassRender = util.promisify(sass.render); @@ -29,9 +30,10 @@ function addCssTypes(rootPaths, opts = {}) { let ready = false; for (const rootPath of rootPaths) { + const rootPathUnix = normalizePath(rootPath); // Look for scss & css in each path. - paths.push(rootPath + '/**/*.scss'); - paths.push(rootPath + '/**/*.css'); + paths.push(rootPathUnix + '/**/*.scss'); + paths.push(rootPathUnix + '/**/*.css'); } // For simplicity, the watcher is used even if we're not watching. @@ -68,7 +70,7 @@ function addCssTypes(rootPaths, opts = {}) { // And if we're not watching, close the watcher. if (!watch) watcher.close(); }); - }) + }); } module.exports = addCssTypes; diff --git a/package-lock.json b/package-lock.json index 63426a05..f113c6b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1775,6 +1775,17 @@ "requires": { "micromatch": "^3.1.4", "normalize-path": "^2.1.1" + }, + "dependencies": { + "normalize-path": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", + "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", + "dev": true, + "requires": { + "remove-trailing-separator": "^1.0.1" + } + } } }, "aproba": { @@ -9953,13 +9964,10 @@ } }, "normalize-path": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz", - "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=", - "dev": true, - "requires": { - "remove-trailing-separator": "^1.0.1" - } + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true }, "normalize-url": { "version": "2.0.1", diff --git a/package.json b/package.json index cc76ca3f..30e5635f 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "minimatch": "3.0.4", "node-fetch": "2.6.0", "node-sass": "4.13.0", + "normalize-path": "^3.0.0", "optimize-css-assets-webpack-plugin": "5.0.1", "pointer-tracker": "2.0.3", "preact": "8.4.2", diff --git a/webpack.config.js b/webpack.config.js index 1b840520..3b31bfc6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -22,10 +22,10 @@ module.exports = async function (_, env) { const isProd = env.mode === 'production'; const nodeModules = path.join(__dirname, 'node_modules'); const componentStyleDirs = [ - path.join(__dirname, 'src/components'), - path.join(__dirname, 'src/codecs'), - path.join(__dirname, 'src/custom-els'), - path.join(__dirname, 'src/lib'), + path.join(__dirname, 'src', 'components'), + path.join(__dirname, 'src', 'codecs'), + path.join(__dirname, 'src', 'custom-els'), + path.join(__dirname, 'src', 'lib') ]; await addCssTypes(componentStyleDirs, { watch: !isProd }); @@ -53,7 +53,7 @@ module.exports = async function (_, env) { resolveLoader: { alias: { // async-component-loader returns a wrapper component that waits for the import to load before rendering: - async: path.join(__dirname, 'config/async-component-loader') + async: path.join(__dirname, 'config', 'async-component-loader') } }, module: { @@ -143,7 +143,7 @@ module.exports = async function (_, env) { { // All the codec files define a global with the same name as their file name. `exports-loader` attaches those to `module.exports`. test: /\.js$/, - include: path.join(__dirname, 'src/codecs'), + include: path.join(__dirname, 'src', 'codecs'), loader: 'exports-loader' }, { From 796324ad7121d42792daded540f38c2f82a45714 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Tue, 14 Jul 2020 11:29:56 -0400 Subject: [PATCH 2/2] Update webpack configuration for Webpack 4 --- webpack.config.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 3b31bfc6..ccee4375 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -18,7 +18,8 @@ const addCssTypes = require('./config/add-css-types'); const VERSION = require('./package.json').version; -module.exports = async function (_, env) { +/** @returns {Promise} */ +module.exports = async function(_, env) { const isProd = env.mode === 'production'; const nodeModules = path.join(__dirname, 'node_modules'); const componentStyleDirs = [ @@ -57,14 +58,13 @@ module.exports = async function (_, env) { } }, module: { - // Disable the default JavaScript handling: - defaultRules: [], rules: [ { oneOf: [ { test: /(\.mjs|\.esm\.js)$/i, - type: 'javascript/esm', + // don't use strict esm resolution for mjs: + type: 'javascript/auto', resolve: {}, parser: { harmony: true, @@ -183,6 +183,7 @@ module.exports = async function (_, env) { format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m\r', renderThrottle: 100, summary: false, + total: 10, clear: true }), @@ -191,17 +192,13 @@ module.exports = async function (_, env) { 'assets', '**/*.{css,js,json,html,map}' ], { - root: path.join(__dirname, 'build'), - verbose: false, - beforeEmit: true - }), + root: path.join(__dirname, 'build'), + verbose: false, + beforeEmit: true + }), new WorkerPlugin(), - // Automatically split code into async chunks. - // See: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366 - isProd && new webpack.optimize.SplitChunksPlugin({}), - // In production, extract all CSS to produce files on disk, even for // lazy-loaded CSS chunks. CSS for async chunks is loaded on-demand. // This is a modern Webpack 4 replacement for ExtractTextPlugin. @@ -302,6 +299,10 @@ module.exports = async function (_, env) { ].filter(Boolean), // Filter out any falsey plugin array entries. optimization: { + splitChunks: { + // Automatically split code into async chunks. + // See: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366 + }, minimizer: [ new TerserPlugin({ sourceMap: isProd,