Um modelo de configuração mínima demonstrando como importar componentes CPS Elements com Webpack como empacotador do projeto.
CPS Elements é parte do projeto de UI/UX institucional, que também sustenta o CPS Design System, projetados originalmente pelo professor Erick Petrucelli. Independentemente de suas origens e motivações iniciais, é um projeto totalmente open-source disponível sob os termos da licença MIT.
Em sua versão 5, o Webpack avançou no suporte a módulos JavaScript nativos (também conhecidos como ES modules), sem necessitar de configurações em especial para o uso dos Web Components do CPS Elements.
Assim, este exemplo foca em demonstrar um conjunto opinativo de configurações uteis no webpack.config.js, tanto para desenvolvimento quanto para publicação de aplicações com Webpack 5, contendo diversos ajustes sobre carregamento de HTML, CSS, SVG, bem como o empacotamento JavaScript.
Opcionalmente, recursos podem carregados pela instalação local ao invés de serem carregados por CDN. Para tal, a única configuração extra necessária é copiar os ícones de node_modules/@cps-elements/web/assets para dist/assets da distribuição empacotada, através do copy-webpack-plugin.
Observe que Webpack pode ser usado com frameworks JavaScript, onde configurações extras podem ser necessárias. Mas para utilização com Web nativa, ou seja, HTML, CSS e JavaScript puros, este projeto apresenta os fundamentos para você poder começar de forma produtiva.
Para execução com hot-reload em modo de desenvolvimento:
npm run devPara compilar para produção:
npm run buildPara iniciar um servidor local e testar a compilação de produção:
npm run previewEntão abra o navegador na URL exibida após os comandos.