English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Após aprender o tutorial de nível de entrada do webpack, acho que ele é especialmente projetado para aplicativos de uma página, por exemplo, webpack+react, webpack+vue e outros, podem resolver vários problemas de carregamento e empacotamento de recursos. Até o css pode ser empacotado no js e adicionado dinamicamente ao documento dom.
Se queremos um site web com várias páginas comuns, css separado, js carregado com módulos?
Endereço do projeto：webpackDemo_jb51.rar
Inicialização do projeto, instalação de dependências
package.json
"devDependencies": {
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.9.0",
"jquery": "^1.12.0",
"less": "^2.6.0",
"less-loader": "^2.2.2",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
Estrutura de diretório (uso o framework express, outros de acordo com a necessidade pessoal)
- webpackDemo
- src #Diretório de desenvolvimento de código
- css #Diretório CSS, organizado conforme página (módulo), geral e terceiro nível
+ page
+ common
+ lib
- js #Script JS, organizado conforme page e components
+ page
+ components
+ template #Modelo HTML
- node_modules #Módulos do nodejs usados
- public #Arquivos estáticos do express
- dist #Diretório de saída de compilação e empacotamento do webpack, não é necessário criar diretório, pode ser gerado automaticamente pelo webpack com base na configuração
+ css
+ js
+ img #Recursos de imagem
+ view #Arquivos estáticos do express (saída de compilação e empacotamento do webpack para o diretório view)
package.json #Configuração do projeto
webpack.config.js #Configuração do webpack
Desenvolvimento de página
Dentro de src/js/Crie o arquivo index.js no diretório page, dentro de src/Crie o arquivo index.html no diretório view. O nome do arquivo JS de entrada e o nome do arquivo de modelo devem corresponder.
Conteúdo do index.html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Home</title>
<!--
Descrição: Não é necessário introduzir CSS e facicon no head, o webpack realizará o carregamento conforme necessário ou gerará o tag style com base no arquivo JS de entrada
-->
</head>
<body>
<!--
Descrição: Não é necessário introduzir o arquivo JS separadamente no body, o webpack realizará o carregamento conforme necessário ou gerará o tag script com base no arquivo JS de entrada, e também pode gerar o valor hash correspondente
-->
</body>
</html>
É assim um simples modelo HTML, sem precisar introduzir CSS e JS, através do webpack empacotado pode nos ajudar a introduzir automaticamente.
Conteúdo do index.js如下：
//Introduz css
require("../../css/lib/base.css");
require("../../css/page/index.scss");
$('body').append('<p class="text">index</p>');
page1.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>page1</title> </head> <body> </body> </html>
page1.js:
//Introduz css
require("../../css/lib/base.css");
require("../../css/page/page1.less");
$('body').html('page1');
Configuração do webpack (estou usando o framework express, outros de acordo com a necessidade pessoal)
var path = require('path');
var webpack = require('webpack');
/*
extract-text-webpack-plugin plugin
Com ele, você pode extrair seus estilos para um arquivo css separado,
A mamãe já não precisa mais se preocupar com a compactação de estilos no arquivo js.
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin plugin, uma ferramenta essencial para gerar HTML no webpack
Pode verificar aqui https://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: { //Configura o arquivo de entrada, escreva quantos tiver
index: './src/js/page/index.js',
page1: './src/js/page/page1.js'
},
output: {
path: path.join(__dirname, '.',/public/dist/'), //configuração do diretório de saída, caminhos dos recursos de template, estilo, script, imagens etc. são relativos a ele
publicPath: '/dist/', //caminhos do servidor para recursos de template, estilo, script, imagens etc.
filename: 'js/[name].js', //configuração gerada para o js principal de cada página
chunkFilename: 'js/[id].chunk.js' //configuração gerada pelo chunk
},
módulo: {
carregadores: [ //Loader, sobre a configuração dos parâmetros de cada loader, você pode procurar por conta própria.
{
test: /.css$/,
//Configura o extrator e loader do css.'-loader' pode ser omitido
loader: ExtractTextPlugin.extract('style-loader', 'css-loader)
test: /.less$/,
//Configura o extrator e loader do less. Intermediário! É necessário explicar.
//Chama os loaders less, css na ordem de direita para esquerda, a saída do anterior é a entrada do seguinte
//Você também pode desenvolver seu próprio loader. Sobre a escrita do loader, você pode procurar no Google.
loader: ExtractTextPlugin.extract('css!less')
test: /\.scss$/,
//Configura o extrator e loader do scss. Intermediário! É necessário explicar.
//Chama os loaders scss, css na ordem de direita para esquerda, a saída do anterior é a entrada do seguinte
//Você também pode desenvolver seu próprio loader. Sobre a escrita do loader, você pode procurar no Google.
loader: ExtractTextPlugin.extract('css!scss')
//Carregador de modelos HTML, capaz de lidar com recursos estáticos referenciados, parâmetros de configuração padrão attrs=img:src, tratando de recursos de referência src de imagens
//Por exemplo, se você configurar, attrs=img:src img:data-src pode ser processado juntamente com data-Recursos referenciados por src, como mostrado abaixo
test: /.html$/,
loader: "html?attrs=img:src img:data-src"
//Loader de arquivo, processa recursos estáticos estáticos
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]
//Loader de imagem, semelhante ao file-loader, mais adequado para imagens, pode converter imagens menores em base64para reduzir as solicitações http
//Configuração como follows, converter imagens menores do que8192Converter imagens em bytes em base64Código
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
}
},
plugins: [
new webpack.ProvidePlugin({ //加载jq
$: 'jquery'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'commons', // 将公共模块提取，生成名为`commons`的chunk
chunks: ['index','page1], //Extrair quais partes comuns dos módulos
minChunks: 2 // Extrair pelo menos2Partes comuns de vários módulos
}),
new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
//Configurações relacionadas à geração de modelos do HtmlWebpackPlugin, uma para cada configuração de página, escreva quantas houver
new HtmlWebpackPlugin({ //Inserir css com base no modelo/js e outros geram o HTML final
favicon: '.',/src/favicon.ico', //Caminho do favicon, introduzido pelo webpack e pode gerar hash
filename: '../../views/index.html', //Caminho de armazenamento do html gerado, em relação ao path
template: '.',/src/template/index.html', //Caminho do template HTML
inject: 'body', //Posição de inserção do js, true/'head'/'body'/false
hash: true, //Gerar hash para os recursos estáticos
chunks: ['commons', 'index'],//Os chunks que precisam ser importados, se não for configurado, todos os recursos das páginas serão importados
minify: { //Comprimir arquivo HTML
removeComments: true, //Remover comentários do HTML
collapseWhitespace: false //Remover espaços em branco e quebras de linha
}
}),
new HtmlWebpackPlugin({ //Inserir css com base no modelo/js e outros geram o HTML final
favicon: '.',/src/favicon.ico', //Caminho do favicon, introduzido pelo webpack e pode gerar hash
filename: '../../views/page1.html', //Caminho de armazenamento do html gerado, em relação ao path
template: '.',/src/template/page1.html', //Caminho do template HTML
inject: true, //Posição de inserção do js, true/'head'/'body'/false
hash: true, //Gerar hash para os recursos estáticos
chunks: ['commons', 'list'],//Os chunks que precisam ser importados, se não for configurado, todos os recursos das páginas serão importados
minify: { //Comprimir arquivo HTML
removeComments: true, //Remover comentários do HTML
collapseWhitespace: false //Remover espaços em branco e quebras de linha
}
}
// new webpack.HotModuleReplacementPlugin(), //Hot reload
],
//Usar webpack-dev-server, para aumentar a eficiência do desenvolvimento
// devServer: {
// contentBase: '.',/',
// host: 'localhost',
// port: 9090, //Padrão8080
// inline: true, //Pode monitorar as mudanças no js
// hot: true, //Hot restart
// }
};
Feito, após configurar os seguintes itens, execute o comando de empacotamento webpack para concluir o empacotamento do projeto.
Hash: e6219853995506fd132a
Version: webpack 1.14.0
Time: 1338ms
Asset Size Chunks Chunk Names
js/index.js 457 bytes 0 [emitted] index
js/page1.js 392 bytes 1 [emitted] página1
js/commons.js 306 kB 2 [emitted] commons
css/index.css 62 bytes 0 [emitted] index
css/page1.css 62 bytes 1 [emitted] página1
css/commons.css 803 bytes 2 [emitted] commons
favicon.ico 1.15 kB [emitted]
../../view/index.html 496 bytes [emitted]
../../view/page1.html 499 bytes [emitted]
[0] ./src/js/page/index.js 170 bytes {0} [built]
[0] ./src/js/page/page1.js 106 bytes {1} [built]
+ 7 módulos ocultos
Child html-webpack-plugin for "../../view/page1.html":
+ 1 módulos ocultos
Child html-webpack-plugin for "../../view/index.html":
+ 1 módulos ocultos
Child extract-text-webpack-plugin:
+ 2 módulos ocultos
Child extract-text-webpack-plugin:
+ 2 módulos ocultos
Child extract-text-webpack-plugin:
+ 2 módulos ocultos
Neste momento, vá para o diretório views para verificar o arquivo index.html gerado, conforme a seguir:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Home</title> <link rel="shortcut icon" href="/dist/favicon.ico" rel="external nofollow" ><link href="/dist/css/commons.css?e6219853995506fd132a" rel="external nofollow" rel="stylesheet"><link href="/dist/css/index.css?e6219853995506fd132a" rel="external nofollow" rel="stylesheet"></head> <body> <script type="text/javascript" src="/dist/js/commons.js?e6219853995506fd132a"></script><script type="text/javascript" src="/dist/js/index.js?e6219853995506fd132a"></script></body> </html>
Pode ver que os arquivos gerados, além de manter o conteúdo do template original, também adicionam automaticamente os arquivos CSS e JS a serem incluídos com base na definição do arquivo entry index.js, bem como o favicon, e também adicionam o valor hash correspondente.
Dois problemas
var path = require('path');
var webpack = require('webpack');
var glob = require('glob');
/*
extract-text-webpack-plugin plugin
Com ele, você pode extrair seus estilos para um arquivo css separado,
A mamãe já não precisa mais se preocupar com a compactação de estilos no arquivo js.
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin plugin, uma ferramenta essencial para gerar HTML no webpack
Pode verificar aqui https://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
/**
*将公共模块提取，生成名为`commons`的chunk
*/
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
//Compressão
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
//Verificar o modo de desenvolvimento
var debug = process.env.NODE_ENV !== 'production';
var getEntry = function(globPath, pathDir) {
var files = glob.sync(globPath);
var entries = {},
entry, dirname, basename, pathname, extname;
for (var i = 0; i < files.length; i++) {
entry = files[i];
dirname = path.dirname(entry); //Diretório do arquivo
extname = path.extname(entry); //Extensão do arquivo
basename = path.basename(entry, extname); //Nome do arquivo
pathname = path.join(dirname, basename);
pathname = pathDir + ""63; pathname.replace(new RegExp('^', '')) : pathname; + pathDir, '') : pathname;
entries[pathname] = ['./ + entry]; //isto é assim no sistema osx, win7 entries[basename]
}
console.log(entries);
return entries;
}
//entrada (obtida pelo método getEntry para todos os arquivos de entrada de página)
var entries = getEntry('src/js/page/**/*.js', 'src/js/page/');
//extrair partes comuns de módulos a partir de entries para obter nomes de arquivos
var chunks = Object.keys(entries);
//páginas de template (obtidas pelo método getEntry)
var pages = Object.keys(getEntry('src/template/**/*.html', 'src/template/'));
console.log(pages)
var config = {
entry: entries,
output: {
path: path.join(__dirname, '.',/public/dist/'),//configuração do diretório de saída, caminhos dos recursos de template, estilo, script, imagens etc. são relativos a ele
publicPath: '/dist/', //caminhos do servidor para recursos de template, estilo, script, imagens etc.
filename: 'js/[name].js', //configuração gerada para o js principal de cada página
chunkFilename: 'js/[id].chunk.js?[chunkhash]' //configuração gerada pelo chunk
},
módulo: {
carregadores: [ //carregador
{
test: /.css$/,
loader: ExtractTextPlugin.extract('style', 'css')
test: /.less$/,
loader: ExtractTextPlugin.extract('css!less')
test: /.html$/,
loader: "html?-minimizar" //evitar compressão de html,https://github.com/webpack/html-loader/issues/50
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=fonts/[name].[ext]
test: /\.(png|jpe?g|gif)$/,
loader: 'url-loader?limit=8192&name=imgs/[name]-[hash].[ext]'
}
},
plugins: [
new webpack.ProvidePlugin({ //加载jq
$: 'jquery'
}),
new CommonsChunkPlugin({
name: 'commons', // 将公共模块提取，生成名为`commons`的chunk
chunks: chunks,
minChunks: chunks.length // 提取所有entry共同依赖的模块
}),
new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
debug ? function() {} : new UglifyJsPlugin({ //压缩代码
compress: {
warnings: false
},
except: ['$super', '$', 'exports', 'require'] //排除关键字
}),
};
pages.forEach(function(pathname) {
var conf = {
filename: '../../views/ + pathname + '.html', //Caminho de armazenamento do html gerado, em relação ao path
template: 'src/template/ + pathname + '.html', //Caminho do template HTML
inject: false, //Posição de inserção do js, true/'head'/'body'/false
/*
* Neste bloco de compressão, foi chamado o html-minify, pode causar muitos problemas de verificação de sintaxe do HTML durante a compressão,
* Se usar expressões {{...}} no atributo do HTML tag, então em muitos casos não é necessário configurar o item de compressão aqui,
* Além disso, o UglifyJsPlugin comprime o código HTML junto com o HTML durante a compressão.
* Para evitar a compressão do html, é necessário configurar no html-Configuração 'html?-minimize' no loaders/html-Configuração do loader.
*/
// minify: { //Comprimir arquivo HTML
// removeComments: true, //Remover comentários do HTML
// collapseWhitespace: false //Remover espaços em branco e quebras de linha
// }
};
se (pathname in config.entry) {
favicon: '.',/src/favicon.ico', //Caminho do favicon, introduzido pelo webpack e pode gerar hash
conf.inject = 'body';
conf.chunks = ['commons', pathname];
conf.hash = true;
}
config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;
O código abaixo é semelhante ao acima, a diferença essencial é que todos os arquivos relacionados são colocados em um objeto por um método, assim é concluído o efeito de importação automática!
A configuração acima é para o sistema operacional mac osx, win7Os caminhos podem ser diferentes
glob: Aqui, a parseada é diferente:
mas requer que o final
entries:
{
index: ['./src/template/index.js'],
page1: ['./src/template/page1.js']
}
pages:
['index', 'page1']
Deve ser ajustado conforme a configuração do seu computador pessoal
Isso é tudo o que há no artigo. Esperamos que isso ajude na sua aprendizagem e que você apóie o tutorial Gritar.
Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao autor original, foi contribuído e carregado voluntariamente pelos usuários da Internet. Este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por questões legais relacionadas. Se você encontrar conteúdo suspeito de infringir direitos autorais, seja bem-vindo a enviar e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Aparentemente, o site deletará imediatamente o conteúdo suspeito de infringir direitos autorais.