3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-27 05:28:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: css extraction

Browse source
This commit is contained in:
endiliey 2018-09-16 14:21:44 +08:00
parent 141d6558af
commit dc7ef96849
1 changed files with 133 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

263
lib/webpack/base.js
View file

@ -1,130 +1,133 @@
const Config = require('webpack-chain'); const Config = require('webpack-chain');
const CSSExtractPlugin = require('mini-css-extract-plugin'); const CSSExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path'); const path = require('path');
const mdLoader = require.resolve('./loader/markdown'); const mdLoader = require.resolve('./loader/markdown');
module.exports = function createBaseConfig(props, isServer) { module.exports = function createBaseConfig(props, isServer) {
const { const {
siteConfig, siteConfig,
outDir, outDir,
themePath, themePath,
docsDir, docsDir,
pagesDir, pagesDir,
siteDir, siteDir,
sourceToMetadata, sourceToMetadata,
versionedDir, versionedDir,
translatedDir, translatedDir,
baseUrl baseUrl
} = props; } = props;
const config = new Config(); const config = new Config();
const isProd = process.env.NODE_ENV === 'production'; const isProd = process.env.NODE_ENV === 'production';
config config
.mode(isProd ? 'production' : 'development') .mode(isProd ? 'production' : 'development')
.output.path(outDir) .output.path(outDir)
.filename(isProd ? '[name].[chunkhash].js' : '[name].js') .filename(isProd ? '[name].[chunkhash].js' : '[name].js')
.publicPath(isProd ? baseUrl : '/'); .publicPath(isProd ? baseUrl : '/');
if (!isProd) { if (!isProd) {
config.devtool('cheap-module-eval-source-map'); config.devtool('cheap-module-eval-source-map');
} }
config.resolve config.resolve
.set('symlinks', true) .set('symlinks', true)
.alias.set('@theme', themePath) .alias.set('@theme', themePath)
.set('@site', siteDir) .set('@site', siteDir)
.set('@versioned_docs', versionedDir) .set('@versioned_docs', versionedDir)
.set('@translated_docs', translatedDir) .set('@translated_docs', translatedDir)
.set('@docs', docsDir) .set('@docs', docsDir)
.set('@pages', pagesDir) .set('@pages', pagesDir)
.set('@build', outDir) .set('@build', outDir)
.set('@generated', path.resolve(__dirname, '../core/generated')) .set('@generated', path.resolve(__dirname, '../core/generated'))
.set('@core', path.resolve(__dirname, '../core')) .set('@core', path.resolve(__dirname, '../core'))
.end(); .end();
function applyBabel(rule) { function applyBabel(rule) {
rule rule
.use('babel') .use('babel')
.loader('babel-loader') .loader('babel-loader')
.options({ .options({
babelrc: false, babelrc: false,
presets: ['env', 'react'], presets: ['env', 'react'],
plugins: [isServer ? 'dynamic-import-node' : 'syntax-dynamic-import'] plugins: [isServer ? 'dynamic-import-node' : 'syntax-dynamic-import']
}); });
} }
const jsRule = config.module const jsRule = config.module
.rule('js') .rule('js')
.test(/\.js$/) .test(/\.js$/)
.exclude.add(filepath => { .exclude.add(filepath => {
// Always transpile lib directory // Always transpile lib directory
if (filepath.startsWith(path.join(__dirname, '..'))) { if (filepath.startsWith(path.join(__dirname, '..'))) {
return false; return false;
} }
// Don't transpile node_modules // Don't transpile node_modules
return /node_modules/.test(filepath); return /node_modules/.test(filepath);
}) })
.end(); .end();
applyBabel(jsRule); applyBabel(jsRule);
const mdRule = config.module.rule('markdown').test(/\.md$/); const mdRule = config.module.rule('markdown').test(/\.md$/);
applyBabel(mdRule); applyBabel(mdRule);
mdRule mdRule
.use('markdown-loader') .use('markdown-loader')
.loader(mdLoader) .loader(mdLoader)
.options({ .options({
siteConfig, siteConfig,
versionedDir, versionedDir,
translatedDir, translatedDir,
docsDir, docsDir,
sourceToMetadata sourceToMetadata
}); });
const cssRule = config.module.rule('css').test(/\.css$/); const cssRule = config.module.rule('css').test(/\.css$/);
if (isProd) { if (!isServer) {
cssRule.use('extract-css-loader').loader(CSSExtractPlugin.loader); if (isProd) {
} else { cssRule.use('extract-css-loader').loader(CSSExtractPlugin.loader);
cssRule.use('style-loader').loader('style-loader'); } else {
} cssRule.use('style-loader').loader('style-loader');
cssRule }
.use('css-loader') }
.loader('css-loader')
.options({ cssRule
modules: true, .use('css-loader')
importLoaders: 1, .loader(isServer ? 'css-loader/locals' : 'css-loader')
localIdentName: `[local]_[hash:base64:8]`, .options({
sourceMap: !isProd, modules: true,
minimize: true importLoaders: 1,
}); localIdentName: `[local]_[hash:base64:8]`,
sourceMap: !isProd,
// mini-css-extract plugin minimize: true
config.plugin('extract-css').use(CSSExtractPlugin, [ });
{
filename: isProd ? '[name].[chunkhash].css' : '[name].css', // mini-css-extract plugin
chunkFilename: isProd ? '[id].[chunkhash].css' : '[id].css' config.plugin('extract-css').use(CSSExtractPlugin, [
} {
]); filename: isProd ? '[name].[chunkhash].css' : '[name].css',
chunkFilename: isProd ? '[id].[chunkhash].css' : '[id].css'
if (isProd) { }
config.optimization.minimizer([ ]);
new UglifyJsPlugin({
cache: true, if (isProd) {
uglifyOptions: { config.optimization.minimizer([
warnings: false, new UglifyJsPlugin({
compress: false, cache: true,
ecma: 6, uglifyOptions: {
mangle: true warnings: false,
}, compress: false,
sourceMap: true ecma: 6,
}) mangle: true
]); },
} sourceMap: true
})
return config; ]);
}; }
return config;
};