So konfigurieren und erstellen Sie die Umgebung für Webpack + ES6
Dieses Mal zeige ich Ihnen, wie Sie die Umgebung für Webpack + ES6 konfigurieren und erstellen. Was sind die Vorsichtsmaßnahmen für die Konfiguration und den Aufbau der Umgebung für Webpack + ES6? Schauen Sie mal rein.
1. Laden Sie node.js und npm herunter2 die Bildquelle mit dem Taobao-Bild2. Erstellen Sie das Verzeichnis und installieren Sie das Webpack Erstellen Sie das Projekt
im Befehlszeile Geben Sie npm init -y
Webpack installieren
Webpack global installieren, geben Sienpm install webpack -g npm install webpack-cli -g
In webpack4 sind Webpack und webpack-cli getrennt, daher müssen sie separat installiert werden
Installieren Sie ein Webpack im aktuellen Verzeichnis
Geben Sie
npm installwebpack-cli--save-dev npm installwebpack--save-dev
Was ist eine globale Installation?
Der Parameter -g bedeutet Installation in der globalen Umgebung. Das Paket wird im Ordner „node_modules“ im Node-Installationsverzeichnis installiert, normalerweise unter dem Benutzernamen „AppDataRoaming“. Sie können npm root – gView verwenden globales Installationsverzeichnis.
Nach der globalen Installation kann es über die Befehlszeile (Befehlszeile) verwendet werden. Benutzer können die dadurch unterstützten Komponenten direkt ausführen Geben Sie wie unten gezeigt die Befehlszeile ein, um die cmd-Datei nach der globalen Installation von cnpm zu öffnen. 
Was ist die lokale Installation? Geben Sie den Befehl ein: npm install eslint oder npm install eslint --save -dev usw. Der Parameter --save-dev bedeutet, dass Sie Ihre Installationspaketinformationen in das Feld devDependencies der Datei package.json schreiben. Das Paket wird in den node_modules installiert Ordner im Stammverzeichnis, in dem wir den Befehl ausführen. Nach der lokalen Installation können Sie die Module über require() direkt in das Verzeichnis node_modules des Projekts einführen. Wie im folgenden Beispiel gezeigt, können Sie nach der lokalen Installation direkt require('webpack') in gulpfile.js eingeben. Wie unten gezeigt
Wenn wir es verwenden, wird die lokale Installation empfohlen. Durch die lokale Installation kann jedes Projekt ein unabhängiges Paket haben, das nicht vom globalen Paket betroffen ist und ist praktisch für das Projekt. Verschieben, Kopieren, Verpacken usw., um die gegenseitige Abhängigkeit zwischen verschiedenen Versionen von Paketen sicherzustellen. Die Nachteile bestehen darin, dass die Installation lange dauert und viel Speicher beansprucht. Da die Festplatten heutzutage jedoch immer größer werden, können die Nachteile ignoriert werden.
Webpack verwenden
1 Wir erstellen einen Ordner src im Verzeichnis, um die Quelldateien zu speichern
2. Erstellen Sie einen Ordner build, um die Zusammenstellung zu speichern Datei3. Erstellen Sie eine neue index.html-Datei4. Erstellen Sie die Konfigurationsdatei webpack.config.js
Erstellen Sie index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hi webpack4!</title> </head> <body> <script src = "../build/bundle.js"></script> </body> </html>
document.write("Hi webpack4 + ES6!");
Konfigurieren Sie webpack.config.jsvar path = require('path');
var appPath = path.resolve(dirname, './src/Main.js');
var buildPath = path.resolve(dirname, './build');
module.exports = {
entry: appPath,//整个页面的入口文件
output: {
path: buildPath,//打包输出的地址
filename: "bundle.js",//输出的文件名称
},
module: {
}
}Geben Sie
webpack --mode developmentbundle.js
ein Befehlszeile
webpack --mode development
bundle.js
Webpack 4 führt Produktions- und Entwicklungsmodi ein, die realisiert werden können verschiedene Optimierungen. Einschließlich Reduzierung, Skalierung, Tree-Shaking usw. ist der Entwicklungsmodus auf Geschwindigkeit optimiert, bietet jedoch nur nicht minimierte Bundles
//Main.js
import {Dog} from "./Dog";
class Main {
constructor() {
document.write("Hi webpack4 + ES6!");
console.info("Hi webpack4 + ES6");
let dog = new Dog();
}
}
new Main();
Kompiliertes Bundle. js
打开index.html
webpack-v4.10.2会识别es6语法并编译
我们也可以使用babel来对ES6进行编译
输入 npm install babel-loader --save-dev
修改配置项webpack.config.js
var path = require('path');
var appPath = path.resolve(dirname, './src/Main.js');
var buildPath = path.resolve(dirname, './build');
module.exports = {
entry: appPath,//整个页面的入口文件
output: {
path: buildPath,//打包输出的地址
filename: "bundle.js",//输出的文件名称
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader?presets=es2015'
}
]
}
}两者的编译结果存在部分差异，并不影响正确性。
三，webpack加载资源文件根据模版文件生成访问入口
我们在部署项目时，部署的是build中的文件，并不会将我们src/index.html作为访问的入口，因此，我们需要将index.html移动到build下，但是简单的复制过去是不行的，由于文件目录的不同，如果使用了相对路径，那么就会找不到文件。这时候我们就可以用到webpack的插件 html-webpack-plugin，它可以将我们src/index.html作为模版，生成一份新的index.html在build下。
具体的用法请查看https://github.com/jantimon/html-webpack-plugin#third-party-addons
在本例只是简单使用。
执行
npm i --save-dev html-webpack-plugin
之前我们是将index.html中的js入口指定为build/bundle.js,使用这个插件后，我们设置它直接指向Main.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hi webpack4!</title> </head> <body> <script src = "Main.js"></script> </body> </html>
/* webpack.config.js */
var path = require('path');
var appPath = path.resolve(dirname, './src/Main.js');
var buildPath = path.resolve(dirname, './build');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: appPath,//整个页面的入口文件
output: {
path: buildPath,//打包输出的地址
filename: "bundle.js",//输出的文件名称
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader?presets=es2015'
}
]
},
plugins: [
new HtmlWebpackPlugin({
/*
template 参数指定入口 html 文件路径，插件会把这个文件交给 webpack 去编译，
webpack 按照正常流程，找到 loaders 中 test 条件匹配的 loader 来编译，那么这里 html-loader 就是匹配的 loader
html-loader 编译后产生的字符串，会由 html-webpack-plugin 储存为 html 文件到输出目录，默认文件名为 index.html
可以通过 filename 参数指定输出的文件名
html-webpack-plugin 也可以不指定 template 参数，它会使用默认的 html 模板。
*/
template: './src/index.html',
/*
因为和 webpack 4 的兼容性问题，chunksSortMode 参数需要设置为 none
https://github.com/jantimon/html-webpack-plugin/issues/870
*/
chunksSortMode: 'none'
}),
]
}输入指令打包我们会发现，build下的index.html已经生成,并且指向了编译的后js
使用webpack打包图片和文件
我们新增资源文件夹asset 并添加一张图片
import {Dog} from "./Dog";
class Main {
constructor() {
document.write("Hi webpack4 + ES6!");
console.info("Hi webpack4 + ES6");
let dog = new Dog();
document.write("![](\"./asset/atlas.png\"/)
");
}
}
new Main();并将图片展示到页面
图裂了，找不到资源，大家应该都猜到了，应为在编译时，直接将 添加到了build/index.html，build下并没有asset包，所以找不到资源。难道我们需要在build下在建立一个资源文件夹吗？答案是不用，webpack可以对图片的路径进行转换和图片打包。
输入指令
npm install url-loader --save-dev npm install file-loader --save-dev
/*webpack.config.js*/
var path = require('path');
var appPath = path.resolve(dirname, './src/Main.js');
var buildPath = path.resolve(dirname, './build');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: appPath,//整个页面的入口文件
output: {
path: buildPath,//打包输出的地址
filename: "bundle.js",//输出的文件名称
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader?presets=es2015'
} ,
{
//url-loader的主要功能是：将源文件转换成DataUrl(声明文件mimetype的base64编码)
//小于limit字节，以 base64 的方式引用，大于limit就交给file-loader处理了
//file-loader的主要功能是：把源文件迁移到指定的目录（可以简单理解为从源文件目录迁移到build目录
test: /\.(jpg|png|gif)$/,
loader: 'url-loader?limit=8192&name=asset/[hash:8].[name].[ext]'
}
]
},
plugins: [
new HtmlWebpackPlugin({
/*
template 参数指定入口 html 文件路径，插件会把这个文件交给 webpack 去编译，
webpack 按照正常流程，找到 loaders 中 test 条件匹配的 loader 来编译，那么这里 html-loader 就是匹配的 loader
html-loader 编译后产生的字符串，会由 html-webpack-plugin 储存为 html 文件到输出目录，默认文件名为 index.html
可以通过 filename 参数指定输出的文件名
html-webpack-plugin 也可以不指定 template 参数，它会使用默认的 html 模板。
*/
template: './src/index.html',
/*
因为和 webpack 4 的兼容性问题，chunksSortMode 参数需要设置为 none
https://github.com/jantimon/html-webpack-plugin/issues/870
*/
chunksSortMode: 'none'
}),
]
}编译后的目录如下(新增一张较大的图片book用于展示file-loader)
页面效果如下，图是随便找的，见谅。
注意:当我们引入一些资源需要使用变量引用时，像这样引用的话是会编译失败的
图片并没有像上图一样打包到asset中
当我们在require一个模块的时候，如果在require中包含变量，像这样：
require("./asset/" + name + ".png");那么在编译的时候我们是不能知道具体的模块的。但这个时候，webpack也会为我们做些分析工作：
1.分析目录：'./asset'；
2.提取正则表达式：'/^.*\.png$/'；
于是这个时候为了更好地配合wenpack进行编译，我们应该给它指明路径
使用webpack打包css文件
就像图片一样，webpack也提供了样式文件的打包，
npm install style-loader --save-dev npm install css-loader --save-dev
//rules中添加
{
//css-loader使能够使用类似@import和url（...）的方法实现require,style-loader将所有的计算后的样式加入页面中
//webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签。因此应该把style-loader放在css-loader的前面
test: /\.css$/,
use: ['style-loader', 'css-loader']
}添加main.css文件，
span{color:red;}
目录如下
四，搭建webpack微服务器
在开发过程中，我们不可能修改一次，打包一次。因此我们需要使用到webpack提供的服务器。
cnpm install webpack-dev-server --save-dev
为了方便我们在pack.json中配置脚本。
"start":"webpack-dev-server--modedevelopment", "dev":"webpack--modedevelopment", "build":"webpack--modeproduction"
npm run start
启动成功后访问服务地址，就可以实现修改代码之后，页面实时刷新。
启动时使用的是默认配置。
当我们需要个性化设置时，在webpack.config.js中添加设置即可
//以下是服务环境配置
devServer:{
port:8085,//端口
host:'localhost',//地址
inline:true,//用来支持dev-server自动刷新
open:true,//开启webpack-dev-server时自动打开页面
historyApiFallback:true,
contentBase:path.resolve(dirname),//用来指定index.html所在目录
publicPath:'/build/',//用来指定编译后的bundle.js的目录
openPage:"build/index.html"//指定打开的页面
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Das obige ist der detaillierte Inhalt vonSo konfigurieren und erstellen Sie die Umgebung für Webpack + ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Die Windows-Wiederherstellungsumgebung kann nicht gestartet werden
Feb 19, 2024 pm 11:12 PM
Windows Recovery Environment (WinRE) ist eine Umgebung zur Reparatur von Windows-Betriebssystemfehlern. Nach dem Aufrufen von WinRE können Sie eine Systemwiederherstellung, einen Werksreset, die Deinstallation von Updates usw. durchführen. Wenn Sie WinRE nicht starten können, führt Sie dieser Artikel durch Korrekturen zur Behebung des Problems. Die Windows-Wiederherstellungsumgebung kann nicht gestartet werden. Wenn Sie die Windows-Wiederherstellungsumgebung nicht starten können, verwenden Sie die unten bereitgestellten Korrekturen: Überprüfen Sie den Status der Windows-Wiederherstellungsumgebung. Verwenden Sie andere Methoden, um die Windows-Wiederherstellungsumgebung aufzurufen. Haben Sie versehentlich die Windows-Wiederherstellungspartition gelöscht? Führen Sie unten ein direktes Upgrade oder eine Neuinstallation von Windows durch. Wir haben alle diese Korrekturen ausführlich erläutert. 1] WLAN prüfen
Was sind die Unterschiede zwischen Python und Anaconda?
Sep 06, 2023 pm 08:37 PM
In diesem Artikel lernen wir die Unterschiede zwischen Python und Anaconda kennen. Was ist Python? Python ist eine Open-Source-Sprache, die großen Wert darauf legt, den Code durch Einrücken von Zeilen und Leerzeichen leicht lesbar und verständlich zu machen. Aufgrund seiner Flexibilität und Benutzerfreundlichkeit eignet sich Python ideal für eine Vielzahl von Anwendungen, darunter unter anderem wissenschaftliches Rechnen, künstliche Intelligenz und Datenwissenschaft sowie die Erstellung und Entwicklung von Online-Anwendungen. Wenn Python getestet wird, wird es sofort in Maschinensprache übersetzt, da es sich um eine interpretierte Sprache handelt. Einige Sprachen, wie zum Beispiel C++, erfordern eine Kompilierung, um verstanden zu werden. Kenntnisse in Python sind ein großer Vorteil, da es sehr einfach zu verstehen, zu entwickeln, auszuführen und zu lesen ist. Das macht Python
Verwendung von Jetty7 für die Webserververarbeitung in der Java-API-Entwicklung
Jun 18, 2023 am 10:42 AM
Verwendung von Jetty7 für die Webserververarbeitung in der JavaAPI-Entwicklung Mit der Entwicklung des Internets ist der Webserver zum Kernbestandteil der Anwendungsentwicklung geworden und steht auch im Fokus vieler Unternehmen. Um den wachsenden Geschäftsanforderungen gerecht zu werden, entscheiden sich viele Entwickler für die Verwendung von Jetty für die Webserverentwicklung, und seine Flexibilität und Skalierbarkeit sind weithin anerkannt. In diesem Artikel wird erläutert, wie Sie Jetty7 für die Webentwicklung in der JavaAPI-Entwicklung verwenden.
So implementieren Sie die Formularvalidierung für Webanwendungen mit Golang
Jun 24, 2023 am 09:08 AM
Die Formularvalidierung ist ein sehr wichtiger Link bei der Entwicklung von Webanwendungen. Sie kann die Gültigkeit der Daten vor dem Absenden der Formulardaten überprüfen, um Sicherheitslücken und Datenfehler in der Anwendung zu vermeiden. Die Formularvalidierung für Webanwendungen kann einfach mit Golang implementiert werden. In diesem Artikel wird erläutert, wie Sie mit Golang die Formularvalidierung für Webanwendungen implementieren. 1. Grundelemente der Formularvalidierung Bevor wir uns mit der Implementierung der Formularvalidierung befassen, müssen wir die Grundelemente der Formularvalidierung kennen. Formularelemente: Formularelemente sind
So aktivieren Sie den administrativen Zugriff über die Cockpit-Web-Benutzeroberfläche
Mar 20, 2024 pm 06:56 PM
Cockpit ist eine webbasierte grafische Oberfläche für Linux-Server. Es soll vor allem neuen/erfahrenen Benutzern die Verwaltung von Linux-Servern erleichtern. In diesem Artikel besprechen wir die Cockpit-Zugriffsmodi und wie Sie den Administratorzugriff von CockpitWebUI auf das Cockpit umstellen. Inhaltsthemen: Cockpit-Eingabemodi Ermitteln des aktuellen Cockpit-Zugriffsmodus Aktivieren des Verwaltungszugriffs für das Cockpit über CockpitWebUI Deaktivieren des Verwaltungszugriffs für das Cockpit über CockpitWebUI Fazit Cockpit-Eingabemodi Das Cockpit verfügt über zwei Zugriffsmodi: Eingeschränkter Zugriff: Dies ist die Standardeinstellung für den Cockpit-Zugriffsmodus. In diesem Zugriffsmodus können Sie vom Cockpit aus nicht auf den Webbenutzer zugreifen
Was sind Webstandards?
Oct 18, 2023 pm 05:24 PM
Webstandards sind eine Reihe von Spezifikationen und Richtlinien, die vom W3C und anderen verwandten Organisationen entwickelt wurden. Sie umfassen die Standardisierung von HTML, CSS, JavaScript, DOM, Web-Zugänglichkeit und Leistungsoptimierung , Wartbarkeit und Leistung. Das Ziel von Webstandards besteht darin, die konsistente Anzeige und Interaktion von Webinhalten auf verschiedenen Plattformen, Browsern und Geräten zu ermöglichen und so ein besseres Benutzererlebnis und eine bessere Entwicklungseffizienz zu gewährleisten.
Ist PHP Front-End oder Back-End in der Webentwicklung?
Mar 24, 2024 pm 02:18 PM
PHP gehört zum Backend in der Webentwicklung. PHP ist eine serverseitige Skriptsprache, die hauptsächlich zur Verarbeitung serverseitiger Logik und zur Generierung dynamischer Webinhalte verwendet wird. Im Vergleich zur Front-End-Technologie wird PHP eher für Back-End-Vorgänge wie die Interaktion mit Datenbanken, die Verarbeitung von Benutzeranfragen und die Generierung von Seiteninhalten verwendet. Anschließend wird anhand konkreter Codebeispiele die Anwendung von PHP in der Backend-Entwicklung veranschaulicht. Schauen wir uns zunächst ein einfaches PHP-Codebeispiel zum Herstellen einer Verbindung zu einer Datenbank und zum Abfragen von Daten an:
Was bedeutet Web?
Jan 09, 2024 pm 04:50 PM
Das Web ist ein globales Weitverkehrsnetz, auch World Wide Web genannt, eine Anwendungsform des Internets. Das Web ist ein auf Hypertext und Hypermedia basierendes Informationssystem, das es Benutzern ermöglicht, durch Hyperlinks zwischen verschiedenen Webseiten zu wechseln und Informationen abzurufen. Die Grundlage des Webs ist das Internet, das einheitliche und standardisierte Protokolle und Sprachen verwendet, um den Datenaustausch und Informationsaustausch zwischen verschiedenen Computern zu ermöglichen.
