Méthode de construction d'environnement pour développer des applications SPA à l'aide de Vue2.X et Webpack2.X

[TOC]

1. Préparation de l'environnement de développement

1.1 Installer nodejs

Installez d'abord Nodejs, allez directement sur le site officiel de nodejs pour télécharger, Npm sera installé par défaut, vous pouvez donc ici Aucune installation séparée requise.

1.2 Utiliser le miroir Taobao Npm

Pour des raisons de réseau domestique, si vous utilisez directement Npm pour installer des packages de dépendances, cela échouera pour des raisons de réseau et de mur Heureusement, Taobao m'a fourni. un miroir utilisable, l'adresse est :, suivez ses [Instructions] pour installer le miroir.

1.3 Préparation de l'IDE

Actuellement, l'IDE le plus populaire pour le développement front-end est WebStorm de Jetbrain. Téléchargez-le depuis son site officiel : il y a une période d'essai de 30 jours après l'installation. inconfortable, vous pouvez aller en ligne pour le trouver Crack, voici les informations d'enregistrement que j'ai utilisées. Bien sûr, le mieux est de payer

2. Construire un projet Webpack

2.1 Créer un nouveau projet

Lorsque l'environnement de développement est prêt, vous pouvez ouvrir WebStorm et créer un nouveau projet vide. Comme indiqué ci-dessous :

L'utilisation de webstorm présente de nombreux avantages. L'un d'eux est que vous pouvez appeler directement la console dans l'IDE, comme indiqué ci-dessous :

Entrée. "npm init" dans la console pour initialiser le projet. La console vous demandera de saisir les informations suivantes. Vous pouvez appuyer sur Entrée par défaut. Enfin, saisissez "oui" lorsque vous êtes invité à terminer l'initialisation.

A ce moment, package.json sera généré dans le répertoire racine du projet. Lorsque vous ouvrez le fichier, vous pouvez voir les informations qui viennent d'être saisies dans la console, comme suit :

Le fichier package.json est Nodejs et Npm recherche une liste de dépendances. Pour plus d'informations, veuillez vous référer à ce document : et

2.2 Installation de Webpack

Pour. le concept et la fonction de Webpack, veuillez vous référer à cet article de blog : https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/?utm_source=tuicool&utm_medium=referral et

. Pour les chaussures pour enfants qui sont bonnes en anglais, vous pouvez directement vous référer au site officiel : http://webpack.github.io/

Le but de l'utilisation de webpack est de rendre le code plus modulaire et faciliter la maintenance et la gestion. C'est la même chose que son utilisation dans Java Maven est très similaire à la gestion des packages.

2.2.1 Installation

Tout d'abord, entrez la commande dans la console : npm install webpack La fonction de cette commande est de laisser npm installer webpack sous node_modules (le répertoire sera automatiquement généré) .

• Dans l'environnement de production, ajoutez --save après la commande, par exemple : npm install webpack --save, ce qui signifie installer webpack sous node_modules et mettre à jour les dépendances du fichier .json du package. .

• Dans l'environnement de développement, nous utilisons : npm install webpack --save-dev pour installer webpack sous Node_modules et mettre à jour les devDependencies de package.json.

  Ici, nous utilisons les commandes de l'environnement de développement.
  

Pour plus de commandes NPM, veuillez vous référer au site officiel : et

2.2.2 Configuration

1. , nous créons un nouveau répertoire src dans le répertoire du projet et créons un fichier hello.js sous src :

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

Ceci est implémenté selon. Syntaxe ES6.

Pour plus d'informations sur ES6, veuillez vous référer à ce document :.

Export définit une interface exposée au monde extérieur, et default fournit une sortie par défaut pour l'exportation, afin que vous puissiez personnaliser le nom de la variable lors de l'importation au lieu de spécifier le nom de la variable dans l'exportation lors de l'importation. Ce code signifie donc : Entrez une fonction anonyme par défaut.

2. Ensuite, créez main.js sous le même niveau que hello.js, et saisissez le contenu suivant :

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

importer consiste à changer le bonjour. vient d'être écrit Le fichier .js est importé en tant que module. La variable "Bonjour" est le nom de la variable défini pour cette fonction anonyme. Après from est l'adresse du fichier importé. S'il s'agit d'un fichier js, il n'est pas nécessaire que ce soit. écrit par défaut. Le chemin peut être un chemin relatif ou un chemin absolu. Utilisez ensuite js pour obtenir le nœud d'application du dom et ajouter des éléments enfants.

3. Créez un dossier public dans le répertoire racine du projet et créez un nouveau fichier Index.html, comme suit :

Créez ensuite un div dans le fichier HTML avec l'application id et ajoutez-le. dans le corps Introduisez le script à la fin, comme indiqué ci-dessous :

<!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 Créez un nouveau fichier webpack.config.js dans le répertoire du projet, modifiez le webpack.config. js, et écrivez le code suivant :

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文件，可以看到如下信息：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Webpack Example</title>
<link href="styles.css?1.1.11" rel="stylesheet"></head>
<body>
<div id="app" class="custom"></div>
<script type="text/javascript" src="bundle.js?1.1.11"></script></body>
</html>

在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"，如下图红框处:

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

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文件,如下图:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Webpack Example</title>
    <link href="styles.css?1.1.11" rel="stylesheet"></head>
<body>
<div id="app" class="custom"></div>
<script type="text/javascript" src="bundle.js?1.1.11"></script></body>
</html>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!