From 6ef780d185394772930b550e10b94c5de5f26e2e Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Fri, 1 Jun 2018 02:15:50 -0300 Subject: [PATCH] chore(docz-core): refac loaders config on webpack --- .../docz-core/src/bundlers/webpack/config.ts | 139 +--------------- .../docz-core/src/bundlers/webpack/loaders.ts | 154 ++++++++++++++++++ 2 files changed, 163 insertions(+), 130 deletions(-) create mode 100644 packages/docz-core/src/bundlers/webpack/loaders.ts diff --git a/packages/docz-core/src/bundlers/webpack/config.ts b/packages/docz-core/src/bundlers/webpack/config.ts index f74a84ccd..9a86515c4 100644 --- a/packages/docz-core/src/bundlers/webpack/config.ts +++ b/packages/docz-core/src/bundlers/webpack/config.ts @@ -1,22 +1,16 @@ import * as path from 'path' import webpackBarPlugin from 'webpackbar' import Config from 'webpack-chain' -import HappyPack from 'happypack' import friendlyErrors from 'friendly-errors-webpack-plugin' import htmlWebpackPlugin from 'html-webpack-plugin' import manifestPlugin from 'webpack-manifest-plugin' import UglifyJs from 'uglifyjs-webpack-plugin' -import matter from 'remark-frontmatter' -import merge from 'deepmerge' import { BabelRC } from '../../utils/babelrc' -import { plugin as mdastPlugin } from '../../utils/plugin-mdast' -import { plugin as hastPlugin } from '../../utils/plugin-hast' import { Config as Args } from '../../commands/args' +import * as loaders from './loaders' import { Env } from './' -const INLINE_LIMIT = 10000 - const uglify = new UglifyJs({ parallel: true, cache: true, @@ -41,47 +35,6 @@ const uglify = new UglifyJs({ }, }) -const setupHappypack = (config: Config, args: Args, babelrc: any) => { - const babelLoader: any = { - loader: require.resolve('babel-loader'), - options: merge(babelrc, { - plugins: [require.resolve('react-hot-loader/babel')], - }), - } - - const jsx = { - id: 'jsx', - verbose: args.debug, - loaders: [babelLoader], - } - - if (args.propsParser && !args.typescript) { - babelLoader.options.plugins.push( - require.resolve('babel-plugin-react-docgen') - ) - } - - if (args.propsParser && args.typescript) { - jsx.loaders.push({ - loader: require.resolve('react-docgen-typescript-loader'), - }) - } - - const mdx = { - id: 'mdx', - verbose: args.debug, - loaders: [ - { - loader: require.resolve('babel-loader'), - options: babelrc, - }, - ], - } - - config.plugin('happypack-jsx').use(HappyPack, [jsx]) - config.plugin('happypack-mdx').use(HappyPack, [mdx]) -} - export const createConfig = (babelrc: BabelRC) => ( args: Args, env: Env @@ -194,93 +147,19 @@ export const createConfig = (babelrc: BabelRC) => ( * loaders */ - config.module - .rule('js') - .test(/\.(js|jsx|mjs)$/) - .include.add(srcPath) - .add(paths.docz) - .end() - .exclude.add(/node_modules/) - .end() - .use('happypack-jsx') - .loader('happypack/loader?id=jsx') - - if (args.typescript) { - config.module - .rule('ts') - .test(/\.(ts|tsx)$/) - .include.add(srcPath) - .end() - .exclude.add(/node_modules/) - .end() - .use('happypack-jsx') - .loader('happypack/loader?id=jsx') - } - - config.module - .rule('mdx') - .test(/\.md?x$/) - .include.add(srcPath) - .end() - .exclude.add(/node_modules/) - .end() - .use('happypack-mdx') - .loader('happypack/loader?id=mdx') - .end() - .use('mdx-loader') - .loader(require.resolve('@mdx-js/loader')) - .options({ - type: 'yaml', - marker: '-', - mdPlugins: args.mdPlugins.concat([matter, mdastPlugin]), - hastPlugins: args.hastPlugins.concat([hastPlugin]), - }) - - config.module - .rule('images') - .test(/\.(png|jpe?g|gif)(\?.*)?$/) - .use('url-loader') - .loader(require.resolve('url-loader')) - .options({ - limit: INLINE_LIMIT, - name: `static/img/[name].[hash:8].[ext]`, - }) - - config.module - .rule('svg') - .test(/\.(svg)(\?.*)?$/) - .use('file-loader') - .loader(require.resolve('file-loader')) - .options({ - name: `static/img/[name].[hash:8].[ext]`, - }) - - config.module - .rule('media') - .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/) - .use('url-loader') - .loader(require.resolve('url-loader')) - .options({ - limit: INLINE_LIMIT, - name: `static/media/[name].[hash:8].[ext]`, - }) - - config.module - .rule('fonts') - .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i) - .use('url-loader') - .loader(require.resolve('url-loader')) - .options({ - limit: INLINE_LIMIT, - name: `static/fonts/[name].[hash:8].[ext]`, - }) + loaders.js(config, args) + loaders.mdx(config, args) + args.typescript && loaders.ts(config, args) + loaders.setupHappypack(config, args, babelrc) + loaders.images(config) + loaders.svg(config) + loaders.media(config) + loaders.fonts(config) /** * plugins */ - setupHappypack(config, args, babelrc) - config.plugin('assets-plugin').use(manifestPlugin, [ { filename: 'assets.json', diff --git a/packages/docz-core/src/bundlers/webpack/loaders.ts b/packages/docz-core/src/bundlers/webpack/loaders.ts new file mode 100644 index 000000000..45c2e1995 --- /dev/null +++ b/packages/docz-core/src/bundlers/webpack/loaders.ts @@ -0,0 +1,154 @@ +import * as path from 'path' +import HappyPack from 'happypack' +import merge from 'deepmerge' +import matter from 'remark-frontmatter' + +import Config from 'webpack-chain' +import { plugin as mdastPlugin } from '../../utils/plugin-mdast' +import { plugin as hastPlugin } from '../../utils/plugin-hast' +import { Config as Args } from '../../commands/args' + +export const setupHappypack = (config: Config, args: Args, babelrc: any) => { + const babelLoader: any = { + loader: require.resolve('babel-loader'), + options: merge(babelrc, { + plugins: [require.resolve('react-hot-loader/babel')], + }), + } + + const jsx = { + id: 'jsx', + verbose: args.debug, + loaders: [babelLoader], + } + + if (args.propsParser && !args.typescript) { + babelLoader.options.plugins.push( + require.resolve('babel-plugin-react-docgen') + ) + } + + if (args.propsParser && args.typescript) { + jsx.loaders.push({ + loader: require.resolve('react-docgen-typescript-loader'), + }) + } + + const mdx = { + id: 'mdx', + verbose: args.debug, + loaders: [ + { + loader: require.resolve('babel-loader'), + options: babelrc, + }, + ], + } + + config.plugin('happypack-jsx').use(HappyPack, [jsx]) + config.plugin('happypack-mdx').use(HappyPack, [mdx]) +} + +export const js = (config: Config, args: Args) => { + const { paths } = args + const srcPath = path.resolve(paths.root, args.src) + + config.module + .rule('js') + .test(/\.(js|jsx|mjs)$/) + .include.add(srcPath) + .add(paths.docz) + .end() + .exclude.add(/node_modules/) + .end() + .use('happypack-jsx') + .loader('happypack/loader?id=jsx') +} + +export const ts = (config: Config, args: Args) => { + const { paths } = args + const srcPath = path.resolve(paths.root, args.src) + + config.module + .rule('ts') + .test(/\.(ts|tsx)$/) + .include.add(srcPath) + .end() + .exclude.add(/node_modules/) + .end() + .use('happypack-jsx') + .loader('happypack/loader?id=jsx') +} + +export const mdx = (config: Config, args: Args) => { + const { paths, mdPlugins, hastPlugins } = args + const srcPath = path.resolve(paths.root, args.src) + + config.module + .rule('mdx') + .test(/\.md?x$/) + .include.add(srcPath) + .end() + .exclude.add(/node_modules/) + .end() + .use('happypack-mdx') + .loader('happypack/loader?id=mdx') + .end() + .use('mdx-loader') + .loader(require.resolve('@mdx-js/loader')) + .options({ + type: 'yaml', + marker: '-', + mdPlugins: mdPlugins.concat([matter, mdastPlugin]), + hastPlugins: hastPlugins.concat([hastPlugin]), + }) +} + +const INLINE_LIMIT = 10000 + +export const images = (config: Config) => { + config.module + .rule('images') + .test(/\.(png|jpe?g|gif)(\?.*)?$/) + .use('url-loader') + .loader(require.resolve('url-loader')) + .options({ + limit: INLINE_LIMIT, + name: `static/img/[name].[hash:8].[ext]`, + }) +} + +export const svg = (config: Config) => { + config.module + .rule('svg') + .test(/\.(svg)(\?.*)?$/) + .use('file-loader') + .loader(require.resolve('file-loader')) + .options({ + name: `static/img/[name].[hash:8].[ext]`, + }) +} + +export const media = (config: Config) => { + config.module + .rule('media') + .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/) + .use('url-loader') + .loader(require.resolve('url-loader')) + .options({ + limit: INLINE_LIMIT, + name: `static/media/[name].[hash:8].[ext]`, + }) +} + +export const fonts = (config: Config) => { + config.module + .rule('fonts') + .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i) + .use('url-loader') + .loader(require.resolve('url-loader')) + .options({ + limit: INLINE_LIMIT, + name: `static/fonts/[name].[hash:8].[ext]`, + }) +}