From 321f2e3bab7ced65b0de49ec9eb6f2de39cf5c3a Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 7 Apr 2017 16:49:49 -0400 Subject: [PATCH 1/3] Add EntryResolvePlugin Webpack plugin --- webpack.config.js | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/webpack.config.js b/webpack.config.js index eda30a60388b3..180f51c5248ff 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,10 +2,47 @@ * External dependencies */ +const path = require( 'path' ); const glob = require( 'glob' ); const webpack = require( 'webpack' ); const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); +/** + * Webpack plugin that adds the containing directory of each entry point as an + * effective `resolve.modules` root for all module resolution within that path. + */ +class EntryResolvePlugin { + apply( compiler ) { + // Map entries into array of absolute paths + const entryRoots = Object.keys( compiler.options.entry ).map( ( entry ) => { + return path.dirname( path.resolve( compiler.options.entry[ entry ] ) ); + } ); + + compiler.plugin( 'after-resolvers', () => { + compiler.resolvers.normal.apply( { + apply( resolver ) { + resolver.plugin( 'module', ( request, callback ) => { + // Find entry root which contains the requesting path + const resolvePath = entryRoots.find( ( entryRoot ) => { + return request.path.startsWith( entryRoot ); + } ); + + if ( ! resolvePath ) { + return callback(); + } + + // Add entry root as resolve base path + resolver.doResolve( 'resolve', Object.assign( {}, request, { + path: resolvePath, + request: './' + request.request + } ), '', callback ); + } ); + } + } ); + } ); + } +} + const config = { entry: { i18n: './i18n/index.js', @@ -55,6 +92,7 @@ const config = { ] }, plugins: [ + new EntryResolvePlugin(), new ExtractTextPlugin( { filename: './[name]/build/style.css' } ), From 1473c6801b9238300eeae31de27388424756d8b7 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 7 Apr 2017 16:52:13 -0400 Subject: [PATCH 2/3] Convert relative import path traversal to per-module-root --- editor/components/toolbar/index.js | 2 +- editor/header/mode-switcher/index.js | 2 +- editor/inserter/button.js | 2 +- editor/inserter/index.js | 2 +- editor/layout/index.js | 6 +++--- editor/modes/visual-editor/block.js | 2 +- editor/modes/visual-editor/index.js | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/editor/components/toolbar/index.js b/editor/components/toolbar/index.js index a704b5b820ee1..48b97f385f996 100644 --- a/editor/components/toolbar/index.js +++ b/editor/components/toolbar/index.js @@ -7,7 +7,7 @@ import classNames from 'classnames'; * Internal dependencies */ import './style.scss'; -import Dashicon from '../dashicon'; +import Dashicon from 'components/dashicon'; function Toolbar( { controls } ) { if ( ! controls || ! controls.length ) { diff --git a/editor/header/mode-switcher/index.js b/editor/header/mode-switcher/index.js index 9e07b70387be0..f8ae9478ffe61 100644 --- a/editor/header/mode-switcher/index.js +++ b/editor/header/mode-switcher/index.js @@ -7,7 +7,7 @@ import { connect } from 'react-redux'; * Internal dependencies */ import './style.scss'; -import Dashicon from '../../components/dashicon'; +import Dashicon from 'components/dashicon'; class ModeSwitcher extends wp.element.Component { constructor() { diff --git a/editor/inserter/button.js b/editor/inserter/button.js index 1a2a4643f5959..92eea4d7cfdb5 100644 --- a/editor/inserter/button.js +++ b/editor/inserter/button.js @@ -2,7 +2,7 @@ * Internal dependencies */ import Inserter from './'; -import Dashicon from '../components/dashicon'; +import Dashicon from 'components/dashicon'; class InserterButton extends wp.element.Component { constructor() { diff --git a/editor/inserter/index.js b/editor/inserter/index.js index 7ec497dd7dcde..533d188ebc598 100644 --- a/editor/inserter/index.js +++ b/editor/inserter/index.js @@ -2,7 +2,7 @@ * Internal dependencies */ import './style.scss'; -import Dashicon from '../components/dashicon'; +import Dashicon from 'components/dashicon'; function Inserter() { const blocks = wp.blocks.getBlocks(); diff --git a/editor/layout/index.js b/editor/layout/index.js index 3d8494694f18d..47af35cda025f 100644 --- a/editor/layout/index.js +++ b/editor/layout/index.js @@ -6,9 +6,9 @@ import { connect } from 'react-redux'; /** * Internal dependencies */ -import Header from '../header'; -import TextEditor from '../modes/text-editor'; -import VisualEditor from '../modes/visual-editor'; +import Header from 'header'; +import TextEditor from 'modes/text-editor'; +import VisualEditor from 'modes/visual-editor'; function Layout( { mode } ) { return ( diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index d379b30d8b696..b4f19e1a80b10 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; /** * Internal dependencies */ -import Toolbar from '../../components/toolbar'; +import Toolbar from 'components/toolbar'; function VisualEditorBlock( props ) { const { block } = props; diff --git a/editor/modes/visual-editor/index.js b/editor/modes/visual-editor/index.js index 7fcecd5d6ea71..c0a76cb850523 100644 --- a/editor/modes/visual-editor/index.js +++ b/editor/modes/visual-editor/index.js @@ -7,7 +7,7 @@ import { connect } from 'react-redux'; * Internal dependencies */ import './style.scss'; -import InserterButton from '../../inserter/button'; +import InserterButton from 'inserter/button'; import VisualEditorBlock from './block'; function VisualEditor( { blocks } ) { From c8e8a5dfcf749e27ba2e69d60f103b98615ddfd5 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 10 Apr 2017 16:38:16 -0400 Subject: [PATCH 3/3] Reference ResolveEntryModulesPlugin as newly externalized module --- package.json | 1 + webpack.config.js | 40 ++-------------------------------------- 2 files changed, 3 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 8d35ff040b5b8..fc7247bea80f0 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "raw-loader": "^0.5.1", "react": "^15.4.2", "react-dom": "^15.4.2", + "resolve-entry-modules-webpack-plugin": "^1.0.0", "sass-loader": "^6.0.3", "sinon": "^2.1.0", "sinon-chai": "^2.9.0", diff --git a/webpack.config.js b/webpack.config.js index 180f51c5248ff..e54eaed0f1311 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,46 +2,10 @@ * External dependencies */ -const path = require( 'path' ); const glob = require( 'glob' ); const webpack = require( 'webpack' ); const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); - -/** - * Webpack plugin that adds the containing directory of each entry point as an - * effective `resolve.modules` root for all module resolution within that path. - */ -class EntryResolvePlugin { - apply( compiler ) { - // Map entries into array of absolute paths - const entryRoots = Object.keys( compiler.options.entry ).map( ( entry ) => { - return path.dirname( path.resolve( compiler.options.entry[ entry ] ) ); - } ); - - compiler.plugin( 'after-resolvers', () => { - compiler.resolvers.normal.apply( { - apply( resolver ) { - resolver.plugin( 'module', ( request, callback ) => { - // Find entry root which contains the requesting path - const resolvePath = entryRoots.find( ( entryRoot ) => { - return request.path.startsWith( entryRoot ); - } ); - - if ( ! resolvePath ) { - return callback(); - } - - // Add entry root as resolve base path - resolver.doResolve( 'resolve', Object.assign( {}, request, { - path: resolvePath, - request: './' + request.request - } ), '', callback ); - } ); - } - } ); - } ); - } -} +const ResolveEntryModulesPlugin = require( 'resolve-entry-modules-webpack-plugin' ); const config = { entry: { @@ -92,7 +56,7 @@ const config = { ] }, plugins: [ - new EntryResolvePlugin(), + new ResolveEntryModulesPlugin(), new ExtractTextPlugin( { filename: './[name]/build/style.css' } ),