I'm trying to generate a bundle for a stenciljs component. With stenciljs with the following stencil.config.js
export const config: Config = {
namespace: 'geographicaladdressjs',
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader',
},
{
type: 'dist-custom-elements',
externalRuntime: false,
},
{
type: 'docs-readme',
},
{
type: 'www',
serviceWorker: null, // disable service workers
},
],
testing: {
browserHeadless: "new",
collectCoverage: true,
clearMocks: true,
resetMocks: true,
coverageDirectory: "./reports",
coverageReporters: ["html", "text", "lcov"],
reporters:['default', ["jest-html-reporters", {
"publicPath": "./reports",
"expand": true,
}]]
},
minifyJs: true,
minifyCss: true,
sourceMap: false
};
I have 5 files perfectly working
But I need one js bundle with all project, with webpack I've got one but useless.
const path = require('path');
module.exports = {
mode: 'production',
entry: './dist/geographicaladdressjs/index.esm.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.js'],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
};
How could I have only one file?
The webpack solution is this
import { Config } from '@stencil/core';
export const config: Config = {
namespace: 'mycomponent',
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader',
empty: true
},
{
type: 'docs-readme',
},
{
type: 'www',
serviceWorker: null, // disable service workers
},
],
testing: {
browserHeadless: "new",
collectCoverage: true,
clearMocks: true,
resetMocks: true,
coverageDirectory: "./reports",
coverageReporters: ["html", "text", "lcov"],
reporters:['default', ["jest-html-reporters", {
"publicPath": "./reports",
"expand": true,
}]]
},
minifyJs: true,
minifyCss: true,
sourceMap: false
};
webpack.config.js
const path = require('path');
const glob = require('glob');
const fs = require('fs');
const entryDir = path.resolve(__dirname, './dist/mycomponent/');
const entries = fs.readdirSync(entryDir);
let entryMap = [];
entries.forEach(function(entry){
let stat = fs.statSync(entryDir + '/' + entry);
if (stat && !stat.isDirectory()) {
entryMap.push('./dist/mycomponent/'+ entry);
}
});
module.exports = {
mode: 'production',
entry : entryMap,
output: {
clean: true,
filename: 'mycomponent.js',
path: path.resolve(__dirname, 'dist/bundle'),
}
};
with mycomponent.js I have all config all in one