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:46] – [Webpack / Yarn Web Development Config] admin | webpack_complete_webdevelopment_config [2018/02/05 23:34] – [Slide 3] admin | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ~~REVEAL dokuwiki~~ | ||
| ====== Webpack / Yarn Web Development Config ====== | ====== Webpack / Yarn Web Development Config ====== | ||
| ===== What it does ... ===== | ===== What it does ... ===== | ||
| + | * Build Webfont and corresponding SCSS (Webfont.scss.njk -> compiles to -> | ||
| * Compile and process SCSS | * Compile and process SCSS | ||
| * Lint | * Lint | ||
| Line 14: | Line 16: | ||
| * Uglify | * Uglify | ||
| * Compress | * Compress | ||
| + | * Generate KSS Styleguide | ||
| + | * Icons included | ||
| + | * Using custom template (index.hbs, kss-assets/ | ||
| + | ===== Yarn ===== | ||
| + | |||
| + | * Define " | ||
| + | * Workspace will be linked to ./ | ||
| + | * Dependenies end up in ./ | ||
| + | * Centralize/ | ||
| + | * Compatible with NPM but creates a yarn.lock file | ||
| + | * Commands are slightly differen than NPMs (e.g. yarn add packageName) | ||
| + | |||
| + | <code bash Commands> | ||
| + | - development # Build assets for development | ||
| + | | ||
| + | - livereload | ||
| + | | ||
| + | - production | ||
| + | | ||
| + | - watch # Watch for changes and build files accordingly | ||
| + | | ||
| + | </ | ||
| ===== package.json ===== | ===== package.json ===== | ||
| <code javascript package.json> | <code javascript package.json> | ||
| { | { | ||
| - | | + | |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | }, | + | }, |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | ], |
| - | " | + | |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | " | + | " |
| - | }, | + | " |
| - | " | + | " |
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| } | } | ||
| - | |||
| </ | </ | ||
| Line 89: | 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 112: | 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 127: | Line 155: | ||
| pluginConfig[2] = new sassLintPlugin({ | pluginConfig[2] = new sassLintPlugin({ | ||
| glob: ' | glob: ' | ||
| - | ignoreFiles: | + | ignoreFiles: |
| ignorePlugins: | ignorePlugins: | ||
| }); | }); | ||
| Line 140: | 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 167: | 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 186: | Line 214: | ||
| files: [ | files: [ | ||
| // Replace these globs with yours | // Replace these globs with yours | ||
| - | '../ | + | |
| - | '../ | + | |
| ] | ] | ||
| }), | }), | ||
| Line 231: | Line 259: | ||
| includePaths: | includePaths: | ||
| path.resolve(' | path.resolve(' | ||
| - | path.resolve(' | + | path.resolve(corePluginBase + 'Scss') |
| ] | ] | ||
| } | } | ||
| Line 240: | 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 285: | Line 316: | ||
| plugins: pluginConfig | plugins: pluginConfig | ||
| }; | }; | ||
| - | |||
| </ | </ | ||
webpack_complete_webdevelopment_config.txt · Last modified: 2018/02/05 23:48 by admin