So implementieren Sie die Entwicklung mehrseitiger Websites mit Webpack+Express-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

So implementieren Sie die Entwicklung mehrseitiger Websites mit Webpack+Express

亚连

Jun 15, 2018 pm 11:36 PM

express webpack

In diesem Artikel wird hauptsächlich die detaillierte Erklärung der Webpack + Express-Entwicklung mehrseitiger Websites vorgestellt

Nachdem ich das Webpack-Einsteiger-Tutorial gelernt habe, habe ich das Gefühl, dass es möglicherweise maßgeschneidert für einseitige Anwendungen ist, z B. webpack+react, webpack+vue usw., können die Abhängigkeitslade- und Verpackungsprobleme verschiedener Ressourcen lösen. Sogar CSS wird in JS gepackt und dynamisch zum Dom-Dokument hinzugefügt.

Wenn wir also eine gewöhnliche Website mit mehreren Seiten wollen, ist CSS unabhängig und das Laden von JS erfordert Module?

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"
}

Nach dem Login kopieren

Verzeichnisstruktur (ich verwende Express Framework, andere entsprechend (je nach persönlichen Bedürfnissen)

- webpackDemo
  - src        #代码开发目录
    - css      #css目录，按照页面（模块）、通用、第三方三个级别进行组织
      + page
      + common
      + lib
    - js       #JS脚本，按照page、components进行组织
      + page
      + components
    + template      #HTML模板
  - node_modules    #所使用的nodejs模块
  - public            #express静态资源文件
    - dist            #webpack编译打包输出目录，无需建立目录可由webpack根据配置自动生成
      + css        
      + js
    + img      #图片资源
  + view            #express静态资源文件（webpack编译打包输出view目录）
  package.json      #项目配置
  webpack.config.js  #webpack配置

Nach dem Login kopieren

Seite entwickeln

Erstellen Sie die Datei index.js im Verzeichnis src/js/page und die Datei index.html im Verzeichnis src/view Verzeichnis. Der Eintrag js entspricht dem Namen der Vorlagendatei. Der Inhalt von

index.html lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <!--
    描述：head中无需再引入css以及facicon，webpack将根据入口JS文件的要求自动实现按需加载或者生成style标签
  -->
</head>
<body>
  <!--
    描述：body中同样无需单独引入JS文件，webpack会根据入口JS文件自动实现按需加载或者生成script标签，还可以生成对应的hash值
  -->
</body>
</html>

Nach dem Login kopieren

ist eine so einfache HTML-Vorlage. Es kann für uns automatisch durch Webpack-Paketierung eingeführt werden.

index.js Inhalt ist wie folgt:

//引入css
require("../../css/lib/base.css");
require("../../css/page/index.scss");
$(&#39;body&#39;).append(&#39;<p class="text">index</p>&#39;);

Nach dem Login kopieren

page1.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>page1</title>
</head>
<body>
</body>
</html>

Nach dem Login kopieren

page1.js:

//引入css
require("../../css/lib/base.css");
require("../../css/page/page1.less");
$(&#39;body&#39;).html(&#39;page1&#39;);

Nach dem Login kopieren

Webpack-Konfiguration (ich verwende die Express Rahmen, Andere basieren auf persönlichen Bedürfnissen)

var path = require(&#39;path&#39;);
var webpack = require(&#39;webpack&#39;);
/*
extract-text-webpack-plugin插件，
有了它就可以将你的样式提取到单独的css文件里，
妈妈再也不用担心样式会被打包到js文件里了。
 */
var ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);
/*
html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，
具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin
 */
var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);

module.exports = {
  entry: { //配置入口文件，有几个写几个
    index: &#39;./src/js/page/index.js&#39;,
    page1: &#39;./src/js/page/page1.js&#39;
  },
  output: { 
    path: path.join(__dirname, &#39;./public/dist/&#39;), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
    publicPath: &#39;/dist/&#39;,        //模板、样式、脚本、图片等资源对应的server上的路径
    filename: &#39;js/[name].js&#39;,      //每个页面对应的主js的生成配置
    chunkFilename: &#39;js/[id].chunk.js&#39;  //chunk生成的配置
  },
  module: {
    loaders: [ //加载器，关于各个加载器的参数配置，可自行搜索之。
      {
        test: /\.css$/,
        //配置css的抽取器、加载器。&#39;-loader&#39;可以省去
        loader: ExtractTextPlugin.extract(&#39;style-loader&#39;, &#39;css-loader&#39;) 
      }, {
        test: /\.less$/,
        //配置less的抽取器、加载器。中间!有必要解释一下，
        //根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入
        //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
        loader: ExtractTextPlugin.extract(&#39;css!less&#39;)
      }, {
        test: /\.scss$/,
        //配置scss的抽取器、加载器。中间!有必要解释一下，
        //根据从右到左的顺序依次调用scss、css加载器，前一个的输出是后一个的输入
        //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
        loader: ExtractTextPlugin.extract(&#39;css!scss&#39;)
      }, {
        //html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
        //比如你配置，attrs=img:src img:src就可以一并处理src引用的资源了，就像下面这样
        test: /\.html$/,
        loader: "html?attrs=img:src img:src"
      }, {
        //文件加载器，处理文件静态资源
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: &#39;file-loader?name=./fonts/[name].[ext]&#39;
      }, {
        //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
        //如下配置，将小于8192byte的图片转成base64码
        test: /\.(png|jpg|gif)$/,
        loader: &#39;url-loader?limit=8192&name=./img/[hash].[ext]&#39;
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({ //加载jq
      $: &#39;jquery&#39;
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: &#39;commons&#39;, // 将公共模块提取，生成名为`commons`的chunk
      chunks: [&#39;index&#39;,&#39;page1&#39;], //提取哪些模块共有的部分
      minChunks: 2 // 提取至少2个模块共有的部分
    }),
    new ExtractTextPlugin(&#39;css/[name].css&#39;), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
    
    //HtmlWebpackPlugin，模板生成相关的配置，每个对于一个页面的配置，有几个写几个
    new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
      favicon: &#39;./src/favicon.ico&#39;, //favicon路径，通过webpack引入同时可以生成hash值
      filename: &#39;../../views/index.html&#39;, //生成的html存放路径，相对于path
      template: &#39;./src/template/index.html&#39;, //html模板路径
      inject: &#39;body&#39;, //js插入的位置，true/&#39;head&#39;/&#39;body&#39;/false
      hash: true, //为静态资源生成hash值
      chunks: [&#39;commons&#39;, &#39;index&#39;],//需要引入的chunk，不配置就会引入所有页面的资源
      minify: { //压缩HTML文件  
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: false //删除空白符与换行符
      }
    }),
    new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
      favicon: &#39;./src/favicon.ico&#39;, //favicon路径，通过webpack引入同时可以生成hash值
      filename: &#39;../../views/page1.html&#39;, //生成的html存放路径，相对于path
      template: &#39;./src/template/page1.html&#39;, //html模板路径
      inject: true, //js插入的位置，true/&#39;head&#39;/&#39;body&#39;/false
      hash: true, //为静态资源生成hash值
      chunks: [&#39;commons&#39;, &#39;list&#39;],//需要引入的chunk，不配置就会引入所有页面的资源
      minify: { //压缩HTML文件  
        removeComments: true, //移除HTML中的注释
        collapseWhitespace: false //删除空白符与换行符
      }
    })

    // new webpack.HotModuleReplacementPlugin() //热加载
  ],
  //使用webpack-dev-server，提高开发效率
  // devServer: {
  //   contentBase: &#39;./&#39;,
  //   host: &#39;localhost&#39;,
  //   port: 9090, //默认8080
  //   inline: true, //可以监控js变化
  //   hot: true, //热启动
  // }
};

Nach dem Login kopieren

Okay, nachdem Sie die oben genannten Konfigurationen abgeschlossen haben, führen Sie den webpack Verpackungsbefehl aus, um die Projektverpackung abzuschließen.

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] page1
    js/commons.js   306 kB    2 [emitted] commons
    css/index.css  62 bytes    0 [emitted] index
    css/page1.css  62 bytes    1 [emitted] page1
   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 hidden modules
Child html-webpack-plugin for "../../view/page1.html":
    + 1 hidden modules
Child html-webpack-plugin for "../../view/index.html":
    + 1 hidden modules
Child extract-text-webpack-plugin:
    + 2 hidden modules
Child extract-text-webpack-plugin:
    + 2 hidden modules
Child extract-text-webpack-plugin:
    + 2 hidden modules

Nach dem Login kopieren

Gehen Sie an dieser Stelle zum Verzeichnis „views“, um die generierte index.html-Datei wie folgt anzuzeigen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</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>

Nach dem Login kopieren

Sie können sehen, dass zusätzlich zur Beibehaltung des Inhalts in der Originalvorlage Die generierte Datei verwendet auch die Eingabedatei. Die Definition von index.js, das automatische Hinzufügen erfordert die Einführung von CSS- und JS-Dateien sowie Favicon, und der entsprechende Hash-Wert wird ebenfalls hinzugefügt.

Zwei Fragen

Wie erkennt Webpack automatisch die Eintragsdatei und konfiguriert die entsprechende Vorlage
So gehen Sie direkt mit Problemen bei der automatischen Einführung von Stilen und Skripten um

var path = require(&#39;path&#39;);
var webpack = require(&#39;webpack&#39;);
var glob = require(&#39;glob&#39;);
/*
extract-text-webpack-plugin插件，
有了它就可以将你的样式提取到单独的css文件里，
妈妈再也不用担心样式会被打包到js文件里了。
 */
var ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);
/*
html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，
具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin
 */
var HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
/**
 *将公共模块提取，生成名为`commons`的chunk
 */
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
//压缩
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

//判断开发模式
var debug = process.env.NODE_ENV !== &#39;production&#39;;
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);  //文件目录
    extname = path.extname(entry);  //后缀名
    basename = path.basename(entry, extname); //文件名
    pathname = path.join(dirname, basename);
    pathname = pathDir ? pathname.replace(new RegExp(&#39;^&#39; + pathDir), &#39;&#39;) : pathname;
    entries[pathname] = [&#39;./&#39; + entry]; //这是在osx系统下这样写 win7 entries[basename]
  }
  console.log(entries);
  return entries;
}

//入口(通过getEntry方法得到所有的页面入口文件)
var entries = getEntry(&#39;src/js/page/**/*.js&#39;, &#39;src/js/page/&#39;);
//提取哪些模块共有的部分从entries里面获得文件名称
var chunks = Object.keys(entries);
//模板页面(通过getEntry方法得到所有的模板页面)
var pages = Object.keys(getEntry(&#39;src/template/**/*.html&#39;, &#39;src/template/&#39;));

console.log(pages)

var config = {
  entry: entries,
  output: {
    path: path.join(__dirname, &#39;./public/dist/&#39;),//输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
    publicPath: &#39;/dist/&#39;,        //模板、样式、脚本、图片等资源对应的server上的路径
    filename: &#39;js/[name].js&#39;,      //每个页面对应的主js的生成配置
    chunkFilename: &#39;js/[id].chunk.js?[chunkhash]&#39;  //chunk生成的配置
  },
  module: {
    loaders: [ //加载器
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract(&#39;style&#39;, &#39;css&#39;)
      }, {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract(&#39;css!less&#39;)
      }, {
        test: /\.html$/,
        loader: "html?-minimize"  //避免压缩html,https://github.com/webpack/html-loader/issues/50
      }, {
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: &#39;file-loader?name=fonts/[name].[ext]&#39;
      }, {
        test: /\.(png|jpe?g|gif)$/,
        loader: &#39;url-loader?limit=8192&name=imgs/[name]-[hash].[ext]&#39;
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({ //加载jq
      $: &#39;jquery&#39;
    }),
    new CommonsChunkPlugin({
      name: &#39;commons&#39;, // 将公共模块提取，生成名为`commons`的chunk
      chunks: chunks,
      minChunks: chunks.length // 提取所有entry共同依赖的模块
    }),
    new ExtractTextPlugin(&#39;css/[name].css&#39;), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
    debug ? function() {} : new UglifyJsPlugin({ //压缩代码
      compress: {
        warnings: false
      },
      except: [&#39;$super&#39;, &#39;$&#39;, &#39;exports&#39;, &#39;require&#39;] //排除关键字
    }),
  ]
};

pages.forEach(function(pathname) {
  var conf = {
    filename: &#39;../../views/&#39; + pathname + &#39;.html&#39;, //生成的html存放路径，相对于path
    template: &#39;src/template/&#39; + pathname + &#39;.html&#39;, //html模板路径
    inject: false, //js插入的位置，true/&#39;head&#39;/&#39;body&#39;/false
    /*
    * 压缩这块，调用了html-minify，会导致压缩时候的很多html语法检查问题，
    * 如在html标签属性上使用{{...}}表达式，所以很多情况下并不需要在此配置压缩项，
    * 另外，UglifyJsPlugin会在压缩代码的时候连同html一起压缩。
    * 为避免压缩html，需要在html-loader上配置&#39;html?-minimize&#39;，见loaders中html-loader的配置。
     */
    // minify: { //压缩HTML文件
    // removeComments: true, //移除HTML中的注释
    // collapseWhitespace: false //删除空白符与换行符
    // }
  };
  if (pathname in config.entry) {
    favicon: &#39;./src/favicon.ico&#39;, //favicon路径，通过webpack引入同时可以生成hash值
    conf.inject = &#39;body&#39;;
    conf.chunks = [&#39;commons&#39;, pathname];
    conf.hash = true;
  }
  config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;

Nach dem Login kopieren

Der folgende Code ähnelt dem oben genannten. Der wesentliche Unterschied besteht darin, dass alle zugehörigen Dateien über eine Methode in ein Objekt eingefügt werden . Damit ist der Effekt der automatischen Einführung abgeschlossen!

Die oben genannten sind alle Konfigurationen auf einem Mac OSX-System. Der Win7-Pfad kann unterschiedlich sein

entries:
 {
 index: [ &#39;./src/template/index.js&#39; ],
 page1: [ &#39;./src/template/page1.js&#39; ]
 }

pages:
 [ &#39;index&#39;, &#39;page1&#39; ]

Nach dem Login kopieren

Sie müssen es entsprechend der Konfiguration Ihres PCs entsprechend ändern

Der obige Text ist der von mir zusammengestellte Text, ich hoffe, er ist für alle hilfreich

Verwandte Artikel:

So implementieren Sie die Eintritts-/Verlassensanimation in Vue

Detaillierte Interpretation der im Webpack ausgeführten Eintrittsfunktion

Lösung für die Bootstrap-Modal-Box-Übermittlung BUG-Lösung

So implementieren Sie einfache Berechnungen in AngularJS

So installieren Sie Mint-UI in Vue

So implementieren Sie die Anzeige der Sammlungsdatendurchquerung in AngularJS

So integrieren Sie das Karusselldiagramm in mint-ui in vue.js

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Entwicklung mehrseitiger Websites mit Webpack+Express. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

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

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

4 Wochen vor By DDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

4 Wochen vor By DDD

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

Wo ist der Login-Zugang für Gmail-E-Mail?

7651

CakePHP-Tutorial

1392

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT Mini Kreuzworträtsel Antworten

110

Related knowledge

VUE3-Erste-Schritte-Tutorial: Paketieren und Erstellen mit Webpack Jun 15, 2023 pm 06:17 PM

Vue ist ein hervorragendes JavaScript-Framework, das uns dabei helfen kann, schnell interaktive und effiziente Webanwendungen zu erstellen. Vue3 ist die neueste Version von Vue, die viele neue Features und Funktionen einführt. Webpack ist derzeit einer der beliebtesten JavaScript-Modulpaketierer und Build-Tools, der uns bei der Verwaltung verschiedener Ressourcen in unseren Projekten helfen kann. In diesem Artikel wird erläutert, wie Sie Webpack zum Verpacken und Erstellen von Vue3-Anwendungen verwenden. 1. Webpack installieren

So verwenden Sie Express für den Datei-Upload im Knotenprojekt Mar 28, 2023 pm 07:28 PM

Wie gehe ich mit dem Datei-Upload um? Der folgende Artikel stellt Ihnen vor, wie Sie Express zum Hochladen von Dateien im Knotenprojekt verwenden. Ich hoffe, er ist hilfreich für Sie!

Was ist der Unterschied zwischen Vite und Webpack? Jan 11, 2023 pm 02:55 PM

Unterschiede: 1. Die Startgeschwindigkeit des Webpack-Servers ist langsamer als die von Vite. Da Vite beim Start nicht gepackt werden muss, müssen keine Modulabhängigkeiten analysiert und kompiliert werden, sodass die Startgeschwindigkeit sehr hoch ist. 2. Das Hot-Update von Vite ist in Bezug auf HRM schneller. Wenn sich der Inhalt eines bestimmten Moduls ändert, muss der Browser das Modul einfach erneut anfordern. 3. Vite verwendet esbuild, um Abhängigkeiten vorab zu erstellen, während Webpack auf Knoten basiert. 4. Die Ökologie von Vite ist nicht so gut wie die von Webpack und die Loader und Plug-Ins sind nicht umfangreich genug.

Verwendung von PHP und Webpack für die modulare Entwicklung May 11, 2023 pm 03:52 PM

Mit der kontinuierlichen Weiterentwicklung der Webentwicklungstechnologie sind die Front-End- und Back-End-Trennung sowie die modulare Entwicklung zu einem weit verbreiteten Trend geworden. PHP ist eine häufig verwendete Back-End-Sprache. Bei der modularen Entwicklung müssen wir einige Tools verwenden, um Module zu verwalten und zu packen. In diesem Artikel wird die Verwendung von PHP und Webpack für die modulare Entwicklung vorgestellt. 1. Was ist modulare Entwicklung? Unter modularer Entwicklung versteht man die Zerlegung eines Programms in verschiedene unabhängige Module.

Wie konvertiert Webpack das ES6-Modul in das ES5-Modul? Oct 18, 2022 pm 03:48 PM

Konfigurationsmethode: 1. Verwenden Sie die Importmethode, um den ES6-Code in die gepackte JS-Codedatei einzufügen. 2. Verwenden Sie das NPM-Tool, um das Babel-Loader-Tool zu installieren. Die Syntax lautet „npm install -D babel-loader @babel/core“. @babel/preset-env“; 3. Erstellen Sie die Konfigurationsdatei „.babelrc“ des Babel-Tools und legen Sie die Transkodierungsregeln fest; 4. Konfigurieren Sie die Verpackungsregeln in der Datei webpack.config.js.

Vergleichsanalyse von Express und Laravel: Wählen Sie das Framework, das besser zu Ihnen passt Mar 10, 2024 pm 10:15 PM

Express und Laravel sind zwei sehr beliebte Web-Frameworks, die die hervorragenden Frameworks der beiden wichtigsten Entwicklungssprachen JavaScript bzw. PHP darstellen. In diesem Artikel wird eine vergleichende Analyse dieser beiden Frameworks durchgeführt, um Entwicklern bei der Auswahl eines Frameworks zu helfen, das besser zu ihren Projektanforderungen passt. 1. Framework-Einführung Express ist ein Webanwendungs-Framework, das auf der Node.js-Plattform basiert. Es bietet eine Reihe leistungsstarker Funktionen und Tools, mit denen Entwickler schnell leistungsstarke Webanwendungen erstellen können. Äußern

Ausführlicher Vergleich von Express und Laravel: Wie wählt man das beste Framework aus? Mar 09, 2024 pm 01:33 PM

Ausführlicher Vergleich von Express und Laravel: Wie wählt man das beste Framework aus? Bei der Auswahl eines für Ihr Projekt geeigneten Back-End-Frameworks sind Express und Laravel zweifellos zwei beliebte Optionen unter Entwicklern. Express ist ein leichtes Framework auf Basis von Node.js, während Laravel ein beliebtes Framework auf Basis von PHP ist. In diesem Artikel werden die Vor- und Nachteile dieser beiden Frameworks ausführlich verglichen und spezifische Codebeispiele bereitgestellt, um Entwicklern bei der Auswahl des Frameworks zu helfen, das ihren Anforderungen am besten entspricht. Leistung und SkalierbarkeitExpr

Verwenden Sie Spring Boot und Webpack, um Front-End-Projekte und Plug-in-Systeme zu erstellen Jun 22, 2023 am 09:13 AM

Da die Komplexität moderner Webanwendungen immer weiter zunimmt, wird die Entwicklung exzellenter Front-End-Engineering- und Plug-in-Systeme immer wichtiger. Mit der Popularität von Spring Boot und Webpack sind sie zu einer perfekten Kombination für die Erstellung von Front-End-Projekten und Plug-in-Systemen geworden. SpringBoot ist ein Java-Framework, das Java-Anwendungen mit minimalen Konfigurationsanforderungen erstellt. Es bietet viele nützliche Funktionen, wie z. B. die automatische Konfiguration, sodass Entwickler Webanwendungen schneller und einfacher erstellen und bereitstellen können. W

See all articles