Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
webpackConfig = merge(webpackConfig, {
// we need to follow our own entry point
entry: config.require.concat([path.resolve(sourceDir, 'index')]),
resolve: {
alias: {
// allows to use the compiler
// without this, cli will overload the alias and use runtime esm
vue$: require.resolve('vue/dist/vue.esm.js')
}
},
plugins: [
// in order to avoid collision with the preload plugins
// that are loaded by the vue cli
// we have to load these plugins last
new StyleguidistOptionsPlugin(config),
new MiniHtmlWebpackPlugin(htmlPluginOptions),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.STYLEGUIDIST_ENV': JSON.stringify(env)
})
]
})
// To have the hot-reload work on vue-styleguide
// the HMR has to be loaded after the html plugin.
// Hence this piece added last to the list of plugins.
if (isProd) {
const optimization = config.minimize
? {
minimizer: [
new TerserPlugin({
parallel: true,
let webpackConfig: Configuration = {
entry: config.require.concat([path.resolve(sourceDir, 'index')]),
mode: env,
output: {
path: config.styleguideDir,
filename: 'build/[name].bundle.js',
chunkFilename: 'build/[name].js',
publicPath: '',
},
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
alias: {},
},
plugins: [
new StyleguidistOptionsPlugin(config),
new MiniHtmlWebpackPlugin(htmlPluginOptions),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.STYLEGUIDIST_ENV': JSON.stringify(env),
}),
],
performance: {
hints: false,
},
};
if (isProd) {
const minimizer = new TerserPlugin({
/* eslint-disable @typescript-eslint/camelcase */
terserOptions: {
ie8: false,
ecma: 5,
<title>${title}</title>
${MiniHtmlWebpackPlugin.generateCSSReferences({ files: css, publicPath })}
<style>
body {
margin: 0;
background-color: #F8F5FD;
text-rendering: optimizeLegibility;
}
</style>
<div id="app"></div>
${MiniHtmlWebpackPlugin.generateJSReferences({ files: js, publicPath })}
`,
}),
template: ({ css, js, title, publicPath }: any) =>
`
<title>${title}</title>
${MiniHtmlWebpackPlugin.generateCSSReferences({ files: css, publicPath })}
<style>
body {
margin: 0;
background-color: #F8F5FD;
text-rendering: optimizeLegibility;
}
</style>
<div id="app"></div>
${MiniHtmlWebpackPlugin.generateJSReferences({ files: js, publicPath })}
`,
}),
return context => {
const scripts = HTMLPlugin.generateJSReferences(context.js, context.publicPath)
return minify(
template(Object.assign({}, context, { scripts })),
{
collapseWhitespace: true
}
)
}
}
${generateCSSReferences(css, publicPath)}
<div id="rsg-root"></div>
${generateJSReferences(js, publicPath)}
`;
const template = fs.readFileSync(
path.join(__dirname, 'src', 'styleguidist.html'),
'utf-8',
);
return template
.replace(
'',
`<title>${title}</title>`,
)
.replace(
'',
MiniHtmlWebpackPlugin.generateCSSReferences(css, publicPath),
)
.replace(
'',
MiniHtmlWebpackPlugin.generateJSReferences(js, publicPath),
);
},
sections: [
const template = ({
title = 'ok',
js,
publicPath
}) => `
<style>*{box-sizing:border-box}body{font-family:system-ui,sans-serif;margin:0}</style>
<title>${title}</title>
<div id="root"></div>
${HTMLPlugin.generateJSReferences(js, publicPath)}
`
<title>${title}</title>
${MiniHtmlWebpackPlugin.generateCSSReferences(css, publicPath)}
<style>
body {
margin: 0;
text-rendering: optimizeLegibility;
}
</style>
<div id="app"></div>
${MiniHtmlWebpackPlugin.generateJSReferences(js, publicPath)}
`,
}),
css = '',
js,
publicPath,
}) => `
<title>ok-mdx</title>
<style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style>
${css}
<div id="root">${html}</div>
${generateJSReferences(js, publicPath)}
`