diff --git a/examples/plugin/package.json b/examples/plugin/package.json index 0bc05bc5a..8475eef46 100644 --- a/examples/plugin/package.json +++ b/examples/plugin/package.json @@ -18,7 +18,9 @@ "bootstrap": "wpackio-scripts bootstrap", "start": "wpackio-scripts start", "build": "wpackio-scripts build", - "archive": "wpackio-scripts pack" + "archive": "wpackio-scripts pack", + "start:dev": "../../packages/scripts/lib/bin/index.js start", + "build:dev": "../../packages/scripts/lib/bin/index.js build" }, "dependencies": { "@types/webpack-env": "^1.13.6", diff --git a/examples/plugin/src/app/bg.jpg b/examples/plugin/src/app/bg.jpg new file mode 100755 index 000000000..8348e3878 Binary files /dev/null and b/examples/plugin/src/app/bg.jpg differ diff --git a/examples/plugin/src/app/index.css b/examples/plugin/src/app/index.css index 8e774627e..a0ffa8d07 100644 --- a/examples/plugin/src/app/index.css +++ b/examples/plugin/src/app/index.css @@ -6,4 +6,9 @@ body { .site-title a { color: azure !important; background-color: aqua !important; + background-image: url('./bg.jpg'); +} +.site-content { + background: url('./image.png') no-repeat top left; + background-size: 100px 70px; } diff --git a/examples/plugin/yarn.lock b/examples/plugin/yarn.lock index 3bc42ce39..1637b575a 100644 --- a/examples/plugin/yarn.lock +++ b/examples/plugin/yarn.lock @@ -1106,10 +1106,10 @@ "@webassemblyjs/wast-parser" "1.7.11" "@xtuc/long" "4.2.1" -"@wpackio/babel-preset-base@^2.6.0": - version "2.6.0" - resolved "https://registry.yarnpkg.com/@wpackio/babel-preset-base/-/babel-preset-base-2.6.0.tgz#7933a263ea4680158b82af763031648f3f30c0ba" - integrity sha512-LFfn4sZs1rnbD/3vIgjiJnX1vcvl/ioonF1XhdTjRORLhzxXF04WM5/zyZ7N/2d34OuPQWyNKVlR2jrAhZMSfA== +"@wpackio/babel-preset-base@^2.8.0": + version "2.8.0" + resolved "https://registry.yarnpkg.com/@wpackio/babel-preset-base/-/babel-preset-base-2.8.0.tgz#f661d8ea2cec14ab348d8c493e42a443deba7583" + integrity sha512-qAUG+/6cBEq9KYqNJLdHqYBuy0fAOSjrq28tnVAsKVgcBia7Hdwlm0VTz8xlNQPhFaHcswK0BP9Lw53Vk1m7IA== dependencies: "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-proposal-class-properties" "^7.1.0" @@ -1125,7 +1125,7 @@ "@types/webpack-env" "^1.13.6" "@wpackio/scripts@file:../../packages/scripts": - version "2.6.0" + version "2.8.0" dependencies: "@babel/core" "^7.1.0" "@babel/preset-flow" "^7.0.0" @@ -1152,7 +1152,7 @@ "@types/webpack-dev-middleware" "^2.0.2" "@types/webpack-env" "^1.13.6" "@types/webpack-hot-middleware" "^2.16.4" - "@wpackio/babel-preset-base" "^2.6.0" + "@wpackio/babel-preset-base" "^2.8.0" archiver "^3.0.0" autoprefixer "^9.1.5" babel-loader "^8.0.2" diff --git a/packages/scripts/src/config/WebpackConfigHelper.ts b/packages/scripts/src/config/WebpackConfigHelper.ts index 023ee5f74..2c8dc272b 100644 --- a/packages/scripts/src/config/WebpackConfigHelper.ts +++ b/packages/scripts/src/config/WebpackConfigHelper.ts @@ -63,7 +63,7 @@ interface CommonWebpackConfig { */ export class WebpackConfigHelper { // This is where all the filename will be prefixed, so we create a directory - public readonly outputInnerDir: string; + public readonly appDir: string; // Actual outputPath as provided by user public readonly outputPath: string; private file: FileConfig; @@ -107,7 +107,7 @@ export class WebpackConfigHelper { // all middlewares would actually use the `name` from webpack config // to separate updates. const { name } = this.file; - this.outputInnerDir = slugify(name, { lower: true }); + this.appDir = slugify(name, { lower: true }); this.outputPath = path.join(this.cwd, outputPath); } @@ -201,7 +201,7 @@ export class WebpackConfigHelper { // We do not use path.resolve, because we expect outputPath to be // relative. @todo: create a test here path: this.outputPath, - filename: `${this.outputInnerDir}/[name].js`, + filename: `${this.appDir}/[name].js`, // leave blank because we would handle with free variable // __webpack_public_path__ in runtime. publicPath: '', @@ -248,20 +248,18 @@ export class WebpackConfigHelper { }, }), // Clean dist directory - new cleanWebpackPlugin( - [`${this.outputPath}/${this.outputInnerDir}`], - { root: this.cwd, verbose: false } - ), + new cleanWebpackPlugin([`${this.outputPath}/${this.appDir}`], { + root: this.cwd, + verbose: false, + }), // Initiate mini css extract new miniCssExtractPlugin({ - filename: `${this.outputInnerDir}/[name].css`, + filename: `${this.appDir}/[name].css`, }), // Create Manifest for PHP Consumption new WebpackAssetsManifest({ writeToDisk: true, - output: `${this.outputPath}/${ - this.outputInnerDir - }/manifest.json`, + output: `${this.outputPath}/${this.appDir}/manifest.json`, publicPath: ``, // We dont put ${this.config.outputPath}/ here because, PHP will pick it up anyway. entrypoints: true, entrypointsKey: 'wpackioEp', @@ -468,21 +466,51 @@ ${bannerConfig.copyrightText}${bannerConfig.credit ? creditNote : ''}`, }); } // create file rules - const fileRules: webpack.RuleSetRule = { - test: /\.(woff|woff2|eot|ttf|otf|png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/, + // But use relativePath for style type resources like sass, scss or css + // This is needed because we can't know the absolute publicPath + // of CSS imported assets. + const fileLoaderTest = /\.(woff|woff2|eot|ttf|otf|png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/; + const fileLoaderOptions = { + name: `[name]-[hash:8].[ext]`, + outputPath: `${this.appDir}/assets/`, + }; + const fileRulesNonStyle: webpack.RuleSetRule = { + test: fileLoaderTest, use: [ { loader: 'file-loader', options: { - name: 'asset-[hash].[ext]', - outputPath: `${this.outputInnerDir}/assets/`, + ...fileLoaderOptions, }, }, ], + issuer: location => !/\.(sa|sc|c)ss$/.test(location), + }; + const fileRulesStyle: webpack.RuleSetRule = { + test: fileLoaderTest, + use: [ + { + loader: 'file-loader', + options: { + ...fileLoaderOptions, + // Here mention the public path relative to the css + // file directory, but only during production mode + // for development mode, it is still undefined + publicPath: this.isDev ? undefined : `assets/`, + }, + }, + ], + issuer: location => /\.(sa|sc|c)ss$/.test(location), }; return { - rules: [jsRules, tsRules, styleRules, fileRules], + rules: [ + jsRules, + tsRules, + styleRules, + fileRulesNonStyle, + fileRulesStyle, + ], }; }