使用Vue2.X和Webpack2.X开发SPA应用 - 环境构建篇

时间  2019-11-25
标签 使用 vue2.x vue webpack2.x webpack 开发 spa 应用 环境 构建 繁體版
原文   原文链接

目录javascript

一、开发环境准备

1.1 安装nodejs

首先安装Nodejs，直接去nodejs官网下载https://nodejs.org/en/，默认会安装Npm，因此这里能够不用单独安装。css

1.2 使用淘宝Npm镜像

因为国内网络缘由，若是直接使用Npm安装依赖包会由于网络和墙的缘由致使不成功，好在淘宝给我提供了能够使用的镜像，地址是：https://npm.taobao.org/，按照其【使用说明】将镜像安装好。html

1.3 IDE准备

目前前端开发比较火的IDE是Jetbrain的WebStorm，到其官网下载：http://www.jetbrains.com/webstorm/，安装后有30天的试用期，若是以为不爽，能够去网上找破解，这里把我使用的注册信息放出来。固然最好的是付费啦前端

2.搭建Webpack工程

2.1 新建工程

当开发环境准备好后，就能够打开WebStorm，新建一个空项目，以下图：java

使用webstorm的好处不少，其中之一就是能够直接在IDE里面调出控制台，以下图：node

在控制台输入“npm init”初始化这个工程，控制台会让你输入以下信息，这里能够默认都回车，最后按照提示输入"yes"则初始化完成。webpack

这时在工程根目录下会生成package.json，打开文件能看到刚才在控制台输入的信息，以下：git

package.json文件是Nodejs和Npm查找依赖的清单，更多的信息能够参考这篇文档:https://docs.npmjs.com/files/package.json和http://www.ruanyifeng.com/blog/2016/10/npm_scripts.htmles6

2.2 安装Webpack

关于Webpack的概念和做用能够参考这篇博文:https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/?utm_source=tuicool&utm_medium=referral和
http://www.jianshu.com/p/42e11515c10f。英语好的童鞋能够直接参看官网：http://webpack.github.io/github

使用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命令能够参看官网：https://docs.npmjs.com/和http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

2.2.2 配置

1.首先，咱们再工程目录下新建src目录，并在src下新建hello.js文件，文件内写以下代码:

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

这是按照ES6的语法来实现。

关于ES6的更多内容能够参考这篇文档：http://es6.ruanyifeng.com/#README。

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"></script></body>
</html>

4.在工程目录下新建webpack.config.js文件，编辑webpack.config.js文件，编写以下代码：

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

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

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

这个时候经过浏览器打开Index.html能够看到效果:

三、进阶Webpack

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

3.1 经常使用插件

3.1.1 Html-webpack-plugin插件

插件官方地址是:https://www.npmjs.com/package/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",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

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

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

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

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

官网地址是:https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md。

看官网描述，默认会有一个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" rel="stylesheet"></head>
<body>
<div id="app" class="custom"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

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

3.1.2 Extract-text-webpack插件

若是咱们也想把css文件也自动插入，那么就会用到extract-text-webpack插件。

其官网地址是:https://github.com/webpack-contrib/extract-text-webpack-plugin。

官网的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.首先仍是要先在控制台输入命令：

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",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    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")
    ]
}

注意：

  • 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";

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" rel="stylesheet"></head>
<body>
<div id="app" class="custom"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

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

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

更多的文档能够参考：http://www.css88.com/doc/webpack2/guides/development/。

要使用这个功能，首先还先执行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"。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程