Webpack baseado no uso de arquivos de configuração e o modo de processamento (foto baseou-) (a)

1. Introdução

Webpack ainda é uma moderna aplicação js módulo de embalagem ferramentas

A extremidade dianteira modular

■ modular front-end :

• No estudo anterior, eu usei um monte de espaço para explicar por que a necessidade de modular front-end.
• E eu também mencionou um número de programas atualmente usar front-end modular: AMD, CMD, commonjs, ES6.
• Antes ES6, queremos ser o desenvolvimento modular, temos de recorrer a outras ferramentas, para que possamos ser o desenvolvimento modular.
• E após a conclusão do projeto para desenvolver um modular, também precisa dependências alça entre os vários módulos e seu pacote de integração.
• Aquele Webpack do núcleo é fazer-nos possível desenvolvimento modular, e vai nos ajudar a lidar com as dependências entre os módulos.
• E não apenas o arquivo JavaScript, o nosso CSS, imagens, arquivo json no Webpack etc. pode ser usado como módulos em uso (na seguinte, vamos olhar
  para).
• Esta é Webpack em um conceito modular.

■ Pacote Como entender isso?

• Depois Webpack pode nos ajudar a entender a modular, e lidar com a complexa relação entre módulos, embalados conceito muito bom de entender.
• É para Webpack vários módulos de recursos embalados combinados em um ou mais pacotes (bundle).
• E no processo de embalagem, também podem ser processados ​​por recursos como imagens comprimidas, o SCSS transformar em css, vai se transformar em ES5 ES6 gramática gramática, texto datilografado vai se transformar em JavaScript, etc. operações
• Mas a operação de embalagem parece grunhido / gole pode nos ajudar, eles têm que diferença vai fazer?

E grunhido comparativa / gole de

Núcleo ■ grunhido / gole uma Tarefa

• Podemos configurar uma série de tarefas, e a tarefa de definir o processamento de transações (por exemplo ES6, st conversão, compressão de imagem, por sua vez, SCSS em css)
• Então deixe / gole grunhido, a fim de executar a tarefa, e toda a automação de processos.
• Então grunhido / gole também conhecido como ferramenta de gerenciamento de tarefas automatizadas front-end.

■ Vamos olhar para um gole de tarefa

• A tarefa seguinte é transformar todos os arquivos a seguinte src js em uma sintaxe de ES5.
• E o resultado final para a pasta dist.

■ Quando um grunhido / engoli-la?

• Se o seu projeto é muito simples módulo de dependência, e mesmo não usou o conceito de modularidade.
• só precisa de uma simples fusão, compressão, utilize o grunhido / gole para.
• Mas se todo o projeto usando o gerenciamento modular, e interdependência é muito forte, podemos usar uma Webpack mais poderoso.

■ Assim, grunhido / gole e Webpack diferente?

• grunhido / gole mais ênfase na extremidade da frente do processo é automatizado, modular do que o seu núcleo.
• Webpack maior ênfase no desenvolvimento modular e gestão, e fusão de compressão de arquivo, pré-tratamento e outras funções, é fornecido com uma função.

const gulp = require('gulp');
const babel = require(' gulp-babel');

gu1p.task('js'，() =>
     gulp.src('src/*.js')
    .pipe(babel({
         presets: ['es2015']
     }))
    .pipe(gu1p. dest('dist'))
);

2. Instale

• Instalação Webpack primeira necessidade de instalar Node.js, Node.js vem com o MPN ferramentas de gerenciamento de pacotes
• Verifique a sua versão de nó:

node -v

• Globais instaladas Webpack (aqui eu gostaria de especificar o número da versão 3.6.0, uma vez cli2 vue depende da versão)

npm install webpack@3.6.0 -g

• (Follow-up foi requerido) montado localmente Webpack
  -Save dependente dev é o desenvolvimento, o projeto não precisa continuar a usar o pacote.
  o correspondente cd diretório

npm install webpack@3.6.0 --save -dev

• Por que instalou o global, você também precisa instalá-lo localmente?
  webpack --versionCheque não instalado
  no comando Webpack diretamente executado terminal, o Webpack instalada global usado
  quando os scripts definidos no package.json, que contém comando Webpack, em seguida, usar o local, Webpack

3. inicie

Análise de arquivos e pastas:

• pasta dist: Depois que o arquivo é embalado para armazenamento
• pasta src: Nós escrevemos para armazenar arquivos de origem
  main.js: arquivo de entrada para o projeto. Detalhes veja abaixo para mais detalhes.
  mathUtils.js: define alguma função ferramentas de matemática pode ser referenciado em outros lugares, e uso.
• index.html: navegador abre o html home page espectáculo
• package.json: por npm o init gerado, o arquivo de gerenciamento de pacotes NPM (temporariamente sem acesso a, atrás apenas gastar)

js embaladas

■ Agora js arquivo usando uma abordagem modular para o desenvolvimento, eles podem usá-lo diretamente? Não.

• Porque se incorporado diretamente no arquivo tanto index.html I js, o navegador não reconhece onde o código modular.
• Além disso, em um projeto real quando há muitos arquivos tais js, citamos um muito problemático, e este último é muito inconveniente para gerenciá-los.

■ como devemos fazê-lo? Ferramenta de uso Webpack para arquivo várias js é embalado.

• Nós sabemos disso. Webpack é uma ferramenta de empacotamento modular, que nos apoia em escrever código modular que pode ser processado código modular.
• Além disso, após o processamento, se as relações entre todos os módulos, uma pluralidade de js embalados - JS um ficheiro, quando da introdução torna-se muito conveniente.

■ OK, como empacotá-lo? Instruções de usar Webpack
Webpack src / main.js dist / bundle.js

4. Configure

Consideramos, se Webpack de comandos precisam ser negociados entrada e saída como um argumento, muito problemático, há uma maneira para escrever a configuração dos dois parâmetros podem ser lidos diretamente em tempo de execução, para este fim, criamos um webpack.config.jsarquivo

Este link também está no bug em execução pode aparecer, tente executar o seguinte código
de erro embalagem Webpack ERRO em multi ./src/main.js ./dist/bundle.js

 webpack ./src/main.js -o ./dist/bundle.js

Como resolver este problema, o caminho para ler o seguinte casos

bundle.js arquivo embalados podem ser invocados na página index.html

package.json início definida

■ bater cada execução assim? - longas cadeias Você sente inconveniente para fazer
Podemos definir seu próprio package.json execução do script de scripts.
■ package.json nos scripts do script é executado, você vai encontrar a localização do comando correspondente a uma determinada ordem.

• Primeiro, o comando irá procurar .modules node_ locais / bin caminho correspondente.
• Se nada for encontrado, ele vai variável de ambiente global para encontrar.
• Como executar o nosso comando construí-lo?

npm ruin build


estapackage.jsonDentro problema errado conteúdo pode ser um problema de software, tente alterar o software para tentar, eu tenho um problema com WebStorm abrir nenhum problema com a idéia

haverá uma pasta node_module que, após o fim do prazo

Cada pacote vai escrever novamente Webpack ./src/main.js -o ./dist/bundle.js inconveniente

Webpack instalação local

■ Atualmente, Webpack estamos usando o Webpack global, se quisermos usá-lo localmente para embalar?

• Como os projetos são muitas vezes dependentes de uma determinada versão de Webpack, a versão global deste Webpack pode ser versões inconsistentes do projeto, problemas de embalagem de exportação.
• Em geral, ele é um projeto tem seu próprio Webpack local.

■ O primeiro - passo. O projeto terá de instalar seu próprio Webpack locais

• Aqui deixamos o webpack3.6.0 instalação local
• CL3 vue foi atualizado para webpack4. Mas vai Profiles esconderijo, para que a vista não é muito conveniente.

npm install webpack@3.6.0 --save- dev

■ um segundo passo ,. módulos / bin / Webpack começam Webpack embalados por Nó


Webpack correr nos dos terminais ou globais é
possível ./node_modules/webpack, que pode ser realizada localmente obteve

uso 5.loader

Mas pacote css vai reclamar diretamente

para carregar o arquivo CSS correspondente deve ter um correspondente carregador
https://webpack.js.org/

arquivo de configuração de instalação

npm install --save-dev css-loader

conteúdo configure suplementar

depois de completar a construção em Run npm

• Porque css-loader é responsável apenas para o arquivo css para carga e estilo-loader é responsável pelo estilo para o Dom
• Webpack loader lendo utilizado no processo, de acordo comDa direita para a esquerdaA leitura fim

Então, em seguida, arquivo de configuração do estilo de carregador de download

npm install --save-dev style-loader

manuseio menos documento

Instalar o carregador correspondente

npm install --save-dev less-loader less

webpack.config.js configuração modificada, após a adição de RUN construção NPM

menos de arquivo

main.js adicionado dependente

efeito operação index.html (nota para um ficheiro de script bundl.js incorporados)

manipulação de arquivo de imagem

(11.png <limite <timg.jpg)


安装loader

npm install --save-dev url-loader

Modificar o arquivo de configuração

npm run buildpara ser executado,
aparecem erroModule build failed: Error: Cannot find module 'file-loader'

Quando a carga é maior do que o limite de imagem, você precisa usar o módulo de arquivo-loader é carregado(Isso é algo que eu 11.png substituído timg.jpg, e por isso não é maior do que o caso limite)

instalado loader

cnpm install --save-dev file-loader

npm prazo de construção em execução, completar o pacote imagem
(não menos do que o limite não aparecem quando embalado? ? ? ? ? ? ? ? ? ? ? ? ?
I embalado pacote dist não está no img imagem rodando 11 mostra também)

• Encontramos ajuda webpuck nos gerar automaticamente um tempo muito longo nome
  que é um valor hash de 32 bits. O Japão é para evitar nomes duplicados
  , mas verdadeiro desenvolvimento, nós podemos ter que imaginar o nome do pacote - conjunto de requisitos
  , por exemplo, configurações de todas as imagens em um arquivo central, mantendo o ritmo com o nome original da imagem, ao mesmo tempo ter para evitar a duplicação
• Então, podemos adicionar as seguintes opções nas opções:
  img: Luta como um arquivo para uma pasta
  nome: Obter nome original filmes nacionais. Nesta posição
  Hash: 8 : A fim de evitar os conflitos de nomes de imagem ainda usam haxixe, mas retemos apenas oito
  ext: Extensão original utilizando o remendo

Arquivos para ser embalado em uma pasta / [Pictures adquiriu o nome original, em que a posição]. [Valor Hash]. [Imagem extensão original]

• No entanto, encontramos folha de resistência não aparece, porque o caminho não é correto usar a imagem
  por padrão, irá gerar caminho direto Webpack Unidos para usar a fila de trás
  , no entanto, porque todo o nosso programa é jogar rápido arquivo sob dist , então aqui nós precisamos adicionar no caminho de uma dist /

npm construção run (observe a imagem ilegível nome antes, primeiro remova)

run index.html, as alterações de fundo estão completos

processamento .ES6 sintaxe

■ Se você ler atentamente js Webpack embalados, descobrir e sintaxe gravação ES6 não se transformar em ES5, então isso poderia significar - para alguns não há nenhum navegador ES6 maneira não suporta boa corrida nosso código.
■ Na frente dissemos, se você deseja transformar em ES6 sintaxe ES5, então você precisa usar babel, enquanto em Webpack, usamos diretamente o babel loader correspondente nele. --save-devEles estão ligados

cnpm install --save-dev babel-loader@7 babel-core babel-preset-es2015

■ webpack.config.js configuração de arquivo

■ remontar npm run buildvista bundle.js arquivo e encontrou o seu conteúdo em uma sintaxe de ES5 (ES6 pode ser visto na const tornaram-se uma var)

(De acordo com o acima microblog terminar "coderwhy" video vue é claro)