Inline contents outside webpack compile process.
Inline static scripts, stylesheets outside webpack compile process.
# npm
npm install @coco-platform/webpack-plugin-inline --only=dev;
# yarn
yarn add @coco-platform/webpack-plugin-inline --dev;
required, declare files need to inline, absolute path or relative to process.cwd()
Then config the webpack:
const InlinePlugin = require('@coco-platform/webpack-plugin-inline');
const configuration = {
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '__fixture__', 'index.html'),
inject: 'body',
}),
new InlinePlugin({
files: [
'__tests__/__fixture__/index.js',
'__tests__/__fixture__/index.css',
],
}),
],
};
Finally output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Webpack Plugin</title>
<style>
html,
body {
width: 100%;
height: 100%;
}
</style>
<script>
/* eslint-env browser */
document.addEventListener('load', () => {});
</script>
</head>
<body>
<script type="text/javascript" src="/main.js"></script>
</body>
</html>
MIT