1.
A entrada instrui o webpack a usar qual arquivo como ponto de partida para iniciar o empacotamento, analisar e construir o gráfico de dependência interna.
2.
A saída instrui o webpack sobre onde gerar os pacotes de recursos empacotados e como nomeá-los.
3. O loader
webpack só pode entender arquivos JavaScript e JSON, que é o recurso integrado do webpack disponível imediatamente. Os carregadores permitem que o webpack processe outros tipos de arquivos e os converta em módulos válidos que podem ser usados por aplicativos e adicionados ao gráfico de dependência.
4.
PluginsPlugins podem ser usados para executar uma ampla gama de tarefas. Os plug-ins variam desde otimização e compactação de empacotamento até redefinição de variáveis no ambiente.
5. Modo modo
(Modo) instrui o webpack a usar a configuração do modo correspondente.
Vamos dar uma introdução detalhada aos cinco conceitos principais do webpack.
O objeto de entrada é usado pelo webpack para localizar, iniciar e construir o pacote configurável. entrada é o ponto inicial do aplicativo. A partir desse ponto inicial, o aplicativo inicia a execução. Se você passar um array, cada item do array será executado. O ponto de entrada indica qual módulo o webpack deve usar para começar a construir seu gráfico de dependência interna. Após entrar no ponto de entrada, o webpack descobrirá de quais módulos e bibliotecas o ponto de entrada depende (direta e indiretamente).
Regra simples: toda página HTML tem um ponto de partida. Aplicativo de página única (SPA): um ponto de entrada, aplicativo de várias páginas (MPA): vários pontos de entrada.
O valor padrão é ./src/index.js , mas você pode especificar um ponto (ou pontos) de entrada diferente configurando o atributo entry na configuração do webpack. Por exemplo:
//Entrada única - string module.exports = {
entrada: './caminho/para/minha/entrada/arquivo.js',
};
//Múltiplas entradas--array module.exports = {
entrada: ['./src/index.js', './src/add.js']
};
//Múltiplas entradas - objeto module.exports = {
entrada: {
casa: './home.js',
sobre: './about.js',
contato: './contact.js'
}
}; Tipo de valor da entrada:
string: entrada única, empacotada para formar um pedaço, e apenas um arquivo de pacote será gerado no final. O nome padrão do pedaço é a
matriz principal: entrada múltipla, todos os arquivos de entrada serão apenas. forme um pedaço no final. Produza um arquivo de pacote e o nome do pedaço será padronizado como principal. Geralmente usado apenas na função HMR para tornar
o objeto eficaz de atualização a quente do HTML: múltiplas entradas, tantos pedaços quantas forem as chaves e tantos arquivos de pacote são gerados, e cada chave (chave) será o nome do pedaço. No tipo de objeto, o valor de cada chave também pode ser um array, não apenas uma string
output o webpack sobre como gerar e onde gerar seu pacote, ativo e outros pacotes que você empacota ou qualquer coisa carregada usando o webpack . O valor padrão do pacote de saída é ./dist/main.js e outros arquivos gerados são colocados na pasta ./dist por padrão.
Você pode configurar esses processos especificando um campo output na configuração:
//webpack.config.js
const caminho = require('caminho');
módulo.exportações = {
entrada: './caminho/para/minha/entrada/arquivo.js',
saída: {
caminho: path.resolve(__dirname, 'dist'),
nome do arquivo: 'meu-primeiro-webpack.bundle.js',
},
}; Podemos informar ao webpack o nome do pacote e onde o pacote é gerado por meio output.filename e output.path .
2.1.output.filename (nome do arquivo e diretório)
Esta opção determina o diretório e o nome de cada pacote de saída. Esses pacotes serão gravados no diretório especificado pela opção output.path .
Para um único ponto入口, filename será um nome estático. No entanto, ao criar vários pacotes configuráveis por meio de vários pontos de entrada, divisão de código ou vários plug-ins, outros métodos devem ser usados para dar a cada pacote um nome exclusivo.
//Entrada única:
módulo.exportações = {
//...
saída: {
nome do arquivo: 'js/bundle.js'
}
};
//Múltiplas entradas--use o nome da entrada:
módulo.exportações = {
//...
saída: {
nome do arquivo: '[nome].bundle.js'
}
};
//Múltiplas entradas - use um hash exclusivo para gerar module.exports = { em cada processo de construção
//...
saída: {
nome do arquivo: '[nome].[hash].bundle.js'
}
};
... 2.2.output.path (diretório de arquivo)
output.path especifica o diretório de todos os arquivos de saída, que é o diretório comum para todas as saídas futuras de recursos. path deve ser um caminho absoluto.
módulo.exportações = {
//...
saída: {
caminho: path.resolve(__dirname, 'dist/assets')
}
}; 2.3. output.publicPath (prefixo do caminho dos recursos referenciados)
publicPath especifica o prefixo do caminho público introduzido por todos os recursos no arquivo html. Não afeta o caminho do arquivo gerado. Em vez disso, quando o arquivo html introduz vários recursos, publicPath é adicionado como um prefixo ao caminho dos recursos importados.
Exemplo:
Na configuração do webpack gerada por vue-cli, o valor de publicPath no ambiente de produção é padronizado como '/', que é o diretório raiz do diretório atual.
Após o empacotamento, abrimos o arquivo html e podemos ver que o caminho do recurso introduzido no arquivo html é:
Como você pode ver, o símbolo / é adicionado na frente do caminho. Ao abrirmos o navegador para acessar o arquivo html gerado, encontraremos um erro O recurso não pode ser acessado e um relatório 404 é relatado. Neste momento, o acesso ao recurso é semelhante ao seguinte:
Pode ser o seguinte no servidor, mas pode haver problemas para acessá-lo.
Podemos alterar publicPath para um caminho relativo ou comentá-lo diretamente.
2.3.1. A diferença entre path e publicPath
打包后文件在硬盘中的存储位置，是webpack所有文件的输出的路径，必须是绝对路径。比如：输出的js、图片，HtmlWebpackPlugin生成的html文件等，都会存放在以path为基础的目录下。2.4.output.chunkFilename (nome do bloco não-entrada)
output.chunkFilename determina o nome do arquivo do bloco não-entrada. Ou seja, além dos pedaços gerados pelo arquivo de entrada, são nomeados os arquivos de pedaços gerados por outros arquivos.
módulo.exportações = {
//...
saída: {
chunkFilename: 'js/[name]_chunk.js' //O nome do bloco sem entrada}
}; O próprio carregador webpack só pode empacotar arquivos JavaScript e JSON ( webpack3+和webpack2+ possuem processamento integrado de arquivos JSON, mas webpack1+并不支持， precisa introduzir json-loader ). webpack disponível imediatamente. O próprio Webpack não oferece suporte ao empacotamento de outros tipos de arquivos, como CSS, Vue, etc., mas podemos usar vários carregadores para permitir que o webpack processe esses tipos de arquivos. O carregador pode converter arquivos de diferentes linguagens (como TypeScript) para JavaScript ou converter imagens embutidas em URLs de dados. O carregador ainda permite import arquivos CSS diretamente em módulos JavaScript!
Ao usar diferentes loader , webpack tem a capacidade de chamar scripts ou ferramentas externas para processar arquivos em diferentes formatos, como analisar e converter scss em css ou converter arquivos JS de próxima geração (ES6, ES7) em arquivos JS compatíveis com navegadores modernos. Para o desenvolvimento do React, os carregadores apropriados podem converter arquivos JSX usados no React em arquivos JS.
Na configuração do webpack, o loader possui dois atributos:
o atributo test , que identifica quais arquivos serão convertidos.
O atributo use define qual carregador deve ser usado ao realizar a conversão.
include/exclude（可选）： adicione manualmente arquivos (pastas) que devem ser processados ou bloqueie arquivos (pastas) que não precisam ser processados
query（可选） : forneça opções de configuração adicionais para carregadores
// Exemplo: webpack.config js.
const caminho = require('caminho');
módulo.exportações = {
saída: {
nome do arquivo: 'meu-primeiro-webpack.bundle.js',
},
módulo: {
regras: [
{ teste: /.txt$/, carregador: 'raw-loader' },
{ test: /.css$/, use: ['style-loader', 'css-loader'] } //Se você usar vários carregadores, você deve usar use
],
},
}; Na configuração acima, o atributo rules é definido para um objeto de módulo separado, que contém dois atributos obrigatórios: test e use . Isso equivale a dizer ao compilador do webpack que, quando ele encontrar um caminho analisado como '.txt' na instrução require() / import , use raw-loader para convertê-lo antes de empacotá-lo.
Se você usar vários carregadores, você deve usar use Os carregadores no array use são executados em ordem: da direita para a esquerda, em sequência. Por exemplo, no arquivo css acima, primeiro o css-loader compilará o arquivo css em JS e o carregará no arquivo JS. Em seguida, o style-loader criará uma tag de estilo e inserirá os recursos de estilo em JS na tag head.
3.1. CSS-loader
O Webpack fornece duas ferramentas para processar folhas de estilo, css-loader e style-loader . css-loader permite que você introduza arquivos css usando um método semelhante ao import . style-loader adiciona todos os estilos calculados à página. A combinação dos dois permite incorporar folhas de estilo em arquivos JS empacotados pelo webpack. arquivo pode ser introduzido no arquivo JS.
//Instalar npm install --save-dev style-loader css-loader //Se a versão do css-loader for muito alta, a compilação pode dar errado. Recomenda-se diminuir a versão disponível, como [email protected].
//Usar módulo.exportações = {
...
módulo: {
regras: [
{
teste: /(.jsx|.js)$/,
usar: {
carregador: "babel-loader"
},
excluir: /node_modules/
},
{
test: /.css$/, //Como introduzir vários carregadores no mesmo arquivo. A ordem de ação dos carregadores é que os carregadores posteriores comecem a agir primeiro: [
{
carregador: "carregador de estilo"
}, {
carregador: "css-loader"
}
]
}
]
}
}; Suponha que exista um arquivo main.css:
body {
fundo: verde;
} Para que o webpack encontre o arquivo "main.css", nós o importamos para "main.js", da seguinte forma:
//main.js
importar React de 'react';
importe {render} de 'react-dom';
importar o Greeter de './Greeter';
import './main.css';//Use require para importar o arquivo css render (
<Greeter />, document.getElementById('root')); ser empacotado como um arquivo css separado. No entanto, com a configuração apropriada, o webpack também pode empacotar css em arquivos separados.
são usados para converter certos tipos de módulos, enquanto plug-ins podem ser usados para executar uma gama mais ampla de tarefas, incluindo: otimização de empacotamento, compactação, gerenciamento de recursos, injeção de variáveis de ambiente, etc. O objetivo do plug-in é resolver outras coisas que o carregador não consegue realizar.
Para usar um plugin, precisamos instalá-lo via npm e então adicionar uma instância do plugin na propriedade plugins. Como os plugins podem carregar parâmetros/opções, você deve passar a new instância para plugins na configuração do webpack. A maioria dos plug-ins pode ser personalizada por meio de opções e você pode usar o mesmo plug-in diversas vezes para finalidades diferentes em um arquivo de configuração.
//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // Instalar via npm const webpack = require('webpack'); // Usado para acessar plug-ins integrados module.exports = {
módulo: {
regras: [{ teste: /.txt$/, use: 'raw-loader' }],
},
plug-ins: [novo HtmlWebpackPlugin({modelo: './src/index.html' })],
}; No exemplo acima, html-webpack-plugin gera um arquivo HTML para a aplicação e injeta automaticamente todos os pacotes gerados.
4.1. Plug-in BannerPlugin (adicionando declaração de direitos autorais)
Abaixo adicionamos um plug-in que adiciona uma declaração de direitos autorais ao código do pacote. Este plug-in é um plug-in integrado no webpack e não precisa ser instalado.
const webpack = require('webpack');
módulo.exportações = {
...
módulo: {
regras: [
{
teste: /(.jsx|.js)$/,
usar: {
carregador: "babel-loader"
},
excluir: /node_modules/
},
{
teste: /.css$/,
usar: [
{
carregador: "carregador de estilo"
}, {
carregador: "css-loader",
opções: {
módulos: verdadeiro
}
}, {
carregador: "postcss-loader"
}
]
}
]
},
plug-ins: [
novo webpack.BannerPlugin('Wenxuehai Todos os direitos reservados, qualquer reprodução será investigada')
],
}; 4.2. Plug-in Hot Module Replacement (carregamento a quente)
Hot Module Replacement (HMR) é um plug-in muito útil no webpack. Ele permite atualizar e visualizar automaticamente o efeito modificado em tempo real após modificar o código do componente. O carregamento a quente é diferente do webpack-dev-server Quando o aplicativo está em execução, a substituição a quente pode visualizar o efeito das atualizações de código sem atualizar a página, assim como modificar o estilo dom diretamente no navegador, enquanto o webpack-dev-server requer atualização. a página.
(1) Adicione o plug-in HMR ao arquivo de configuração do webpack;
(2) Adicione o parâmetro "hot" ao Webpack Dev Server
4.2.1. O React implementa o carregamento a quente
. . Babel possui um plug-in chamado react-transform-hrm , que permite que o HMR funcione corretamente sem configuração adicional do módulo React
install react-transform-hmr
npm install --save-dev babel-plugin-react-transform react -transform; -hmr
const webpack = require('webpack');
módulo.exportações = {
entrada: __dirname + "/app/main.js",//O único arquivo de entrada que foi mencionado muitas vezes saída: {
caminho: __dirname + "/public",
nome do arquivo: "bundle.js"
},
devtool: 'eval-source-mapa',
devServidor: {
contentBase: "./public",//O diretório onde a página carregada pelo servidor local está localizada historyApiFallback: true,//Não pular inline: true,
quente: verdade
},
módulo: {
regras: [
{
teste: /(.jsx|.js)$/,
usar: {
carregador: "babel-loader"
},
excluir: /node_modules/
},
{
teste: /.css$/,
usar: [
{
carregador: "carregador de estilo"
}, {
carregador: "css-loader",
opções: {
módulos: verdadeiro
}
}, {
carregador: "postcss-loader"
}
]
}
]
},
plug-ins: [
novo webpack.BannerPlugin('Direitos autorais, qualquer reprodução será investigada'),
novo webpack.HotModuleReplacementPlugin() //Plugin de recarga a quente],
}; Configurar Babel
//.babelrc
{
"predefinições": ["reação", "env"],
"env": {
"desenvolvimento": {
"plugins": [["react-transform", {
"transforma": [{
"transformar": "react-transform-hmr",
"importa": ["reagir"],
"locais": ["módulo"]
}]
}]]
}
}
} //Saudações,js
importar Reagir, {
Componente
} de 'reagir'
importar estilos de './main.css'
class Greeter estende o componente {
renderizar() {
retornar (
<div>
<h1>
aaaf
</h1>
</div>
);
}
}
exportar saudação padrão //main.js
importar React de 'react';
importar {
renderizar
} de 'react-dom';
importar o Greeter de './greeter.js';
render( < Greeter / > , document.getElementById('root')); Agora, se pudermos implementar o módulo de carregamento a quente, poderemos ver o conteúdo atualizado diretamente no navegador sempre que salvarmos, e o navegador não precisará ser atualizado. Atualizar automaticamente.
(Às vezes não há efeito, pode ser um problema de versão)
4.3. Plug-in ExtractTextWebpackPlugin (extraindo css
Por padrão, o webpack não tratará o estilo css como um arquivo independente, mas também empacotará o css em um arquivo js)
.e empacotar o arquivo gerado. Quando o arquivo js for renderizado, o estilo será inserido na página na forma de tag de estilo por meio da sintaxe js. Mas, neste caso, o arquivo do pacote empacotado pode ser muito grande. Neste momento, podemos usar o plug-in ExtractTextWebpackPlugin para separar o estilo CSS em um arquivo CSS.
O plug-in ExtractTextWebpackPlugin moverá o *.css referenciado no bloco de entrada (incluindo o arquivo css importado e o estilo escrito no arquivo vue) para um arquivo CSS independente e separado. ExtractTextPlugin irá gerar um arquivo css correspondente para cada bloco de entrada, o que significa que uma entrada corresponde a um arquivo css. Se houver várias entradas, vários arquivos css correspondentes serão gerados respectivamente.
Com o plug-in ExtractTextWebpackPlugin, seus estilos não serão mais incorporados ao pacote JS, mas serão colocados em um arquivo CSS separado (ou seja, styles.css ). Se seus arquivos de estilo forem maiores, isso tornará o carregamento antecipado mais rápido porque o pacote CSS será carregado em paralelo com o pacote JS.
const ExtractTextPlugin = require("extract-text-webpack-plugin");
módulo.exportações = {
módulo: {
regras: [
{
teste: /.css$/,
usar: ExtractTextPlugin.extract({
substituto: "carregador de estilo",
use: "css-loader"
})
}
]
},
plug-ins: [
novo ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'), //ExtractTextPlugin gera um arquivo correspondente para cada bloco de entrada, portanto, ao configurar vários blocos de entrada, você deve usar [nome], [id ] ou [contenthash]
// allChunks: true, // Ao usar `CommonsChunkPlugin` e há pedaços extraídos (de `ExtractTextPlugin.extract`) no pedaço comum, `allChunks` ** deve ser definido como `true`.
}),
]
} 4.3.1. Opção allChunks (se também extrair estilos carregados de forma assíncrona)
O valor padrão da opção allChunks do plug-in ExtractTextWebpackPlugin é false.
A opção allChunks significa se os estilos carregados de forma assíncrona precisam ser extraídos juntos. Porque por padrão, mesmo que o plug-in ExtractTextWebpackPlugin seja usado, se o estilo ou arquivo de estilo for carregado de forma assíncrona, esses estilos não serão extraídos em arquivos css independentes, mas ainda serão empacotados em arquivos js.
Portanto, allChunks:true allChunks:false é o valor padrão. O valor padrão é extrair o código da entrada, mas o código carregado de forma assíncrona não será extraído; um arquivo. Se o carregamento assíncrono de estilos for usado, mas allChunks estiver definido como falso, precisamos definir o substituto de ExtractTextPlugin.extract. fallback é usar style-loader para carregar de forma assíncrona quando o código CSS carregado pelo código assíncrono não for usado. extraído. O estilo do componente.
Consulte:
https://github.com/sevenCon/blog-github/blob/master/articles/webpack notas de estudo (2) -Uso de ExtractTextWebpackPlugin.md
https://blog.csdn.net/weixin_41134409/article/ detalhes /88416356
Ao selecionar development , production ou none para definir mode , você pode ativar a otimização integrada do webpack no ambiente correspondente. Seu valor padrão é production .
módulo.exportações = {
modo: 'produção',
}; Configurar a opção mode diretamente no arquivo de configuração dirá ao webpack para usar a otimização integrada do modo correspondente. As opções de modo incluem desenvolvimento, produção e nenhum.
desenvolvimento: modo de desenvolvimento, o código empacotado não será compactado e a depuração de código está habilitada.
produção: modo de produção, exatamente o oposto.
Defina o modo para desenvolvimento ou produção e o webpack definirá automaticamente o valor de process.env.NODE_ENV. Podemos obter esse valor diretamente em qualquer pasta. Mas se você definir apenas NODE_ENV , mode não será definido automaticamente. (No nó, a variável global process representa o processo do nó atual. O atributo process.env contém informações do ambiente do usuário. O atributo NODE_ENV não existe no próprio process.env. Geralmente nós mesmos definimos o atributo NODE_ENV e o usamos para determinar se ele é um ambiente de produção ou um ambiente de desenvolvimento)
(Observação: a opção mode é nova no webpack4. Antes de 4, ela era definida com o plug-in DefinePlugin. Webpack4 excluiu o DefinePlugin)
5.1. é explicado em detalhes
no webpack. Geralmente, o valor de NODE_ENV será configurado no arquivo de configuração. No projeto vue gerado por padrão usando vue-cli, a configuração NODE_ENV é a seguinte:
//No arquivo webpack.dev.conf.js, o arquivo dev.env.js é introduzido new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}), //module.exports = merge(prodEnv, { no arquivo dev.env.js
NODE_ENV: '"desenvolvimento"'
}) // No arquivo webpack.prod.conf.js, o arquivo prod.env.js é introduzido const env = require('../config/prod.env')
novo webpack.DefinePlugin({
'process.env': env
}), //module.exports = { no arquivo prod.env.js
NODE_ENV: '"produção"'
} Como você pode ver acima, no ambiente de desenvolvimento, o arquivo de configuração configura NODE_ENV para 'desenvolvimento' no ambiente de produção, o arquivo de configuração configura NODE_ENV para 'produção';
Quando executarmos o projeto, executaremos npm run dev ou npm run build. Esses dois comandos usam o arquivo de configuração do ambiente de desenvolvimento ou ambiente de produção para gerar o projeto em execução e, de acordo, configurar o valor NODE_ENV correspondente. o valor NODE_ENV correspondente pode ser obtido em qualquer arquivo do projeto (não necessariamente no arquivo de configuração, pois depende se o arquivo de configuração configurado com o valor NODE_ENV entrou em vigor).
5.2
O processo de configuração Process.env.NODE_ENV é uma variável global do nó, e o processo possui o atributo env, mas não possui o atributo NODE_ENV. A variável NODE_ENV não está disponível diretamente em process.env, mas é obtida configurando-o. No entanto, NODE_ENV geralmente é usada para definir o tipo de ambiente. A função desta variável é: podemos distinguir o ambiente de desenvolvimento ou o ambiente de produção julgando esta variável.
(1) Os valores das variáveis globais podem ser definidos por meio do plugin DefinePlugin integrado do webpack:
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('produção')
}), após a configuração, você pode obter este valor no script de execução, por exemplo:
// main.js console.log(process.env.NODE_ENV); //produção
mas este valor não pode ser obtido no arquivo de configuração do webpack webpack.config.js.
(2) Primeiro baixe o pacote cross-env através da
configuração do pacote cross-env:
cnpm i cross-env -D
Defina o arquivo package.json:
"build": "cross-env NODE_ENV=test webpack --config webpack.config .js"
Neste momento, o valor (process.env.NODE_ENV) pode ser obtido no arquivo de configuração, mas não pode ser obtido no script executável. Ele precisa ser usado com o plug-in DefinePlugin.