Distal Webpack fluxo de trabalho (dois) - Webpack uso básico

Autor: Jogis
descrição link: https://github.com/yesvods/Blog/issues/3
reimpressão indique a informação do autor original e ligações

O artigo anterior descreve métodos Webpack e instalação, este irá introduzir o uso Webpack em um aplicativo de página única (Single aplicação Page) com o site de várias páginas em diferentes ocasiões.

Entrada e saída

Semelhante com outro carregador de módulo, Webpack também precisa configurar um arquivo de entrada, como um entry.js
Existem várias configurações, para introduzir o seguinte write arquivo diretamente para a entrada nos webpack.config.js arquivo de configuração:

module.exports = {
  entry: {
    "entry":"./entry.js"
  },
  output: {
    path: "build",
    filename: "bundle.js"
  }
}

A linha de comando

> webpack

Seja convenientemente, perfil detecção Webpack, eo caminho leitura saída de entrada do módulo eo nome do arquivo do arquivo na saída dependência um arquivo para construir / bundle.js

Com a introdução de HTML simples

<script src="./build/bundle.js"></script>

Ele pode ser executado em um navegador.

carregador

programa de SPA simples é carregado, incluindo: JS compilado e carregado, compilação CSS e carga, o carregamento de imagem e compressão, JS e compressão CSS.

Webpack fornece um mecanismo carregador, tais como: css-loader, estilo-loader, url-loader e similares, para carregar no arquivo diferentes recursos js, por exemplo url-loader para carregar png / jpg em js arquivos de imagem, css / carregador de estilo para carregar arquivos CSS, menos-loader é usado para compilar menos arquivos em css.

Aqui estão alguns carregador comum (descrita em detalhes aqui):

estilo + css + menos carregado Bootstrap menos versão:

require('style!css!less!./bower_components/bootstrap/bootstrap.less');

estilo + arquivo css carga estilo geral:

require('style!css!./styles/main.css');

url arquivo de recurso imagem de carga:

require('url!./images/logo.png');

loader json para o formato de carga json:

require('json!./data.json');

arquivo sufixo js sem usar o carregador

require('./scripts/main.js');

coffeescript carregado

require('coffee!./scripts/main.coffee');

Como os early adopters de calçados infantis por Babel experiência loader ES6 / 7 características:

require('babel!./scripts/es6.js');

Note-se que, para evitar um carregador carregado com o babel todos módulo node_module, haverá resultados inesperados, mas também um grande número de carga caso, o tempo de carregamento é muito longa. babel também pode ser usado como reactjs JSX arquivo carregado usando um olhar detalhado.

loader configuração

Acaba de introduzir uma forma de recursos de carga dentro da linha, se há um grande número de imagens ou recursos CSS precisam ser carregados, desajeitado loader regravável, Webpack fornecer uma outra maneira de recursos de carga.
Adicionando perfis de configuração:

module.exports = {
  module: {
    loaders: [
      {test: /\.css$/, loader: "style!css"},
      {test: /\.(png|jpg)$/, loader: "url-loader?limit=8192"}
    ]
  }
}

Quando o ensaio é uma expressão regular, usando o nome do arquivo de carregador de correspondência apropriado
arquivos /.css$/ jogos xx.css, mas não se aplica a xx.sass ou arquivo xx.css.zip
disso /.css/ para correspondência xx.css também pode combinar xx.css.zip

Pode ser adicionado depois que os parâmetros loader? Xx = aa passagem para indicar o xx add para aa (com endereço http consulta como)

Note-se que a necessidade de usar antes de usar o carregador

> npm i --save xxx-loader

Um respectivo carregador de instalado, e pela configuração dependente de package.json --save, uma carga não exige a introdução necessário.

Pesquisa variável de caminho

Loader descrito acima, é fácil de integrar recursos diárias Webpack uso, se for considerado Webpack só pode fazer isso, então deixe o seu desapontamento.

Pode ser visto carregamento de recursos ao longo do tempo, usar um caminho relativo para descrever o caminho para aqueles que arquivo de configuração ./app/src/scripts/main.js modificando Webpack, adicione o caminho de pesquisa padrão, ainda mais elegante.

// webpack.config.js
var path = require("path")
module.exports = {
  resolve: {
    alias: {
      js: path.join(__dirname, "./app/src/scripts")
    }
  }
}

Depois de alterar o ficheiro de configuração é carregado:

require("js/main.js");

A configuração caminho de pesquisa padrão

Para bower_components diehard, desenvolvimento front-end e, em última análise, um pavilhão de poucos plug-in, o uso gole pode ser carregado de forma dinâmica para as dependências bower.json arquivo HTML especificados por gole-wiredep.
Há também um método muito conveniente de introdução no Webpack:
Primeiro, adicione a configuração

module.exports = {
  resolve: {
    alias: {
      js: path.join(__dirname, "src/scripts"),
      src: path.join(__dirname, "src/scripts"),
      styles: path.join(__dirname, "src/styles"),
      img: path.join(__dirname, "src/img")
    },
    root: [
      path.join(__dirname, "bower_components")
    ]
  },
  plugins: [
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
      )
  ]
}

Add resolve.root representa o caminho de pesquisa padrão, use a seguinte sintaxe:

require("jquery");

Webpack será realizada sob o diretório bower_components / jquery para encontrar CommandJS módulo node_module / index.js, index.js
No entanto, porque Bower não pertence às especificações categoria CommandJS, usando bower.json principais especifica atributos a entrada arquivo de projeto
ponto, todo mundo vai saber plugins dentro da série de coisas é fazê-lo

Depois disso, podemos facilmente referenciados em qualquer arquivo js dentro jQuery:

var jQuery = $ = require("jquery");

Note-se, requer não jquery.js, mas os arquivos nas bower_components nome de pasta de diretório

desenvolvimento de várias páginas

Webpack não apenas para o desenvolvimento de SPA, para o local de várias páginas, Webpack bem apoiado, alterando o arquivo de configuração para múltiplas entradas:

module.exports = {
  entry: {
    "entry":"./src/scripts/entry.js",
    "swiperEffect":"./src/scripts/swiperEffect.js"
  },
  output: {
    path: "build"
    filename: "[name].bundle.js"
  }
}

saída de ajuste dentro, [nome] representando cada entrada de uma chave, portanto executar tempo Webpack, saídas correspondente a dois arquivos:

build/entry.bundle.js
build/swiperEffect.bundle.js

Eles podem, em seguida, foram citados em duas páginas index.html e about.html amigos

Separação de arquivo

A engenharia de front-end é reduzir http solicitações, que expressaram a necessidade de múltiplos js fundidos em um só, no entanto, apresentar um único js muito efeito sobre a velocidade das cargas navegador de arquivos, porque o navegador é agora até seis solicitações simultâneas http, você pode usar esse recurso , estará com um repositório de terceiros separado carregado-re.

especificação Use CommandJS

//entry.js
require.ensure(["jquery", "imgScroll"], function(require){
  var $ = require("jquery");
  require("imgScroll");
  $("#container").scroll({
    XXX
  })
})

Por declaração require.ensure arquivo, chamado dependência carregamento demanda, o que vai depender independente de um módulo de entrada de documento a ser carregamento acabado, tempo de carregamento sucessivo você precisará pedido

Mais uma vez compilado Webpack:

build/entry.bundle.js
build/swiperEffect.bundle.js
build/2.2.bundle.js

2.2.bundle.js que é jQuery + imgScroll assíncrona carregar o conteúdo de
uma imagem vale mais que mil palavras:

2.2.bundle.js pode ser visto na carga entry.bundle.js após carga de forma assíncrona.

Webpack comando prático

Além Webpack simplesmente executar, você também pode adicionar diversos parâmetros, fácil de implementar o processamento de documentos.

saída do arquivo JS, após a compressão enfear:

> webpack -p

monitorar automaticamente mudanças na dinâmica Webpack compilação prazo:

> webpack --watch

Normalmente fase Dev, usando --watch com o live-servidor pode alternar desenvolvimento de automação janela tedioso e pressione Enter.

Acima só descreve o desenvolvimento básico de uso Webpack front-end, mais parâmetros e uso funcional, referenciar o site oficial