5
Você deverá versionar todos os seus componentes separadamente e indicar qual é o arquivo de índice (no caso o arquivo do componente) no package.json.
Exemplo de componente de input de formulário usando o webpack
Primeiro, crie uma pasta e dê um git init nela.
Dentro dela crie o arquivo do componente, no caso desse exemplo o AppFormInput.vue contendo toda ...
3
Bom, vamos do começo.
NPM
Primeiro você instala o NPM se ainda nao tiver:
https://www.npmjs.com/get-npm
VUE
Com NPM instalado na maquina, siga esses passos:
https://vuejs.org/v2/guide/installation.html
Com o terminal aberto digite:
npm install vue
Pronto você ja tem o VueJs rodando na maquina.
Recomendo você criar os projetos com base no VueCli que já traz ...
3
Tenta assim
Dentro do arquivo ressources/sass/app.scss você importa o bootstrap:
// Bootstrap
@import 'node_modules/bootstrap/scss/bootstrap.scss';
Em webpack.mix.js você escreve assim:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Ai no final de tudo vc vai lá no console e roda o comando:
...
2
Acabei por conseguir fazendo:
Map.vue:
<script>
import init_map from '../../assets/js/map.js';
...
</script>
map.js
const key = ******;
export default function init_map(some_args) {
...
}
2
Descobri que ao usar a tag <router-link> ao invés da tag <a>, é possível resolver este problema, alem de também resolver outros problemas como o de links-ativos por exemplo.
No caso ficaria assim:
<router-link to="#ancora"> Teste </router-link>
<div id="ancora" style="margin-top: 1000px">
<h1> Oi, eu sou uma div </...
2
Primeiro, qual o propósito do create-react-app? Na documentação:
Create React apps with no build configuration.
Antes da existência do create-react-app, você deveria implementar seu próprio "sistema" de build. Podia ser webpack, gulp, ou até grunt.
Isso significava que você buildava todo seu projeto, bonitinho, com JSX, ES6, Sass, e era obrigado a ...
2
Primeiramente vou te dizer que a minha visão do WebPack e outros empacotadores é um pouco diferente da sua visão. E que podem ter outros usuários que vão discordar desse ponte de vista que vou te dar.
Talvez o principal beneficiado do WebPack é o Desenvolvedor. Na verdade no meu ponto de vista o usuário final do WebPack é o próprio deve e não o usuário que ...
respondida 23/11/18 às 11:01
hugocsl
63,7mil1313 medalhas de ouro5252 medalhas de prata119119 medalhas de bronze
1
Para organizar uma aplicação Angular, a forma adequada é uma boa estruturação dos seus módulos. Eles devem ser divididos em App, Core, Share e Features.
O App, Shared e Core deve ser os únicos a serem carregados no inicio da aplicação. Daí conforme o usuário navega, os módulos Features serão carregados pela Router.
Não dá pra fugir disso, carregar módulos ...
1
Consegui corrigir, vou colocar a resposta aqui, talvez ajude alguém com o mesmo problema.
edite a linha:
const { mix } = require('laravel-mix')
para isto:
const mix = require('laravel-mix')
1
Os arquivos .map são arquivos auxiliares de javascript e css (e agora
também ts) que foram minificados. Eles são chamados de SourceMaps.
Quando você minifica um arquivo, como o arquivo app.js, ele pega
milhares de linhas de código bonito e o transforma em apenas algumas
linhas de código feio. Espero que, quando você enviar o código para
produção, ...
respondida 15/02/19 às 0:29
rnd_rss
1.03511 medalhas de ouro99 medalhas de prata1616 medalhas de bronze
1
Consegui resolver usando Laravel Mix, por algum acaso se alguém tiver a mesma dúvida, pesquise sobre Laravel Mix.
Pequeno curso sobre laravel-mix feito pelo seu próprio criador: https://laracasts.com/series/learn-laravel-mix/
Laravel Mix é uma parte do framework php Laravel, entretanto, é possível usar apenas o Laravel Mix para 'empacotar' de uma forma ...
1
O modo development é usada - como o nome sugere - por motivos de desenvolvimento. Você tem source maps do seu código e uma facilidade maior na hora de debugar, e também o seu código não é minificado, o que diminui o tempo de compilação
Já no production, por outro lado, é executada a nível de produção, o que significa que esse é o código final que vai pro ...
1
Erro pode ter sido causado devido a ordem do argumento -g no comando, que segundo a documentação é:
npm install -g webpack-cli
diferente do Yarn que é:
yarn add webpack-cli -g
Referência
How to Install Global Packages
respondida 1/05/18 às 4:57
NoobSaibot
9.49455 medalhas de ouro2020 medalhas de prata4747 medalhas de bronze
1
Não sei se entendi direito, ou se minha resposta é meio besta, mas creio que você está procurando o vue-cli. Se não for o que você está procurando, me informe que deleto a resposta.
Conforme a documentação, para instalá-lo precisa executar os comandos abaixo:
npm install -g @vue/cli
# or
yarn global add @vue/cli
vue create my-project
Existem vários ...
1
No seu ~assets/js/app.js tente usar o import ao invés do require
import 'startbootstrap-sb-admin/scss/sb-admin.scss';
Não se esqueça de rodar $ yarn run encore dev depois de efetuar essa atualização.
1
Nesse caso precisa incluir o publicPath
module.exports = {
entry: ["./src/main.js"],
output: {
filename: "bundle.js",
path: __dirname + "/dist",
publicPath: "/"
},
1
De fato o Webpack oferece alternativas, o Code Splitting usando plugins, e carregamento por demanda usando import da biblioteca SystemJS, a qual retorna uma Promise.
Mas vejo pelo seu código que está tu está usado o Vue.js.
Você pode O Vue.js facilita ainda mais o carregamento por demanda, Veja mais sobre isso:
na própria documentação do Vue.js, e nesse ...
respondida 17/01/18 às 19:46
Andre Figueiredo
4.91022 medalhas de ouro1919 medalhas de prata4444 medalhas de bronze
1
Faz alguma diferença em termos de performance ele pegar o .js ou
.min.js?
Sim, faz muita diferença. O arquivo minificado, como o próprio nome diz, é menor, e isso gera diferença de performance quando o site vai carregar as dependências, porque um arquivo menor é carregado e interpretado mais rápido.
Tem que colocar algum Priority para ele pegar ...
respondida 19/10/17 às 17:31
BrTkCa
10,9mil33 medalhas de ouro1616 medalhas de prata3434 medalhas de bronze
1
Acredito que esteja utilizando o vueRouter, caso sim, é preciso alterar a forma como a função scrollBehavior se comporta. O exemplo abaixo demonstra como navegar até o elemento na página em vez de mudar de "página".
new VueRouter({
mode: 'history',
scrollBehavior: function(to, from, savedPosition) {
if (to.hash) {
return {...
1
Ao que parece vc deve estar usando um require('../../app/assets/styles/bootstrap/pre-customizations.scss') em algum lugar. O problema é que a partir do arquivo que você está usando ele não localiza... tente verificar o caminho informado
1
Na realidade, essa função é do console do Chrome, e não do Angular 4.
Para desabilita-la, abra o developer tools na aba console, clique nas opções (engrenagem) e desmarque a opção LogXMLHttpRequests.
Lembrando que, não é possível negar ao navegador a possibilidade de gravar esses logs das requests.
1
Junta o plugin do jQuery no webpack para ele estar disponivel na aplicação:
// webpack.config.js
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
E quando instalas o jQuery e bootsrap deves ter a flag --save e não --save-dev pois são dependências de produção....
respondida 20/09/17 às 14:19
1
Ao invés de concatenar usando o webpack.mix.js, você poderia fazer assim, no seu arquivo assets/css/app.scss:
@import "app.css" // supondo que o arquivo app.css está no mesmo nível que app.scss
@import "foo/bar" // vai incluir um arquivo bar.scss que está dentro do diretório foo...
// restante do scss...
Dessa forma seu webpack.mix.js continuará como ...
1
Eu utilizo dentro do webpack.config uma função para pegar todos os arquivos na raiz da minha pasta
//get js Files in folder
let getFiles = (paths)=>{
let ret = {};
paths.forEach((path)=>{
let fileName = path.split('/').slice(-1)[0].split('.js')[0];
ret[fileName] = path;
});
return ret;
}
modules.export = {
...
entry: getFiles( glob....
1
Uma solução é usar o pacote webpack-dev-server, além de resolver seu problema ele tem uns recursos bem legais.
Bom, no seu package.json você pode criar um script da seguinte maneira:
"scripts": {
"dev": "webpack-dev-server --progress --colors --inline --hot"
}
Repare que no final do script dev tenho o parâmetro --hot, esse é o cara responsável por ...
respondida 29/06/17 às 14:14
DiegoAugusto
8.64477 medalhas de ouro3737 medalhas de prata102102 medalhas de bronze
1
Olá
Veja uma outra solução, talvez seja mais simples.
<a v-bind:href="ancoraTeste" @click="showAlert">{{textLink}} </a>
<div id="ancora" style="margin-top: 500px">
<h1> Oi, eu sou uma div </h1>
</div>
<script>
new Vue({
el:'#app',
data:{
textLink:'Link ...
respondida 2/04/19 às 15:05
Harry
3.74433 medalhas de ouro2424 medalhas de prata5353 medalhas de bronze
Apenas as respostas wiki não pertencentes à comunidade mais votadas e de um tamanho mínimo se qualificam
Tags relacionadas
webpack × 67javascript × 36
vue.js × 17
react × 15
node.js × 8
angular × 7
babel × 6
laravel × 5
npm × 5
typescript × 3
sass × 3
php × 2
html × 2
jquery × 2
css × 2
visual-studio × 2
laravel-5 × 2
bootstrap × 2
desempenho × 2
gulp × 2
bundle × 2
java × 1
html5 × 1
asp.net-mvc × 1
css3 × 1