Skip to content
This repository was archived by the owner on Dec 27, 2023. It is now read-only.

Optional Configuration For Custom Webpack Loaders #162

Merged
merged 5 commits into from
Mar 1, 2018
Merged

Optional Configuration For Custom Webpack Loaders #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5a6a9c2
added custom rules
themoch Mar 1, 2018
4517ae3
second
themoch Mar 1, 2018
c1376cd
Added a more simple path and success notification
themoch Mar 1, 2018
797fbf1
Merge branch 'master' into custom-rules
themoch Mar 1, 2018
779a7ac
added test coverage
themoch Mar 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion acceptance-components/react-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
"mandatory": false,
"type": "string"
}
}
},
"customWebpackRules": "customWebpackRules.config.js"
},
"dependencies": {
"normalize.css": "^7.0.0",
Expand Down
35 changes: 35 additions & 0 deletions mocks/react-component-with-css/customWebpackRules.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
"use strict";

// Example: Each index needs to be a valid Webpack Rule.
// Each loader needs to be included in your package.json as a devDependency

module.exports = [
// {
// test: /\.css$/,
// loader: ExtractTextPlugin.extract({
// use: [
// {
// loader: require.resolve("css-loader"),
// options: {
// importLoaders: 1,
// modules: true,
// localIdentName: "[local]__[hash:base64:8]",
// camelCase: true
// }
// },
// {
// loader: require.resolve("postcss-loader"),
// options: {
// ident: "postcss",
// plugins: [
// require("postcss-import"),
// require("postcss-extend"),
// require("postcss-icss-values"),
// require("autoprefixer")
// ]
// }
// }
// ]
// })
// }
];
3 changes: 2 additions & 1 deletion mocks/react-component-with-css/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"src": "app.js",
"type": "oc-template-react"
}
}
},
"customWebpackRules": "customWebpackRules.config.js"
},
"devDependencies": {
"oc-template-react-compiler": "*"
Expand Down
35 changes: 35 additions & 0 deletions mocks/react-component/customWebpackRules.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
"use strict";

// Example: Each index needs to be a valid Webpack Rule.
// Each loader needs to be included in your package.json as a devDependency

module.exports = [
// {
// test: /\.css$/,
// loader: ExtractTextPlugin.extract({
// use: [
// {
// loader: require.resolve("css-loader"),
// options: {
// importLoaders: 1,
// modules: true,
// localIdentName: "[local]__[hash:base64:8]",
// camelCase: true
// }
// },
// {
// loader: require.resolve("postcss-loader"),
// options: {
// ident: "postcss",
// plugins: [
// require("postcss-import"),
// require("postcss-extend"),
// require("postcss-icss-values"),
// require("autoprefixer")
// ]
// }
// }
// ]
// })
// }
];
3 changes: 2 additions & 1 deletion mocks/react-component/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"src": "app.js",
"type": "oc-template-react"
}
}
},
"customWebpackRules": "customWebpackRules.config.js"
},
"devDependencies": {
"oc-template-react-compiler": "*"
Expand Down
18 changes: 12 additions & 6 deletions packages/oc-template-react-compiler/__tests__/__snapshots__/compile.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ Object {
},
"name": "react-component",
"oc": Object {
"customWebpackRules": "customWebpackRules.config.js",
"date": "",
"files": Object {
"dataProvider": Object {
Expand Down Expand Up @@ -46,7 +47,7 @@ say(text);
},
Object {
"path": "../../../mocks/react-component/_compile-tests-package1/package.json",
"source": "{\\"name\\":\\"react-component\\",\\"version\\":\\"1.0.0\\",\\"oc\\":{\\"files\\":{\\"static\\":[\\"assets\\"],\\"template\\":{\\"type\\":\\"oc-template-react\\",\\"hashKey\\":\\"152b837874b750db913223c0e9417aa8375bd3e3\\",\\"src\\":\\"template.js\\",\\"version\\":\\"6.6.6\\"},\\"dataProvider\\":{\\"type\\":\\"node.js\\",\\"hashKey\\":\\"bb7495f62d9b11d749718b9ebf0b75a6751fffa0\\",\\"src\\":\\"server.js\\"}},\\"version\\":\\"1.0.0\\",\\"packaged\\":true,},\\"devDependencies\\":{\\"oc-template-react-compiler\\":\\"*\\"}}
"source": "{\\"name\\":\\"react-component\\",\\"version\\":\\"1.0.0\\",\\"oc\\":{\\"files\\":{\\"static\\":[\\"assets\\"],\\"template\\":{\\"type\\":\\"oc-template-react\\",\\"hashKey\\":\\"152b837874b750db913223c0e9417aa8375bd3e3\\",\\"src\\":\\"template.js\\",\\"version\\":\\"6.6.6\\"},\\"dataProvider\\":{\\"type\\":\\"node.js\\",\\"hashKey\\":\\"bb7495f62d9b11d749718b9ebf0b75a6751fffa0\\",\\"src\\":\\"server.js\\"}},\\"customWebpackRules\\":\\"customWebpackRules.config.js\\",\\"version\\":\\"1.0.0\\",\\"packaged\\":true,},\\"devDependencies\\":{\\"oc-template-react-compiler\\":\\"*\\"}}
",
},
Object {
Expand All @@ -71,6 +72,7 @@ Object {
},
"name": "react-component-with-css",
"oc": Object {
"customWebpackRules": "customWebpackRules.config.js",
"date": "",
"files": Object {
"dataProvider": Object {
Expand Down Expand Up @@ -110,7 +112,7 @@ say(text);
},
Object {
"path": "../../../mocks/react-component-with-css/_compile-tests-package1/package.json",
"source": "{\\"name\\":\\"react-component-with-css\\",\\"version\\":\\"1.0.0\\",\\"oc\\":{\\"files\\":{\\"static\\":[\\"assets\\"],\\"template\\":{\\"type\\":\\"oc-template-react\\",\\"hashKey\\":\\"e4e92841d07fdc1c00e9e7b4bad95cd66a9d221c\\",\\"src\\":\\"template.js\\",\\"version\\":\\"6.6.6\\"},\\"dataProvider\\":{\\"type\\":\\"node.js\\",\\"hashKey\\":\\"249a3e1c4c9df342ce1c7b25d9b75609d6b4411b\\",\\"src\\":\\"server.js\\"}},\\"version\\":\\"1.0.0\\",\\"packaged\\":true,},\\"devDependencies\\":{\\"oc-template-react-compiler\\":\\"*\\"}}
"source": "{\\"name\\":\\"react-component-with-css\\",\\"version\\":\\"1.0.0\\",\\"oc\\":{\\"files\\":{\\"static\\":[\\"assets\\"],\\"template\\":{\\"type\\":\\"oc-template-react\\",\\"hashKey\\":\\"e4e92841d07fdc1c00e9e7b4bad95cd66a9d221c\\",\\"src\\":\\"template.js\\",\\"version\\":\\"6.6.6\\"},\\"dataProvider\\":{\\"type\\":\\"node.js\\",\\"hashKey\\":\\"249a3e1c4c9df342ce1c7b25d9b75609d6b4411b\\",\\"src\\":\\"server.js\\"}},\\"customWebpackRules\\":\\"customWebpackRules.config.js\\",\\"version\\":\\"1.0.0\\",\\"packaged\\":true,},\\"devDependencies\\":{\\"oc-template-react-compiler\\":\\"*\\"}}
",
},
Object {
Expand Down Expand Up @@ -139,6 +141,7 @@ Object {
},
"name": "react-component",
"oc": Object {
"customWebpackRules": "customWebpackRules.config.js",
"date": "",
"files": Object {
"dataProvider": Object {
Expand All @@ -165,7 +168,7 @@ exports[`Should handle empty static folder 2`] = `
Array [
Object {
"path": "../../../mocks/react-component/_compile-tests-package2/package.json",
"source": "{\\"name\\":\\"react-component\\",\\"version\\":\\"1.0.0\\",\\"oc\\":{\\"files\\":{\\"template\\":{\\"type\\":\\"oc-template-react\\",\\"hashKey\\":\\"152b837874b750db913223c0e9417aa8375bd3e3\\",\\"src\\":\\"template.js\\",\\"version\\":\\"6.6.6\\"},\\"dataProvider\\":{\\"type\\":\\"node.js\\",\\"hashKey\\":\\"bb7495f62d9b11d749718b9ebf0b75a6751fffa0\\",\\"src\\":\\"server.js\\"},\\"static\\":[]},\\"version\\":\\"1.0.0\\",\\"packaged\\":true,},\\"devDependencies\\":{\\"oc-template-react-compiler\\":\\"*\\"}}
"source": "{\\"name\\":\\"react-component\\",\\"version\\":\\"1.0.0\\",\\"oc\\":{\\"files\\":{\\"template\\":{\\"type\\":\\"oc-template-react\\",\\"hashKey\\":\\"152b837874b750db913223c0e9417aa8375bd3e3\\",\\"src\\":\\"template.js\\",\\"version\\":\\"6.6.6\\"},\\"dataProvider\\":{\\"type\\":\\"node.js\\",\\"hashKey\\":\\"bb7495f62d9b11d749718b9ebf0b75a6751fffa0\\",\\"src\\":\\"server.js\\"},\\"static\\":[]},\\"customWebpackRules\\":\\"customWebpackRules.config.js\\",\\"version\\":\\"1.0.0\\",\\"packaged\\":true,},\\"devDependencies\\":{\\"oc-template-react-compiler\\":\\"*\\"}}
",
},
Object {
Expand All @@ -190,6 +193,7 @@ Object {
},
"name": "react-component-with-css",
"oc": Object {
"customWebpackRules": "customWebpackRules.config.js",
"date": "",
"files": Object {
"dataProvider": Object {
Expand All @@ -216,7 +220,7 @@ exports[`Should handle empty static folder 4`] = `
Array [
Object {
"path": "../../../mocks/react-component-with-css/_compile-tests-package2/package.json",
"source": "{\\"name\\":\\"react-component-with-css\\",\\"version\\":\\"1.0.0\\",\\"oc\\":{\\"files\\":{\\"template\\":{\\"type\\":\\"oc-template-react\\",\\"hashKey\\":\\"e4e92841d07fdc1c00e9e7b4bad95cd66a9d221c\\",\\"src\\":\\"template.js\\",\\"version\\":\\"6.6.6\\"},\\"dataProvider\\":{\\"type\\":\\"node.js\\",\\"hashKey\\":\\"249a3e1c4c9df342ce1c7b25d9b75609d6b4411b\\",\\"src\\":\\"server.js\\"},\\"static\\":[]},\\"version\\":\\"1.0.0\\",\\"packaged\\":true,},\\"devDependencies\\":{\\"oc-template-react-compiler\\":\\"*\\"}}
"source": "{\\"name\\":\\"react-component-with-css\\",\\"version\\":\\"1.0.0\\",\\"oc\\":{\\"files\\":{\\"template\\":{\\"type\\":\\"oc-template-react\\",\\"hashKey\\":\\"e4e92841d07fdc1c00e9e7b4bad95cd66a9d221c\\",\\"src\\":\\"template.js\\",\\"version\\":\\"6.6.6\\"},\\"dataProvider\\":{\\"type\\":\\"node.js\\",\\"hashKey\\":\\"249a3e1c4c9df342ce1c7b25d9b75609d6b4411b\\",\\"src\\":\\"server.js\\"},\\"static\\":[]},\\"customWebpackRules\\":\\"customWebpackRules.config.js\\",\\"version\\":\\"1.0.0\\",\\"packaged\\":true,},\\"devDependencies\\":{\\"oc-template-react-compiler\\":\\"*\\"}}
",
},
Object {
Expand Down Expand Up @@ -245,6 +249,7 @@ Object {
},
"name": "react-component",
"oc": Object {
"customWebpackRules": "customWebpackRules.config.js",
"date": "",
"files": Object {
"static": Array [
Expand Down Expand Up @@ -279,7 +284,7 @@ say(text);
},
Object {
"path": "../../../mocks/react-component/_compile-tests-package4/package.json",
"source": "{\\"name\\":\\"react-component\\",\\"version\\":\\"1.0.0\\",\\"oc\\":{\\"files\\":{\\"static\\":[\\"assets\\"],\\"template\\":{\\"type\\":\\"oc-template-react\\",\\"hashKey\\":\\"152b837874b750db913223c0e9417aa8375bd3e3\\",\\"src\\":\\"template.js\\",\\"version\\":\\"6.6.6\\"}},\\"version\\":\\"1.0.0\\",\\"packaged\\":true,},\\"devDependencies\\":{\\"oc-template-react-compiler\\":\\"*\\"}}
"source": "{\\"name\\":\\"react-component\\",\\"version\\":\\"1.0.0\\",\\"oc\\":{\\"files\\":{\\"static\\":[\\"assets\\"],\\"template\\":{\\"type\\":\\"oc-template-react\\",\\"hashKey\\":\\"152b837874b750db913223c0e9417aa8375bd3e3\\",\\"src\\":\\"template.js\\",\\"version\\":\\"6.6.6\\"}},\\"customWebpackRules\\":\\"customWebpackRules.config.js\\",\\"version\\":\\"1.0.0\\",\\"packaged\\":true,},\\"devDependencies\\":{\\"oc-template-react-compiler\\":\\"*\\"}}
",
},
Object {
Expand All @@ -300,6 +305,7 @@ Object {
},
"name": "react-component-with-css",
"oc": Object {
"customWebpackRules": "customWebpackRules.config.js",
"date": "",
"files": Object {
"static": Array [
Expand Down Expand Up @@ -334,7 +340,7 @@ say(text);
},
Object {
"path": "../../../mocks/react-component-with-css/_compile-tests-package4/package.json",
"source": "{\\"name\\":\\"react-component-with-css\\",\\"version\\":\\"1.0.0\\",\\"oc\\":{\\"files\\":{\\"static\\":[\\"assets\\"],\\"template\\":{\\"type\\":\\"oc-template-react\\",\\"hashKey\\":\\"e4e92841d07fdc1c00e9e7b4bad95cd66a9d221c\\",\\"src\\":\\"template.js\\",\\"version\\":\\"6.6.6\\"}},\\"version\\":\\"1.0.0\\",\\"packaged\\":true,},\\"devDependencies\\":{\\"oc-template-react-compiler\\":\\"*\\"}}
"source": "{\\"name\\":\\"react-component-with-css\\",\\"version\\":\\"1.0.0\\",\\"oc\\":{\\"files\\":{\\"static\\":[\\"assets\\"],\\"template\\":{\\"type\\":\\"oc-template-react\\",\\"hashKey\\":\\"e4e92841d07fdc1c00e9e7b4bad95cd66a9d221c\\",\\"src\\":\\"template.js\\",\\"version\\":\\"6.6.6\\"}},\\"customWebpackRules\\":\\"customWebpackRules.config.js\\",\\"version\\":\\"1.0.0\\",\\"packaged\\":true,},\\"devDependencies\\":{\\"oc-template-react-compiler\\":\\"*\\"}}
",
},
Object {
Expand Down
14 changes: 12 additions & 2 deletions packages/oc-template-react-compiler/lib/compileView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@ module.exports = (options, callback) => {
return externals;
}, {}),
publishFileName,
production
production,
customWebpackRules: options.customWebpackRules,
componentPath: options.componentPath
});
compiler(config, (err, data) => {
if (err) {
Expand Down Expand Up @@ -103,7 +105,15 @@ module.exports = (options, callback) => {
async.waterfall(
[
next => fs.outputFile(reactOCProviderPath, reactOCProviderContent, next),
next => compile({ viewPath: reactOCProviderPath }, next),
next =>
compile(
{
viewPath: reactOCProviderPath,
customWebpackRules: options.componentPackage.oc.customWebpackRules,
componentPath: options.componentPath
},
next
),
(compiled, next) =>
fs.remove(reactOCProviderPath, err => next(err, compiled)),
(compiled, next) => fs.ensureDir(publishPath, err => next(err, compiled)),
Expand Down
18 changes: 17 additions & 1 deletion ...ges/oc-template-react-compiler/lib/to-abstract-base-template-utils/webpackConfigurator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,25 @@ const webpack = require("oc-webpack").webpack;
module.exports = function webpackConfigGenerator(options) {
const buildPath = options.buildPath || "/build";
const production = options.production;

const localIdentName = !production
? "oc__[path][name]-[ext]__[local]__[hash:base64:8]"
: "[local]__[hash:base64:8]";

let customRulesLoader = [];
if (options.customWebpackRules) {
const customPath = path.join(
options.componentPath,
options.customWebpackRules
);
try {
customRulesLoader = require(customPath);
console.log("loading custom Webpack rules from -", customPath);
} catch (err) {
console.log("WARNING: Custom Webpack Rules Compile Error - ", err);
}
}

const cssLoader = {
test: /\.css$/,
loader: ExtractTextPlugin.extract({
Expand Down Expand Up @@ -91,7 +106,8 @@ module.exports = function webpackConfigGenerator(options) {
}
}
]
}
},
...customRulesLoader
]
},
plugins,
Expand Down