opensourcemirror
/
webpack
mirror of https://github.com/webpack/webpack.git
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor: fix review comments

This commit is contained in:
Sergey Melyukov 2019-11-17 19:49:48 +03:00 committed by Tobias Koppers
parent 491cb57cb4
commit 2d5844c56e
11 changed files with 116 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
declarations/plugins/AssetModulesPlugin.d.ts vendored Normal file
View File

@ -0,0 +1,38 @@
/**
* This file was automatically generated.
* DO NOT MODIFY BY HAND.
* Run `yarn special-lint-fix` to update
*/
/**
* Function that executes for module source abd resource and should return new module source
*
* This interface was referenced by `AssetModulesPluginOptions`'s JSON-Schema
* via the `definition` "DataUrlFn".
*/
export type DataUrlFn = (
source: string | Buffer,
resourcePath: string
) => string | Buffer | null;
export interface AssetModulesPluginOptions {
dataUrl?: DataUrlOptions | DataUrlFn;
}
/**
* This interface was referenced by `AssetModulesPluginOptions`'s JSON-Schema
* via the `definition` "DataUrlOptions".
*/
export interface DataUrlOptions {
/**
* Module output encoding
*/
encoding?: false | "base64";
/**
* Maximum size of files that should be inline as modules. Default: 8kb
*/
maxSize?: number;
/**
* Module output mimetype (getting from file ext by default)
*/
mimetype?: string;
}

14
examples/asset-advanced/README.md
View File

@ -1,6 +1,6 @@
This very simple example shows usage of the asset module type.
This example shows usage of the asset module type with asset generator options customization.
Files can be imported like other modules without file-loader.
Files can be imported like other modules without file-loader or url-loader.
# example.js
@ -49,6 +49,10 @@ module.exports = {
type: "asset",
generator: {
dataUrl: content => {
if (typeof content !== "string") {
content = content.toString();
}
// just like in svg-url-loader https://github.com/bhovhannes/svg-url-loader/blob/e5ef4445f2fbb6f85245d8a6c88e2ea9a4377357/src/loader.js#L38-L44
const REGEX_DOUBLE_QUOTE = /"/g;
const REGEX_MULTIPLE_SPACES = /\s+/g;
@ -131,8 +135,8 @@ function createImageElement(title, src) {
!*** ./images/file.svg ***!
\*************************/
/*! exports [maybe provided (runtime-defined)] [no usage info] */
/*! runtime requirements: */
/***/ (() => {
/*! runtime requirements: module */
/***/ ((module) => {
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Ctitle%3Eicon-square-small%3C/title%3E%3Cpath fill='%23FFF' d='M300 .1L565 150v299.9L300 599.8 35 449.9V150z'/%3E%3Cpath fill='%238ED6FB' d='M517.7 439.5L308.8 557.8v-92L439 394.1l78.7 45.4zm14.3-12.9V179.4l-76.4 44.1v159l76.4 44.1zM81.5 439.5l208.9 118.2v-92l-130.2-71.6-78.7 45.4zm-14.3-12.9V179.4l76.4 44.1v159l-76.4 44.1zm8.9-263.2L290.4 42.2v89l-137.3 75.5-1.1.6-75.9-43.9zm446.9 0L308.8 42.2v89L446 206.8l1.1.6 75.9-44z'/%3E%3Cpath fill='%231C78C0' d='M290.4 444.8L162 374.1V234.2l128.4 74.1v136.5zm18.4 0l128.4-70.6v-140l-128.4 74.1v136.5zM299.6 303zm-129-85l129-70.9L428.5 218l-128.9 74.4-129-74.4z'/%3E%3C/svg%3E";
@ -230,7 +234,7 @@ Hash: 0a1b2c3d4e5f6a7b8c9d
Version: webpack 5.0.0-beta.7
Asset Size
images/44f5018145f1c78c78e8.svg 656 bytes [emitted] [immutable] [name: (main)]
output.js 5.07 KiB [emitted] [name: main]
output.js 5.08 KiB [emitted] [name: main]
Entrypoint main = output.js (images/44f5018145f1c78c78e8.svg)
chunk output.js (main) 1.35 KiB (javascript) 656 bytes (asset) 895 bytes (runtime) [entry] [rendered]
> ./example.js main

4
examples/asset-advanced/template.md
View File

@ -1,6 +1,6 @@
This very simple example shows usage of the asset module type.
This example shows usage of the asset module type with asset generator options customization.
Files can be imported like other modules without file-loader.
Files can be imported like other modules without file-loader or url-loader.
# example.js

4
examples/asset-advanced/webpack.config.js
View File

@ -9,6 +9,10 @@ module.exports = {
type: "asset",
generator: {
dataUrl: content => {
if (typeof content !== "string") {
content = content.toString();
}
// just like in svg-url-loader https://github.com/bhovhannes/svg-url-loader/blob/e5ef4445f2fbb6f85245d8a6c88e2ea9a4377357/src/loader.js#L38-L44
const REGEX_DOUBLE_QUOTE = /"/g;
const REGEX_MULTIPLE_SPACES = /\s+/g;

13
examples/asset-simple/README.md
View File

File diff suppressed because one or more lines are too long

5
examples/asset-simple/webpack.config.js
View File

@ -6,10 +6,7 @@ module.exports = {
rules: [
{
test: /\.(png|jpg|svg)$/,
type: "asset",
generator: {
foo: "bar"
}
type: "asset"
}
]
},

4
lib/asset/AssetGenerator.js
View File

@ -8,15 +8,15 @@
const Generator = require("../Generator");
/** @typedef {import("webpack-sources").Source} Source */
/** @typedef {import("../../declarations/plugins/AssetModulesPlugin").AssetModulesPluginOptions} AssetModulesPluginOptions */
/** @typedef {import("../Generator").GenerateContext} GenerateContext */
/** @typedef {import("../NormalModule")} NormalModule */
/** @typedef {import("./AssetModulesPlugin").GeneratorOptions} GeneratorOptions */
const TYPES = new Set(["asset"]);
class AssetGenerator extends Generator {
/**
* @param {GeneratorOptions} options the options
* @param {AssetModulesPluginOptions} options the options
*/
constructor(options) {
super();

7
lib/asset/AssetJavascriptGenerator.js
View File

@ -11,12 +11,12 @@ const RuntimeGlobals = require("../RuntimeGlobals");
const encode = require("./encoder");
/** @typedef {import("webpack-sources").Source} Source */
/** @typedef {import("../../declarations/plugins/AssetModulesPlugin").AssetModulesPluginOptions} AssetModulesPluginOptions */
/** @typedef {import("../Compilation")} Compilation */
/** @typedef {import("../Compiler")} Compiler */
/** @typedef {import("../Generator").GenerateContext} GenerateContext */
/** @typedef {import("../NormalModule")} NormalModule */
/** @typedef {import("../RuntimeTemplate")} RuntimeTemplate */
/** @typedef {import("./AssetModulesPlugin").GeneratorOptions} GeneratorOptions */
const TYPES = new Set(["javascript"]);
@ -30,7 +30,7 @@ class AssetJavascriptGenerator extends Generator {
/**
* @param {Compilation} compilation the compilation
* @param {GeneratorOptions} options the options
* @param {AssetModulesPluginOptions} options the options
*/
constructor(compilation, options) {
super();
@ -46,6 +46,8 @@ class AssetJavascriptGenerator extends Generator {
generate(module, { chunkGraph, runtimeTemplate, runtimeRequirements }) {
const encodedSource = encode(module, this.options);
runtimeRequirements.add(RuntimeGlobals.module);
if (encodedSource) {
module.buildMeta.dataUrlAsset = true;
return new RawSource(
@ -61,7 +63,6 @@ class AssetJavascriptGenerator extends Generator {
chunkGraph
});
runtimeRequirements.add(RuntimeGlobals.module);
runtimeRequirements.add(RuntimeGlobals.publicPath); // add __webpack_require__.p
// TODO: (hiroppy) use ESM

26
lib/asset/AssetModulesPlugin.js
View File

@ -5,6 +5,8 @@
"use strict";
const validateOptions = require("schema-utils");
const schema = require("../../schemas/plugins/AssetModulesPlugin.json");
const Generator = require("../Generator");
const { compareModulesByIdentifier } = require("../util/comparators");
const AssetGenerator = require("./AssetGenerator");
@ -16,25 +18,6 @@ const AssetParser = require("./AssetParser");
/** @typedef {import("../Compiler")} Compiler */
/** @typedef {import("../Module")} Module */
/**
* @typedef {Object} DataUrlOptions
* @property {string | false} encoding?
* @property {string} mimetype?
* @property {number} maxSize?
*/
/**
* @callback DataUrlFn
* @param {string} source
* @param {string} resourcePath
* @returns {string|null}
*/
/**
* @typedef {Object} GeneratorOptions
* @property {DataUrlOptions | DataUrlFn} dataUrl?
*/
const type = "asset";
const plugin = "AssetModulesPlugin";
@ -54,7 +37,10 @@ class AssetModulesPlugin {
normalModuleFactory.hooks.createGenerator
.for(type)
.tap(plugin, generatorOptions => {
// todo add scheme validation
validateOptions(schema, generatorOptions, {
name: "Asset Modules Plugin"
});
return Generator.byType({
asset: new AssetGenerator(generatorOptions),
javascript: new AssetJavascriptGenerator(

10
lib/asset/encoder.js
View File

@ -9,12 +9,12 @@ const mime = require("mime");
const path = require("path");
/** @typedef {import("webpack-sources").Source} Source */
/** @typedef {import("../../declarations/plugins/AssetModulesPlugin").AssetModulesPluginOptions} AssetModulesPluginOptions */
/** @typedef {import("../NormalModule")} NormalModule */
/** @typedef {import("./AssetModulesPlugin").GeneratorOptions} GeneratorOptions */
/**
* @param {NormalModule} module a module to encode
* @param {GeneratorOptions} options the options to the encoder
* @param {AssetModulesPluginOptions} options the options to the encoder
* @returns {string|null} encoded source
*/
module.exports = (module, options) => {
@ -22,11 +22,7 @@ module.exports = (module, options) => {
let content = originalSource.source();
if (typeof options.dataUrl === "function") {
if (typeof content !== "string") {
content = content.toString();
}
return options.dataUrl.call(null, content, module.resource);
return options.dataUrl.call(null, content, module.nameForCondition());
}
const dataUrlOptions = {

42
schemas/plugins/AssetModulesPlugin.json Normal file
View File

@ -0,0 +1,42 @@
{
"definitions": {
"DataUrlFn": {
"description": "Function that executes for module source abd resource and should return new module source",
"instanceof": "Function",
"tsType": "((source: string|Buffer, resourcePath: string) => string|Buffer|null)"
},
"DataUrlOptions": {
"type": "object",
"additionalProperties": false,
"properties": {
"encoding": {
"description": "Module output encoding",
"enum": [false, "base64"]
},
"maxSize": {
"description": "Maximum size of files that should be inline as modules. Default: 8kb",
"type": "number"
},
"mimetype": {
"description": "Module output mimetype (getting from file ext by default)",
"type": "string"
}
}
}
},
"title": "AssetModulesPluginOptions",
"type": "object",
"additionalProperties": false,
"properties": {
"dataUrl": {
"oneOf": [
{
"$ref": "#/definitions/DataUrlOptions"
},
{
"$ref": "#/definitions/DataUrlFn"
}
]
}
}
}