English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Dopo aver studiato i tutorial di livello avanzato di webpack, penso che sia stato progettato appositamente per applicazioni web singole, come webpack+react, webpack+vue, ecc., che possono risolvere vari problemi di caricamento e pacchettizzazione delle risorse. persino il css viene pacchettizzato nel js e aggiunto dinamicamente al documento DOM.
Quindi, se vogliamo un sito web multipagina normale, css indipendente, js caricato con moduli?
Indirizzo del progetto:webpackDemo_jb51.rar
Inizializzazione del progetto, installazione delle dipendenze
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"
{}
Struttura delle directory (utilizzo il framework express, altri secondo necessità personali)
- webpackDemo
- src #代码开发目录
- css #css目录，按照页面（模块）、通用、第三方三个级别进行组织
+ pagina
+ common
+ lib
- js #JS脚本，按照page、components进行组织
+ pagina
+ componenti
+ template # template HTML
- node_modules # moduli nodejs utilizzati
- public # risorse statiche express
- dist # directory di output della compilazione webpack, non è necessario creare la directory e può essere generata automaticamente da webpack in base alla configurazione
+ css
+ js
+ img # risorse immagine
+ view # risorse statiche express (directory di output compilata da webpack)
package.json # configurazione del progetto
webpack.config.js # configurazione webpack
Sviluppo della pagina
Crea un file index.js nella directory src/js/page e un file index.html nella directory src/view. Il nome del file JS di ingresso e il nome del file di template devono corrispondere.
Contenuto di index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pagina iniziale</title>
<!--
Descrizione: non è necessario introdurre CSS o facicon nel head, webpack realizzerà automaticamente il caricamento richiesto o genererà tag style in base alle richieste del file JS di ingresso
-->
</head>
<body>
<!--
Descrizione: non è necessario introdurre file JS singoli nel body, webpack realizzerà automaticamente il caricamento richiesto o genererà tag script in base al file JS di ingresso, e può anche generare valori hash corrispondenti
-->
</body>
</html>
Ecco un semplice template HTML, non è necessario introdurre alcun CSS e JS, può essere automaticamente incluso tramite webpack.
Contenuto di index.js:
// introduzione 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:
// introduzione css
require("../../css/lib/base.css");
require("../../css/page/page1.less");
$('body').html('page1');
configurazione webpack (uso il framework express, gli altri in base alle tue esigenze)
var path = require('path');
var webpack = require('webpack');
/*
L'estensione extract-text-webpack-plugin
Con essa puoi estrarre i tuoi stili in file css separati.
Non devi più preoccuparti che i stili vengano compressi nei file js.
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
L'estensione html-webpack-plugin è fondamentale, un'estensione di webpack per generare HTML
Puoi consultare qui: https://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: { // configurazione del file di ingresso, scrivi quanti ce ne sono
index: './src/js/page/index.js'
page1: './src/js/page/page1.js'
},
output: {
path: path.join(__dirname, './public/dist/'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
publicPath: '/dist/', // path on the server for templates, styles, scripts, images, etc.
filename: 'js/[name].js', // generation configuration for the main js of each page
chunkFilename: 'js/[id].chunk.js' //chunk生成的配置
},
module: {
loaders: [ //加载器，关于各个加载器的参数配置，可自行搜索之。
{
test: /\.css$/,
//配置css的抽取器、加载器。'-loader'可以省去
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}, {
test: /\.less$/,
//配置less的抽取器、加载器。中间!有必要解释一下，
//根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入
//你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
loader: ExtractTextPlugin.extract('css!less')
}, {
test: /\.scss$/
//配置scss的抽取器、加载器。中间!有必要解释一下，
//根据从右到左的顺序依次调用scss、css加载器，前一个的输出是后一个的输入
//你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
loader: ExtractTextPlugin.extract('css!scss')
}, {
//html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
//比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样
test: /\.html$/,
loader: "html?attrs=img:src img:data-src"
}, {
//文件加载器，处理文件静态资源
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]'
}, {
//图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
//如下配置，将小于8192byte的图片转成base64码
test: /\.(png|jpg|gif)$/
loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
{}
])
},
plugins: [}}
new webpack.ProvidePlugin({ // carica jq
$: 'jquery'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'commons', // estrai i moduli comuni e genera un chunk chiamato `commons`
chunks: ['index','page1'], //estratti i moduli comuni
minChunks: 2 // estrae almeno le parti comuni di 2 moduli
}),
new ExtractTextPlugin('css/[name].css'), // utilizza il tag link per caricare il css e imposta il percorso, rispetto a publickPath della configurazione di output
// HtmlWebpackPlugin, configurazioni relative alla generazione del template, una per pagina, ne hai quanti ne hai scritto
new HtmlWebpackPlugin({ //inserire css/js ecc. basati sul template per generare l'html finale
favicon: './src/favicon.ico', // percorso favicon, introdotto tramite webpack e può generare un hash
filename: '../../views/index.html', //percorso di archiviazione dell'html generato, rispetto a path
template: './src/template/index.html', //percorso del template html
inject: 'body', //posizione dell'inserimento js, true/'head'/'body'/false
hash: true, //generare valori hash per le risorse statiche
chunks: ['commons', 'index'],//chunk da includere, senza configurazione verranno inclusi tutti i risorse delle pagine
minify: { //compressione dei file HTML
removeComments: true, //rimuovere i commenti HTML
collapseWhitespace: false //rimuovere i caratteri di spazio e le virgole di ritorno
{}
}),
new HtmlWebpackPlugin({ //inserire css/js ecc. basati sul template per generare l'html finale
favicon: './src/favicon.ico', // percorso favicon, introdotto tramite webpack e può generare un hash
filename: '../../views/page1.html', //percorso di archiviazione dell'html generato, rispetto a path
template: './src/template/page1.html', //percorso del template html
inject: true, //posizione dell'inserimento js, true/'head'/'body'/false
hash: true, //generare valori hash per le risorse statiche
chunks: ['commons', 'list'],//chunk da includere, senza configurazione verranno inclusi tutti i risorse delle pagine
minify: { //compressione dei file HTML
removeComments: true, //rimuovere i commenti HTML
collapseWhitespace: false //rimuovere i caratteri di spazio e le virgole di ritorno
{}
})
// new webpack.HotModuleReplacementPlugin() //caricamento rapido
],
// utilizzare webpack-dev-server per migliorare l'efficienza di sviluppo
// devServer: {
// contentBase: './',
// host: 'localhost',
// port: 9090, //predefinito 8080
// inline: true, //può monitorare le variazioni di js
// hot: true, // avvio in modalità calda
// }
};
Bene, dopo aver completato queste configurazioni, esegui il comando webpack per confezionare il progetto.
Hash: e6219853995506fd132a
Versione: webpack 1.14.0
Tempo: 1338ms
Asset Size Chunks Chunk Names
js/index.js 457 bytes 0 [emesso] index
js/page1.js 392 bytes 1 [emesso] page1
js/commons.js 306 kB 2 [emesso] commons
css/index.css 62 bytes 0 [emesso] index
css/page1.css 62 bytes 1 [emesso] page1
css/commons.css 803 bytes 2 [emesso] commons
favicon.ico 1.15 kB [emesso]
../../view/index.html 496 bytes [emesso]
../../view/page1.html 499 bytes [emesso]
[0] ./src/js/page/index.js 170 bytes {0} [compilato]
[0] ./src/js/page/page1.js 106 bytes {1} [compilato]
+ 7 moduli nascosti
Child html-webpack-plugin per "../../view/page1.html":
+ 1 modulo nascosto
Child html-webpack-plugin per "../../view/index.html":
+ 1 modulo nascosto
Child extract-text-webpack-plugin:
+ 2 moduli nascosti
Child extract-text-webpack-plugin:
+ 2 moduli nascosti
Child extract-text-webpack-plugin:
+ 2 moduli nascosti
Al momento, vai alla directory views per vedere il file generato index.html, come segue:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pagina iniziale</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>
Come si può vedere, i file generati conservano il contenuto del template originale e, in base alla definizione del file entry index.js, aggiungono automaticamente i file CSS e JS richiesti, nonché il favicon, e aggiungono anche il relativo hash.
Due problemi
var path = require('path');
var webpack = require('webpack');
var glob = require('glob');
/*
L'estensione extract-text-webpack-plugin
Con essa puoi estrarre i tuoi stili in file css separati.
Non devi più preoccuparti che i stili vengano compressi nei file js.
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
L'estensione html-webpack-plugin è fondamentale, un'estensione di webpack per generare HTML
Puoi consultare qui: https://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
/**
* Estrae i moduli comuni, generando un chunk chiamato `commons`
*/
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
// Compressione
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
// Verifica del modalità di sviluppo
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); // Directory del file
extname = path.extname(entry); // Estensione del file
basename = path.basename(entry, extname); // Nome del file
pathname = path.join(dirname, basename);
pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;
entries[pathname] = ['./' + entry]; // In questo modo si scrive su sistema osx, su win7 entries[basename]
{}
console.log(entries);
return entries;
{}
// ingressi (ottenuti tramite il metodo getEntry)
var entries = getEntry('src/js/page/**/*.js', 'src/js/page/');
// extract common parts of which modules from entries obtain file names
var chunks = Object.keys(entries);
// template pages (all template pages obtained through the getEntry method)
var pages = Object.keys(getEntry('src/template/**/*.html', 'src/template/'));
console.log(pages)
var config = {
entry: entries,
output: {
path: path.join(__dirname, './public/dist/'),// configuration for output directory, path configuration for templates, styles, scripts, images, etc. are relative to it
publicPath: '/dist/', // path on the server for templates, styles, scripts, images, etc.
filename: 'js/[name].js', // generation configuration for the main js of each page
chunkFilename: 'js/[id].chunk.js?[chunkhash]' // configuration for chunk generation
},
module: {
loaders: [ // loaders
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css')
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract('css!less')
}, {
test: /\.html$/,
loader: "html?-minimize" // avoid compression of 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({ // carica jq
$: 'jquery'
}),
new CommonsChunkPlugin({
name: 'commons', // estrai i moduli comuni e genera un chunk chiamato `commons`
chunks: chunks,
minChunks: chunks.length // estrai tutti i moduli comuni agli entry
}),
new ExtractTextPlugin('css/[name].css'), // utilizza il tag link per caricare il css e imposta il percorso, rispetto a publickPath della configurazione di output
debug ? function() {} : new UglifyJsPlugin({ // compressa il codice
compress: {
warnings: false
},
except: ['$super', '$', 'exports', 'require'] // escludi parole chiave
}),
])
};
pages.forEach(function(pathname) {
var conf = {
filename: '../../views/' + pathname + '.html', // percorso di archiviazione dell'html generato, rispetto a path
template: 'src/template/' + pathname + '.html', // percorso del template html
inject: false, // posizione di inserimento del js, true/'head'/'body'/false
/*
* Per quanto riguarda la compressione, la chiamata a html-minify può causare problemi di verifica della sintassi HTML durante la compressione,
* Se si utilizzano espressioni {{...}} sugli attributi del tag HTML, quindi in molti casi non è necessario configurare l'opzione di compressione qui.
* Inoltre, UglifyJsPlugin compresserà anche l'HTML durante la compressione del codice.
* Per evitare la compressione dell'HTML, è necessario configurare 'html?-minimize' su html-loader, vedi la configurazione di html-loader nei loaders.
*/
// minify: { // compressa il file HTML
// removeComments: true, // rimuovi i commenti HTML
// collapseWhitespace: false // rimuovi spazi bianchi e newline
// }
};
if (pathname in config.entry) {
favicon: './src/favicon.ico', // percorso favicon, introdotto tramite webpack e può generare un hash
conf.inject = 'body';
conf.chunks = ['commons', pathname];
conf.hash = true;
{}
config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;
Il codice seguente è simile a quello sopra, la differenza fondamentale è che mettendo tutti i file relativi in un oggetto attraverso un metodo, si completa l'effetto di introduzione automatica!
I seguenti sono le configurazioni per il sistema operativo mac osx, la percorso win7 potrebbe essere diverso
glob: qui viene fuori diverso:
Ma richiede
entries:
{
index: ['./src/template/index.js'],
page1: ['./src/template/page1.js']
{}
pages:
['index', 'page1']
Deve essere modificato in base alla configurazione del tuo computer personale
Questo è tutto il contenuto dell'articolo, speriamo che sia utile per il tuo studio e che tu sostenga fortemente il Corso URL.
Dichiarazione: il contenuto di questo articolo è stato preso da Internet, è di proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non possiede il diritto di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.