简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  使用Vue2.X和Webpack2.X開發SPA應用的環境建置方法

使用Vue2.X和Webpack2.X開發SPA應用的環境建置方法

巴扎黑
巴扎黑原創
2017-07-22 15:40:301177瀏覽

[TOC]

1、開發環境準備

1.1 安裝nodejs

先安裝Nodejs，直接去nodejs官網下載，預設會安裝Npm，所以這裡可以不用單獨安裝。

1.2 使用淘寶Npm鏡像

由於國內網路原因，如果直接使用Npm安裝依賴包會因為網路和牆的原因導致不成功，好在淘寶給我提供了可以使用的鏡像，地址是：，按照其【使用說明】將鏡像安裝好。

1.3 IDE準備

目前前端開發比較火的IDE是Jetbrain的WebStorm，到其官網下載：，安裝後有30天的試用期，如果覺得不爽，可以去網上找破解，這裡把我使用的註冊資料放出來。當然最好的是付費啦

2.搭建Webpack工程

2.1 新建工程

當開發環境準備好後，就可以開啟WebStorm，新建一個空項目，如下圖：

使用webstorm的好處很多，其中之一就是可以直接在IDE裡面調出控制台，如下圖：

在控制台輸入「npm init」初始化這個工程，控制台會讓你輸入以下訊息，這裡可以預設都回車，最後按照提示輸入"yes"則初始化完成。

這時在工程根目錄下會產生package.json，開啟檔案能看到剛才在控制台輸入的訊息，如下：

package.json檔案是Nodejs和Npm查找依賴的清單，更多的資訊可以參考這篇文件:和

2.2 安裝Webpack

關於Webpack的概念和作用可以參考這篇文章: https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/?utm_source=tuicool&utm_medium=referral和
。英文好的童鞋可以直接參考官網：http://webpack.github.io/

#使用webpack的目的是讓程式碼更模組化，方便維護和管理，這和在Java中用maven來管理包很相似。

2.2.1 安裝

首先，在控制台輸入指令:npm install webpack,這個指令的作用是讓npm安裝webpack到node_modules(該目錄會自動產生)。

  • 在產品環境中，以便在指令後面加上--save，例如:npm install webpack --save，這個意思是說把webpack安裝到node_modules下，並且更新package .json檔案的dependencies。

  • 在開發環境中，我們使用：npm install webpack --save-dev，將webpack安裝到Node_modules下，並且更新package.json的devDependencies。
    這裡我們使用在開發環境中的指令。

更多的NPM指令可以參考官網：和

2.2.2 設定

1.首先，我們再工程目錄下新建src目錄，並在src下新建hello.js文件，文件內寫如下程式碼:

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

這是依照ES6的語法來實作。

關於ES6的更多內容可以參考這篇文件：。

export是定義對外暴露的接口，default是為export提供一個預設輸出，這樣可以在import的時候自訂變數名而不用在import的時候指定export中的變數名稱。所以這段程式碼意思是：預設輸入一個匿名函數。

2.然後，在hello.js同級下建立main.js，然後輸入如下內容:

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

import是將剛才所寫的hello.js檔案當做一個模組導入進來，"Hello"變數就是為這個匿名函數定義變數名，from後面就是被引入的檔案位址，如果是js檔案預設不用寫，該路徑可以是相對路徑或絕對路徑，然後用js去從dom取得app節點，並加入子級元素。

3.在工程根目錄新建public資料夾，並新建一個Index.html文件，如下：

然後在Html文件中建立一個div，其id為app，並在body尾處引入script，如下圖:

<!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.在工程目錄下新建webpack.config.js文件，編輯webpack.config.js文件，寫如下程式碼：

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

以上是使用Vue2.X和Webpack2.X開發SPA應用的環境建置方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：有關於如何解決js重名方法的先後呼叫問題下一篇：有關於如何解決js重名方法的先後呼叫問題

相關文章

看更多