English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Nachdem ich leistungsfähige webpack-Tutorials gelernt habe, denke ich, dass es speziell für Single-Page-Anwendungen entwickelt wurde, wie z.B. webpack+react, webpack+vue usw., können alle Arten von Abhängigkeiten für die Ressourcen laden und packen lösen. Sogar css wird in js gepackt und dynamisch in das DOM-Dokument hinzugefügt.
Wenn wir eine mehrseitige einfache Web-Website haben möchten, css getrennt, js muss modulart geladen werden?
Projektadresse：webpackDemo_jb51.rar
Projekt initialisieren, Abhängigkeiten installieren
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"
}
Verzeichnisstruktur (ich verwende das express-Framework, andere nach persönlicher Bedarf)
- webpackDemo
- src #Quellcode-Entwicklungsverzeichnis
- css #css-Verzeichnis, organisiert nach Seite (Modul), allgemeine und Drittanbieter-Ebene
+ page
+ common
+ lib
- js #JS-Skripte, organisiert nach page, components
+ page
+ components
+ template #HTML-Vorlagen
- node_modules #verwendete nodejs-Module
- public #express-statische Ressourcen dateien
- dist #Verzeichnis, in das webpack-kompiliert und gepackt wird, muss nicht manuell erstellt werden, kann von webpack automatisch basierend auf der Konfiguration generiert werden
+ css
+ js
+ img #Bilddateien
+ view #express-statische Ressourcen dateien (webpack-kompiliert und gepackt, um den Ordner view auszugeben)
package.json #Projekt-Konfiguration
webpack.config.js #webpack-Konfiguration
Entwicklung der Seite
在src/js/page目录下建立index.js文件，在src/view目录下建立index.html文件。入口js和模板文件名对应。
index.html 内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Startseite</title>
<!--
描述：head中无需再引入css以及facicon，webpack将根据入口JS文件的要求自动实现按需加载或者生成style标签
-->
</head>
<body>
<!--
描述：body中同样无需单独引入JS文件，webpack会根据入口JS文件自动实现按需加载或者生成script标签，还可以生成对应的hash值
-->
</body>
</html>
就是这样一个简单的HTML模板，不要引入任何CSS和JS，通过webpack打包就可以自动帮我们引入。
index.js内容如下：
//引入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:
//引入css
require("../../css/lib/base.css");
require("../../css/page/page1.less");
$('body').html('page1');
webpack配置（我用的express框架，其他的根据个人需求）
var path = require('path');
var webpack = require('webpack');
/*
extract-text-webpack-plugin-plugin
Mit diesem Tool können Sie Ihre Styles in separate CSS-Dateien extrahieren.
Mama braucht sich keine Sorgen mehr zu machen, dass Styles in JS-Dateien gepackt werden.
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin-Plugin, von entscheidender Bedeutung, ein Plugin zur Generierung von HTML in webpack
Konkret können Sie hier nachschlagen https://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: { //配置入口文件，有几个写几个
index: './src/js/page/index.js',
page1: './src/js/page/page1.js'
},
output: {
path: path.join(__dirname, './public/dist/'), //Konfiguration der Ausgabedateien, Pfade für Ressourcen wie Templates, Stylesheets, Skripte und Bilder sind relativ dazu
publicPath: '/dist/', //Pfade auf dem Server für Ressourcen wie Templates, Stylesheets, Skripte und Bilder
filename: 'js/[name].js', //Konfiguration für die Generierung der Haupt-JavaScript-Datei jeder Seite
chunkFilename: 'js/[id].chunk.js' //Konfiguration für die Chunk-Generierung
},
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引用的资源
//Zum Beispiel, wenn Sie konfigurieren, attrs=img:src img:data-src kann gleichzeitig data behandeln-Quellen, die durch src referenziert werden, können wie folgt behandelt werden
test: /.html$/,
loader: "html?attrs=img:src img:data-src"
//Datei-Loader, um statische Ressourcen zu behandeln
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]
//Bilder-Loader, ähnlich file-Loader, besser für Bilder, können kleinere Bilder in Base umwandeln64，Verringern Sie die HTTP-Anfragen
//Wie folgender Konfiguration, kleiner als8192Byte-Bilder in Base umwandeln64Code
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
}
]),
},
plugins: [
new webpack.ProvidePlugin({ //Laden Sie jq
$: 'jquery'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'commons', // Extrahieren Sie die gemeinsamen Module und erzeugen Sie ein Chunk namens `commons`
chunks: ['index','page1], //Extrahieren Sie die gemeinsamen Teile der Module
minChunks: 2 // Extrahieren mindestens2Gemeinsame Teile eines Moduls
}),
new ExtractTextPlugin('css/[name].css'), //Verwenden Sie den Link-Tag单独 um CSS zu laden und den Pfad zu setzen, relativ zu der publickPath-Konfiguration im Output
//HtmlWebpackPlugin, Konfigurationen zur Generierung von Mustern, jede für eine Seite, wie viele, wie viele schreiben
new HtmlWebpackPlugin({ //Fügen Sie css basierend auf dem Muster ein/js und andere erzeugen das endgültige HTML
favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
filename: '../../views/index.html', //Pfad, wo das generierte HTML gespeichert wird, relativ zu path
template: '.',/src/template/index.html', //Pfad der HTML-Vorlage
inject: 'body', //Position der JS-Einbindung, true/'head'/'body'/false
hash: true, //Erstellen Sie Hash-Werte für statische Ressourcen
chunks: ['commons', 'index'],//Benötigte chunks, nicht konfiguriert, wird alle Ressourcen der Seite eingeführt
minify: { //Komprimieren Sie die HTML-Datei
removeComments: true, //Entfernen Sie die Kommentare aus dem HTML
collapseWhitespace: false //删除空白符与换行符
}
}),
new HtmlWebpackPlugin({ //Fügen Sie css basierend auf dem Muster ein/js und andere erzeugen das endgültige HTML
favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
filename: '../../views/page1.html', //Pfad, wo das generierte HTML gespeichert wird, relativ zu path
template: '.',/src/template/page1.html', //Pfad der HTML-Vorlage
inject: true, //Position der JS-Einbindung, true/'head'/'body'/false
hash: true, //Erstellen Sie Hash-Werte für statische Ressourcen
chunks: ['commons', 'list'],//Benötigte chunks, nicht konfiguriert, wird alle Ressourcen der Seite eingeführt
minify: { //Komprimieren Sie die HTML-Datei
removeComments: true, //Entfernen Sie die Kommentare aus dem HTML
collapseWhitespace: false //删除空白符与换行符
}
}
// new webpack.HotModuleReplacementPlugin(), //Hot-Loading
],
//Verwenden Sie webpack-dev-Server, um die Entwicklungsleistung zu verbessern
// devServer: {
// ContentBase: '.',/',
// Host: 'localhost',
// Port: 9090, //Standard8080
// inline: true, //Kann Änderungen an js überwachen
// hot: true, //Hot-Start
// }
};
Gut, nach der Durchführung der obigen Konfigurationen, führen Sie den webpack-Packbegriff aus, um das Projekt zu packen.
Hash: e6219853995506fd132a
Version: webpack 1.14.0
Zeit: 1338ms
Asset Size Chunks Chunk Names
js/index.js 457 Bytes 0 [emittiert] index
js/page1.js 392 Bytes 1 [emittiert] Seite1
js/commons.js 306 kB 2 [emittiert] commons
css/index.css 62 Bytes 0 [emittiert] index
css/page1.css 62 Bytes 1 [emittiert] Seite1
css/commons.css 803 Bytes 2 [emittiert] commons
favicon.ico 1.15 kB [emittiert]
../../View/index.html 496 Bytes [emittiert]
../../View/page1.html 499 Bytes [emittiert]
[0] ./src/js/page/index.js 170 Bytes {0} [gebaut]
[0] ./src/js/page/page1.js 106 Bytes {1} [gebaut]
+ 7 versteckte Module
Kind html-webpack-Plugin für "../../View/page1.html":
+ 1 versteckte Module
Kind html-webpack-Plugin für "../../View/index.html":
+ 1 versteckte Module
Kind extract-text-webpack-Plugin:
+ 2 versteckte Module
Kind extract-text-webpack-Plugin:
+ 2 versteckte Module
Kind extract-text-webpack-Plugin:
+ 2 versteckte Module
Gehen Sie zu diesem Zeitpunkt in das Verzeichnis 'views' und überprüfen Sie die generierte Datei 'index.html', wie folgt:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Startseite</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>
Es kann seen, dass die generierten Dateien neben dem Inhalt des ursprünglichen Templates auch automatisch die zu importierenden CSS- und JS-Dateien, sowie den Favicon hinzufügen, sowie die entsprechenden Hash-Werte hinzufügen.
Zwei Fragen
var path = require('path');
var webpack = require('webpack');
var glob = require('glob');
/*
extract-text-webpack-plugin-plugin
Mit diesem Tool können Sie Ihre Styles in separate CSS-Dateien extrahieren.
Mama braucht sich keine Sorgen mehr zu machen, dass Styles in JS-Dateien gepackt werden.
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin-Plugin, von entscheidender Bedeutung, ein Plugin zur Generierung von HTML in webpack
Konkret können Sie hier nachschlagen https://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
/**
*Extrahieren Sie die gemeinsamen Module und erzeugen Sie ein Chunk namens `commons`
*/
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
//Komprimieren
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
//Entwicklungsmodus überprüfen
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); //Dateiverzeichnis
extname = path.extname(entry); //Dateiendung
basename = path.basename(entry, extname); //Dateiname
pathname = path.join(dirname, basename);
pathname = pathDir ? pathname.replace(new RegExp('^', + pathDir, '') : pathname;
entries[pathname] = ['./' + entry]; //So schreiben Sie es unter macOS, win7 entries[basename]
}
console.log(entries);
return entries;
}
//Eingang (durch das getEntry-Verfahren alle Seiteingangsdateien erhalten)
var entries = getEntry('src/js/page/**/*.js', 'src/js/page/');
//Extrahieren Sie die gemeinsamen Teile einiger Module aus entries, um Dateinamen zu erhalten
var chunks = Object.keys(entries);
//Template-Seiten (durch das getEntry-Verfahren alle Template-Seiten erhalten)
var pages = Object.keys(getEntry('src/template/**/*.html', 'src/template/'));
console.log(pages)
var config = {
entry: entries,
output: {
path: path.join(__dirname, './public/dist/'),//Konfiguration der Ausgabedateien, Pfade für Ressourcen wie Templates, Stylesheets, Skripte und Bilder sind relativ dazu
publicPath: '/dist/', //Pfade auf dem Server für Ressourcen wie Templates, Stylesheets, Skripte und Bilder
filename: 'js/[name].js', //Konfiguration für die Generierung der Haupt-JavaScript-Datei jeder Seite
chunkFilename: 'js/[id].chunk.js?[chunkhash]' //Konfiguration für die Chunk-Generierung
},
module: {
loaders: [ //Lader
{
test: /.css$/,
loader: ExtractTextPlugin.extract('style', 'css')
test: /.less$/,
loader: ExtractTextPlugin.extract('css!less')
test: /.html$/,
loader: "html?-vermindern" //vermeiden Sie die Komprimierung von 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({ //Laden Sie jq
$: 'jquery'
}),
new CommonsChunkPlugin({
name: 'commons', // Extrahieren Sie die gemeinsamen Module und erzeugen Sie ein Chunk namens `commons`
chunks: chunks,
minChunks: chunks.length // Extrahieren Sie alle Module, die von allen Entries gemeinsam abhängen
}),
new ExtractTextPlugin('css/[name].css'), //Verwenden Sie den Link-Tag单独 um CSS zu laden und den Pfad zu setzen, relativ zu der publickPath-Konfiguration im Output
debug ? function() {} : new UglifyJsPlugin({ //Komprimieren Sie den Code
compress: {
warnings: false
},
except: ['$super', '$', 'exports', 'require'] //Ausschlusswörter
}),
]),
};
pages.forEach(function(pathname) {
var conf = {
filename: '../../views/' + pathname + '.html', //Pfad, wo das generierte HTML gespeichert wird, relativ zu path
template: 'src/template/' + pathname + '.html', //Pfad der HTML-Vorlage
inject: false, //Position der JS-Einbindung, true/'head'/'body'/false
/*
* Für die Komprimierung wurde html aufgerufen-minify, kann viele HTML-Syntaxprüfungsprobleme während der Komprimierung verursachen
* Wenn Sie Ausdrücke wie {{...}} in den HTML-Attributen verwenden, ist daher in vielen Fällen keine Konfiguration für die Komprimierung erforderlich
* Außerdem komprimiert UglifyJsPlugin beim Komprimieren des Codes gleichzeitig HTML.
* Um die Komprimierung von HTML zu vermeiden, müssen Sie in html-Konfiguration auf dem Loader 'html?-minimize' im Abschnitt loaders unter html-Konfiguration des Loaders.
*/
// minify: { //Komprimieren Sie die HTML-Datei
// removeComments: true, //Entfernen Sie die Kommentare aus dem HTML
// collapseWhitespace: false //删除空白符与换行符
// }
};
if (pathname in config.entry) {
favicon: './src/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
conf.inject = 'body';
conf.chunks = ['commons', pathname];
conf.hash = true;
}
config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;
下面的代码和上面的差不多，本质上的区别就是把通过一个方法把所有的相关的文件放到一个对象里这样就完成了自动引入的效果了！
以上均为在mac osx系统的配置，win7路径可能会有不同
glob: 这边解析出来的不一样：
但要求最终
entries:
{
index: [ './src/template/index.js' ],
page1: [ './src/template/page1.js' ]
}
pages:
[ 'index', 'page1']
要根据个人电脑的配置相应的更改
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发邮件时，请将#更换为@进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。）