webpack frames

Distintivo

• verifique && formato
• webpack1-ie8
• webpack3-reage
• webpack3-vue
• webpack4-react
• webpack4-vue

Instruções de atualização

1. As pastas contidas em webpack4-vue e webpack3-vue são exatamente as mesmas, copie-as você mesmo, se necessário.
2. As pastas incluídas em webpack4-react e webpack3-react são exatamente as mesmas, copie-as você mesmo, se necessário.
3. A diferença entre o webpack 2 e 3 é muito pequena. Basicamente, não há problema em substituir diretamente 2 por 3. Apenas as versões 1/3/4 são discutidas aqui, o documento oficial de migração.
4. O ambiente de desenvolvimento foi recarregado a quente. Se você deseja que o ambiente de desenvolvimento seja compatível com o IE11 ou inferior, desmarque o recarregamento a quente.
   • Remova react-hot-loader/babel do arquivo de plugins .babelrc
   • Remova react-hot-loader de devDependencies em package.json
   • devServer.inline em config/opt.dev.js deve ser falso (vue só precisa modificar este ponto)
   • Remover react-hot-loader do código
5. O ambiente de desenvolvimento já suporta a mock api de front-end, que irá ler automaticamente os arquivos em src/mock e realizar atualizações quentes. A lógica do código está em config/mock.js , que contém example .
6. As versões do vue e vue-template-compiler devem ser completamente consistentes, caso contrário, haverá erros imprevistos.
7. As configurações de webapck134,react,vue no diretório config foram unificadas. Diferentes projetos só precisam alterar opt.self.js
8. Há omissões na descrição readme . Vá até o arquivo para ler os comentários do código. O ponto principal é que os arquivos no diretório config tenham comentários e endereços de documentos de referência oficiais.
9. devDependencies são usadas para colocar as dependências da versão bloqueada. dependencies são as dependências mais recentes. Como não precisam ser publicadas no npm, esta classificação é mais arbitrária e até errada. Baidu para obter detalhes específicos.
10. Como DllPlugin e CommonsChunkPlugin或splitChunks possuem funções duplicadas, e o primeiro precisa executar um comando webpack previamente, ele pode ser simplesmente substituído por externals . O último possui um grande espaço operável e pode ser descompactado livremente para tornar o tamanho do arquivo mais uniforme. , o seguinte será DllPlugin não é mais usado

Preparação ambiental

1. Defina npm config set registry https://registry.npm.taobao.org
2. Execute npm i -g npminstall como administrador
3. Digite o diretório atual com a linha de comando e execute npminstall -c
4. Se ocorrer um erro, as soluções comuns são as seguintes:
   • Execute npm cache clean -f e npm cache verify -f como administrador
   • Excluir diretório node_modules
   • Execute novamente npminstall -c
   • Finalmente, mude para uma rede melhor e atualize node e npm
5. Notas sobre uso:
   • npminstall -c e npm install não são compatíveis. O primeiro é muito mais rápido que o último, mas não podem ser usados ​​juntos.
   • Mudar para uso requer a exclusão da pasta node_modules
   • Se houver um problema com node-v12.0.0 , não atualize-o ainda. A versão mais recente do node-v12 não apresenta problemas.
   • Ocasionalmente, ocorrem erros de empacotamento ou de codificação inexplicáveis. Exclua node_modules e tente novamente.

Inicialização do ambiente de desenvolvimento

1. npm start
   • Por favor, use-o quando precisar de suporte, ou seja
   • npm run env -- FOR_IE=1 npm start
2. Abra http://localhost:8888 no navegador

Implantação do ambiente de produção

1. npm run app
   • Por favor, use-o quando precisar de suporte, ou seja
   • npm run env -- FOR_IE=1 npm run app
2. Basta copiar o conteúdo da pasta dist para o servidor

Adicione outros recursos

1. npm run report para visualizar a composição do pacote do pacote de produção
   • Por favor, use-o quando precisar de suporte, ou seja
   • npm run env -- FOR_IE=1 npm run report
2. npm run debug adiciona inicialização de depuração de ponto de interrupção, porta 7777
   • Por favor, use-o quando precisar de suporte, ou seja
   • npm run env -- FOR_IE=1 npm run debug

Atualizar pacote.json

• Instale npm i -g npm-check-updates
• Execute ncu (view) ncu -u (update) no diretório package.json

Use o recarregamento a quente do react-hot-loader

Documentação oficial

1. Adicione react-hot-loader a devDependencies em package.json
2. devServer.inline de webpack.cfg.dev.js deve ser true
3. Adicione react-hot-loader/babel aos plugins de .babelrc
4. Adicione --hot ao comando de inicialização, não use HotModuleReplacementPlugin ao mesmo tempo
5. O componente raiz export é modificado e react-hot-loader é introduzido antes react

 import { hot } from 'react-hot-loader' ;
export default hot ( module ) ( App ) ;

Nota: Apenas 4.3.12 suporta ie8+react@0 e requer uma pequena alteração, que foi concluída no script

Processamento de imagem

• Imagem comum => https://tinypng.com图片压缩=> url-loader (abaixo de 4kb)
• imagem svg => https://github.com/svg/svgo svg压缩=> svg-url-loader

 // 建议4kb以下使用,较大文件建议用file-loader
const src = require ( "!svg-url-loader?noquotes!./x.svg" ) ;

webpack 3 4 suporta pesquisa ie8

1. O código empacotado pelo DllPlugin não foi convertido e provavelmente terá problemas de incompatibilidade, portanto, a velocidade do empacotamento não pode ser muito melhorada.
2. O princípio do hot reload é Object.defineProperty, que não é suportado pelo IE8
3. Não é possível usar o react/antd mais recente, [email protected]/[email protected] suporta apenas ie8;
4. Neste ponto, quase todas as vantagens do webpack 3 4 não são suportadas. O Webpack 3 4 não é considerado por enquanto e a compatibilidade da versão online não é muito boa.
5. Se você realmente deseja usar o webpack 3 4 para ser compatível com o IE8, os itens a seguir são fornecidos para referência, mas não foram testados (todos devem ter problemas)
   • https://github.com/ediblecode/webpack4-ie8
   • https://github.com/natural-fe/natural-cli/blob/master/ie8-mvvm.md

Referência de especificação de código

• http://eslint.cn/docs/rules eslint规则文档
• https://github.com/yuche/javascript js规范中文版
• https://github.com/airbnb/javascript js规范es5,es6,react
• https://github.com/JasonBoy/javascript/tree/master/react react规范中文版
• https://github.com/sivan/javascript-style-guide/tree/master/es5 es5规范中文版
• Configurações esling comumente usadas eslint-config-egg eslint-config-react-app eslint-config-ali

Hábitos pessoais de codificação (diferentes de pessoa para pessoa, escolha o que você acha certo, apenas para referência)

Sobre deixar uma linha em branco no final do arquivo

• Os indivíduos seguem seus hábitos e o desenvolvimento da equipe é unificado por meio eslint --fix

Sobre recuo de código

• Os indivíduos seguem seus hábitos e o desenvolvimento da equipe é unificado por meio eslint --fix
• Há um debate interminável entre tabulações e espaços: se você não seguir o alinhamento de quebra de linha de atributo do HTML e o alinhamento de dois pontos do CSS, não há nada de errado com tabulações. Se você quiser buscar o alinhamento, é melhor usar espaços;

Sobre aspas

• js unifica aspas duplas, as aspas duplas dentro da string são unificadas " , aspas simples x27 , aspas duplas x22 , para que as aspas duplas sejam unificadas
• CSS unifica aspas duplas e o conteúdo do conteúdo deve ser escapado para evitar caracteres ilegíveis.
• css/less/scss, aspas duplas podem ser usadas em vez de aspas simples em muitos casos e, em alguns casos, aspas simples podem causar problemas durante a compilação. Além disso, as tags html também usam aspas duplas, que são unificadas.

Se deve adicionar vírgula

• Se não houver erros de sintaxe, adicione-o e haverá menos alterações nas diferenças.

Se deve adicionar um ponto e vírgula

• Se não houver erros de sintaxe, adicione-o e haverá menos alterações nas diferenças.

Sobre a definição de variáveis

• Se for definido separadamente, uma variável por linha, a prioridade é dada a const e let é usado em vez de var.
• Se possível, use a desestruturação de objetos ou arrays para atribuições.

Sobre o pedido de importação

• A maior prioridade é introduzir polyfill, seguido por React/Vue
• Em segundo lugar, no diretório do módulo (node_modules), a profundidade do caminho do módulo é classificada primeiro e a ordem é classificada e classificada de acordo com (componente>função>constante)
• Em seguida, ele é carregado por meio do carregador médio, como: promessa-carregador
• Depois, há o diretório de desenvolvimento (dev_dir), que é classificado e ordenado de acordo com (componente>função>constante)
• Introduzir arquivos de estilo, classificar e classificar de acordo com (node_modules>dev_dir)
• Importe arquivos de imagem, classifique-os e ordene-os de acordo com (node_modules>dev_dir)