webpack_complete_webdevelopment_config
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
| webpack_complete_webdevelopment_config [2018/01/29 22:56] – admin | webpack_complete_webdevelopment_config [2018/02/05 23:45] – [Slide 6] admin | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ~~REVEAL | + | ~~REVEAL dokuwiki~~ |
| ====== Webpack / Yarn Web Development Config ====== | ====== Webpack / Yarn Web Development Config ====== | ||
| Line 19: | Line 18: | ||
| * Generate KSS Styleguide | * Generate KSS Styleguide | ||
| * Icons included | * Icons included | ||
| - | * Using custom template (index.hbs, ) | + | * Using custom template (index.hbs, |
| + | |||
| + | ===== Yarn ===== | ||
| - | ===== Yarn Commands | + | * Define " |
| + | * Workspace will be linked to ./ | ||
| + | * Dependenies end up in ./ | ||
| + | * Centralize/ | ||
| + | * Compatible with NPM but creates a yarn.lock file | ||
| + | * Commands | ||
| - | <code bash> | + | <code bash Commands> |
| - | - development | + | - development # Build assets for development |
| | | ||
| - | - livereload | + | - livereload |
| - | | + | |
| - | - production | + | - production |
| | | ||
| - | - watch | + | - watch # Watch for changes and build files accordingly |
| | | ||
| </ | </ | ||
| Line 37: | Line 43: | ||
| <code javascript package.json> | <code javascript package.json> | ||
| { | { | ||
| - | | + | |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | }, | + | }, |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | ], |
| - | " | + | |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | }, | + | " |
| - | " | + | " |
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| } | } | ||
| - | |||
| </ | </ | ||
| Line 107: | Line 116: | ||
| * @type string | * @type string | ||
| */ | */ | ||
| - | const corePluginBase = ' | + | const corePluginBase |
| + | const corePluginTarget | ||
| if (process.env.NODE_ENV === undefined) { | if (process.env.NODE_ENV === undefined) { | ||
| Line 130: | Line 140: | ||
| */ | */ | ||
| pluginConfig[0] = new ExtractTextPlugin({ | pluginConfig[0] = new ExtractTextPlugin({ | ||
| - | filename: '../ | + | filename: |
| }); | }); | ||
| const extractPlugin = pluginConfig[0]; | const extractPlugin = pluginConfig[0]; | ||
| pluginConfig[8] = new ExtractTextPlugin({ | pluginConfig[8] = new ExtractTextPlugin({ | ||
| - | filename: '../ | + | filename: |
| }); | }); | ||
| const extractKssPlugin = pluginConfig[8]; | const extractKssPlugin = pluginConfig[8]; | ||
| Line 145: | Line 155: | ||
| pluginConfig[2] = new sassLintPlugin({ | pluginConfig[2] = new sassLintPlugin({ | ||
| glob: ' | glob: ' | ||
| - | ignoreFiles: | + | ignoreFiles: |
| ignorePlugins: | ignorePlugins: | ||
| }); | }); | ||
| Line 158: | Line 168: | ||
| classNmw: ' | classNmw: ' | ||
| cssFormat: ' | cssFormat: ' | ||
| - | template: path.resolve(__dirname, './Templates/ | + | template: path.resolve(corePluginBase, ' |
| cssTemplateFontPath: | cssTemplateFontPath: | ||
| dest: { | dest: { | ||
| - | fontsDir: '../ | + | fontsDir: |
| - | stylesDir: path.resolve(__dirname, './Scss/' | + | stylesDir: path.resolve(corePluginBase, ' |
| outputFilename: | outputFilename: | ||
| } | } | ||
| Line 185: | Line 195: | ||
| */ | */ | ||
| pluginConfig[6] = new KssWebpackPlugin({ | pluginConfig[6] = new KssWebpackPlugin({ | ||
| - | source: ['./Scss/', | + | source: [corePluginBase + ' |
| - | destination: | + | destination: |
| - | builder: './Templates/ | + | builder: |
| homepage: ' | homepage: ' | ||
| title: " | title: " | ||
| css: [' | css: [' | ||
| js: [' | js: [' | ||
| - | custom: ' | + | custom: |
| - | extend: './Templates/ | + | extend: |
| }); | }); | ||
| Line 204: | Line 214: | ||
| files: [ | files: [ | ||
| // Replace these globs with yours | // Replace these globs with yours | ||
| - | '../ | + | |
| - | '../ | + | |
| ] | ] | ||
| }), | }), | ||
| Line 249: | Line 259: | ||
| includePaths: | includePaths: | ||
| path.resolve(' | path.resolve(' | ||
| - | path.resolve(' | + | path.resolve(corePluginBase + 'Scss') |
| ] | ] | ||
| } | } | ||
| Line 258: | Line 268: | ||
| module.exports = { | module.exports = { | ||
| entry: { | entry: { | ||
| - | script: ['./JavaScript/ | + | script: [corePluginBase + ' |
| }, | }, | ||
| output: { | output: { | ||
| path: __dirname, | path: __dirname, | ||
| - | filename: "../ | + | filename: |
| }, | }, | ||
| resolve: { | resolve: { | ||
| - | extensions: [' | + | extensions: [' |
| + | modules: [ | ||
| + | path.resolve('./ | ||
| + | | ||
| }, | }, | ||
| watchOptions: | watchOptions: | ||
| - | ignored: ["Styleguide/**/*", "node_modules/**/*"] | + | ignored: [ /Styleguide/, / |
| }, | }, | ||
| module: { | module: { | ||
| Line 303: | Line 316: | ||
| plugins: pluginConfig | plugins: pluginConfig | ||
| }; | }; | ||
| - | |||
| </ | </ | ||
| + | |||
| + | ===== The Good, the Bad ... ===== | ||
| + | |||
| + | * **Yarn** | ||
| + | * Workspaces | ||
| + | * Smart caching (??) | ||
| + | * Works flawlessly with existing package.json | ||
| + | * **Webpack**: | ||
| + | * Webpack lets you use require() on local " | ||
| + | * https:// | ||
webpack_complete_webdevelopment_config.txt · Last modified: 2018/02/05 23:48 by admin