Umgebungskonstruktionsmethode für die Entwicklung von SPA-Anwendungen mit Vue2.X und Webpack2.X

[TOC]

1. Vorbereitung der Entwicklungsumgebung

1.1 Nodejs installieren

Zuerst Nodejs installieren, direkt zur offiziellen Website von nodejs herunterladen, Npm wird installiert Standardmäßig ist hier keine separate Installation erforderlich.

1.2 Verwenden Sie den Taobao Npm-Spiegel

Wenn Sie Npm direkt zum Installieren von Abhängigkeitspaketen verwenden, ist dies aus Netzwerk- und Wandgründen erfolglos Ein verwendbarer Mirror, die Adresse lautet: Befolgen Sie die [Anweisungen], um den Mirror zu installieren.

1.3 IDE-Vorbereitung

Die derzeit beliebteste IDE für die Front-End-Entwicklung ist Jetbrain's WebStorm. Laden Sie es von der offiziellen Website herunter: Nach der Installation gibt es eine 30-tägige Testphase Unbequem, Sie können online nach Crack suchen. Hier sind die Registrierungsinformationen, die ich verwendet habe. Am besten ist es natürlich zu bezahlen

2. Erstellen Sie ein Webpack-Projekt

2.1 Erstellen Sie ein neues Projekt

Wenn die Entwicklungsumgebung bereit ist, können Sie WebStorm öffnen und erstellen ein neues leeres Projekt.

Es gibt viele Vorteile der Verwendung von Webstorm. Einer davon ist, dass Sie die Konsole direkt in der IDE aufrufen können, wie unten gezeigt:

Enter „npm init“ in der Konsole, um das Projekt zu initialisieren. Sie können standardmäßig die Eingabetaste drücken, um die Initialisierung abzuschließen.

Zu diesem Zeitpunkt wird package.json im Projektstammverzeichnis generiert. Wenn Sie die Datei öffnen, können Sie die soeben eingegebenen Informationen wie folgt sehen:

Die package.json-Datei ist Nodejs und Npm sucht nach einer Liste von Abhängigkeiten. Weitere Informationen finden Sie in diesem Dokument: und

2.2 Webpack installieren

Für Das Konzept und die Funktion von Webpack finden Sie in diesem Blogbeitrag: https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/?utm_source=tuicool&utm_medium=referral und
. Für Kinderschuhe, die gut auf Englisch sind, können Sie direkt auf die offizielle Website verweisen: http://webpack.github.io/

Der Zweck der Verwendung von Webpack besteht darin, den Code modularer und modularer zu gestalten Erleichtern Sie die Wartung und Verwaltung. Dies entspricht der Verwendung in Java. Maven ist der Verwaltung von Paketen sehr ähnlich.

2.2.1 Installation

Geben Sie zunächst den Befehl in die Konsole ein: npm install webpack. Die Funktion dieses Befehls besteht darin, npm das Webpack unter node_modules installieren zu lassen (das Verzeichnis wird automatisch generiert). .

• Fügen Sie in der Produktionsumgebung nach dem Befehl --save hinzu, zum Beispiel: npm install webpack --save, was bedeutet, dass Webpack unter node_modules installiert und die Abhängigkeiten der Paket-.json-Datei aktualisiert werden .

• In der Entwicklungsumgebung verwenden wir: npm install webpack --save-dev, um Webpack unter Node_modules zu installieren und die devDependencies von package.json zu aktualisieren.
  Hier verwenden wir die Befehle in der Entwicklungsumgebung.

Weitere NPM-Befehle finden Sie auf der offiziellen Website: und

2.2.2 Konfiguration

1 , wir erstellen ein neues src-Verzeichnis im Projektverzeichnis und erstellen eine hello.js-Datei unter src. Schreiben Sie den folgenden Code in die Datei:

export default function () {const hello = document.createElement("div");hello.textContent = "Hello Webpack!"return  hello;}

Dies wird gemäß implementiert die ES6-Syntax.

Weitere Informationen zu ES6 finden Sie in diesem Dokument:.

Export definiert eine Schnittstelle, die der Außenwelt zugänglich gemacht wird, und standardmäßig stellt eine Standardausgabe für den Export bereit, sodass Sie den Variablennamen beim Importieren anpassen können, anstatt beim Importieren den Variablennamen im Export anzugeben. Dieser Code bedeutet also: Geben Sie standardmäßig eine anonyme Funktion ein.

2. Erstellen Sie dann main.js auf derselben Ebene wie hello.js und geben Sie den folgenden Inhalt ein:

import Hello from "./hello";document.getElementById("app").appendChild(Hello());

import soll das Hallo ändern gerade geschrieben Die .js-Datei wird als Modul importiert. Die Variable „Hallo“ ist der für diese anonyme Funktion definierte Variablenname. Wenn es sich um eine js-Datei handelt, muss dies nicht der Fall sein Der Pfad kann standardmäßig ein relativer oder ein absoluter Pfad sein. Verwenden Sie dann js, um den App-Knoten aus dem Dom abzurufen und untergeordnete Elemente hinzuzufügen.

3. Erstellen Sie einen öffentlichen Ordner im Projektstammverzeichnis und erstellen Sie eine neue Index.html-Datei wie folgt:

Erstellen Sie dann ein Div in der HTML-Datei mit der ID-App und fügen Sie es hinzu Führen Sie im Hauptteil das Skript am Ende ein, wie unten gezeigt:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Webpack Example</title><body><div id="app" ></div><script type="text/javascript" src="bundle.js?1.1.11"></script></body></html>

4. Erstellen Sie eine neue Datei webpack.config.js im Projektverzeichnis und bearbeiten Sie die Datei webpack.config. js-Datei und schreiben Sie den folgenden Code:

module.exports = {entry: __dirname + "/src/main.js?1.1.11",output: {path: __dirname + "/public",filename: "bundle.js?1.1.11"}}

__dirname是nodejs中的全局变量，指向当前执行脚本的目录。
module.exports是webpack的对象，其中entry是指定入口文件，这里指定main.js为入口文件。output下的path是输出目录，filename是输出文件名称。通过path和filename组合就可以将我们再代码中引入的模块完整的输出到制定的文件中。

5.在控制台执行webpack命令，就可以看到bundle.js文件已经输出到Public目录下了

这个时候通过浏览器打开Index.html可以看到效果:

3、进阶Webpack

上面我们已经可以用webpack来打包我们的模块，不过这只是刚入门，后面我们会不断的完善webpack.config.js这个文件。
从刚才的例子中，我们需要自己手动的在html页面里面引入bundle.js文件，那么有没有自动帮我们引入文件的功能呢？回答肯定是有的，这里就介绍下Html-webpack-plugin插件。

3.1 常用插件

3.1.1 Html-webpack-plugin插件

插件官方地址是:,这里只是简单讲解使用。

1.要使用html插件，首先需要在项目中引入该模块，在控制台执行命令:

npm install html-webpack-plugin --save-dev

2.编辑webpack.config.js文件，在其中加入以下代码:

var HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: __dirname + "/src/main.js?1.1.11",output: {path: __dirname + "/public",filename: "bundle.js?1.1.11"},plugins: [new HtmlWebpackPlugin()
    ]}

可以看到，使用require引入html-webpack-plugin，然后在配置中的plugins数组中new一个插件对象。

3.这个时候我们把public目录删除，再在控制台执行webpack命令，会看到如下：

注意看红框部分，首先，title已经被修改了插件默认值；其次，id为app的div已经没有了。最后，可看到在body末尾插件帮我们把bundle.js插入。

template属性
看插件官网，插件有一个template属性，可以指定模板文件，插件能按照模板帮我们插入js或者css引用。

官网地址是:。

看官网描述，默认会有一个ejs的loader会解析模板，至于ejs是什么？ejs是一个模板语言，在nodejs开发中经常会用到，这里可以把ejs完全当做一个html格式来用。
所以，在src目录下，我们新建一个index.temp.ejs文件，并把public下的index.html的内容拷贝到该文件中，并修改至如下:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Webpack Example</title><body><div id="app" class="custom"></div></body></html>

可以看到，title已经被我们修改回webpack example了，并且也添加了id为app的div，还删除了script，接着，删除Public下的文件。然后我们再控制台输入webpack，等webpack打包编译完成，这时public下生成了bundle.js和index.html文件，编辑index.html文件，可以看到如下信息：

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a7Webpack Example6e916e0f7d1e588d4f442bf645aedb2f
3f103fbe71cf3c8496f52de6b1187a2a9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
2cc379576380abd0be39e1d1832e7fc016b28748ea4df4d9c2150843fecfba68
6bbbe3d7ae7fe3978737f0820f53b5b92cacc6d41bbb37262a98f745aa00fbf036cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

在Body末尾，插件自动给我们把script加上了。

3.1.2 Extract-text-webpack插件

如果我们也想把css文件也自动插入，那么就会用到extract-text-webpack插件。

其官网地址是:。

官网的usage如下：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css?1.1.11"),
  ]
}

1.首先还是要先在控制台输入命令：

npm install extract-text-webpack-plugin --save-dev。

这里要注意：官网只提示安装extract插件，其实在编译的时候，还需要style-loader和css-loader，所以还要执行命令:

npm install style-loader --save-dev

npm install css-loader --save-dev

2.然后在webpack.config.js文件上面，require一下这个插件
3.按照官网的用法，编写module节点，最后如下所示:

var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry: __dirname + "/src/main.js?1.1.11",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js?1.1.11"
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextWebpackPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.temp.ejs"
        }),
        new ExtractTextWebpackPlugin("styles.css?1.1.11")
    ]
}

注意：

• test是正则表达式，不是字符串!!!，没有引号

• 在webpack2中，module下的loaders改为rules,后者拥有更多的功能

4.接着，我们在src目录下新建一个index.css文件，并编辑编写如下样式:

.custom{
    font-size: 18px;
    color: bisque;
    border: 1px moccasin solid;
    padding: 5px;
}

5.然后，编辑index.temp.ejs文件，在div标签加入class="custom"，如下图红框处:

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a7Webpack Example6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
2cc379576380abd0be39e1d1832e7fc016b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

6.编辑main.js文件，在其顶部Import刚才新建的index.css文件，如下图:

import Hello from "./hello";
import IndexStyle from "./index.css?1.1.11";

document.getElementById("app").appendChild(Hello());

7.最后，在控制台输入命令

webpack

编译完成后，可以看到public目录下生成了style.css文件，编辑index.html文件，可以看到在Head中引入了Style.css文件,如下图:

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a7Webpack Example6e916e0f7d1e588d4f442bf645aedb2f
    3f103fbe71cf3c8496f52de6b1187a2a9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
2cc379576380abd0be39e1d1832e7fc016b28748ea4df4d9c2150843fecfba68
6bbbe3d7ae7fe3978737f0820f53b5b92cacc6d41bbb37262a98f745aa00fbf036cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

3.2 开发服务器 - Webpack-dev-server

在开发中，我们会不断的调试页面和参数，如果每次都是执行webpack命令未免太累了，所以这里介绍一个开发服务器webpack-dev-server，它提供一个易于部署的服务器环境，并且具有实时重载的功能。

更多的文档可以参考：。

要使用这个功能，首先还先执行npm的安装命令

npm install webpack-dev-server --save-dev,

执行完成后，编辑package.json文件，添加"start"代码如下：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start":"webpack-dev-server --progress"}

"--progress"参数可以查看当前执行进度，在控制台输入"npm start"控制台会打印日志信息，最后出现编译成功，代表服务启动完成，这时打开http://localhost:8080，可以看到index.html的内容，如下图：

这个时候，编辑hello.js，添加一些字符串如下：

export default function () {
    const hello = document.createElement("div");
    hello.textContent = "Hello Webpack!This is my example!"
    return  hello;
}

保存后，打开浏览器不用刷新，就可以看到我们新添加的"This is my example"。

Das obige ist der detaillierte Inhalt vonUmgebungskonstruktionsmethode für die Entwicklung von SPA-Anwendungen mit Vue2.X und Webpack2.X. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!