express+webpack+vue.js实战

建立express项目

---

首先通过如下命令创建一个express的ejs模板项目（PS：ejs 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。）

express ewv_test -e

再进入其目录，安装依赖

cd ewv_test
npm install

这样就建立了一个express项目，我们通过以下指令启动后访问3000端口查看

npm start

 

express项目结构：

安装模块

---

可以使用npm install 【模块名】安装，这样会安装相应模块的最新版本，也可以将模块名及版本写入package.json后通过npm install安装自己指定版本的模块，附上package.json

{
  "name": "ewv",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "css-loader": "^0.28.4",
    "debug": "~2.6.3",
    "ejs": "~2.5.6",
    "express": "~4.15.2",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2",
    "style-loader": "^0.18.2",
    "vue": "^2.3.4",
    "vue-template-compiler": "^2.3.4",
    "webpack": "^2.6.1"
  }
}

配置项目

---

在express项目目录里新建src目录，里面写我们的前端代码，目录结构如图

 在routes目录下index.js配置路由

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('../views/index.html', { title: 'Express' });
});

module.exports = router;

webpack配置（在express项目目录里新建webpack.config.js文件）

---

webpack官网简介：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack.config.js：webpack的配置文件是一个node.js的module，没有固定的命名，也没有固定的路径要求，如果你直接用webpack来执行编译，那么webpack默认读取的将是当前目录下的webpack.config.js

webpack配置项：

• 入口文件：entry参数

  entry:{
  		main:'./src/js/main.js',
  	}

   

• 出口文件：output参数

  output:{
  		filename:'javascripts/[name]-bundle.js',
  		//这里没有使用 path模块来构建目录的路径有需要的可以单独修改
  		path:__dirname+'/public',
  		//publicPath非常重要它可以放置页面的依赖关系在生成之后出现路径问题
  		publicPath:'http://localhost:3000'
  	},
  	//webpack把vuejs的名称指向修改出问题需要它来修改
  	resolve: {
          alias: {
              'vue': 'vue/dist/vue.js'
          }
      }

   

• 各种loader：module参数

  module:{
  		rules:[
  			{	//css加载器
  				test:/\.css$/,
  				loader:'style-loader!css-loader'
  			},
  			{	
  				test:/\.js/,
  				loader:'babel-loader'
  			},
  			{   //html加载器（html－webpack－plugin默认以ejs加载页面防止报错我们需要html加载器）
  				test:/\.html$/,
  				loader:'html-loader'
  			}
  		]
  	}

   

• 添加额外功能：plugins参数

  plugins:[
  		new htmlWebpackPlugin({
  			//这个是生成的html文件名，我们把它直接放在views中覆盖原有的欢迎页面
  			filename:'../views/index.html',
  			//这个是根据哪个页面模版来打包文件
  			template:'./src/tpl/index.html',
  			//chunks代表当前页面需要引入上述哪个依赖文件，我们直接将两个都引入
  			chunks:['main']
  		})
  	]

   

webpack.config.js代码：

//这里引入了html-webpack-plugin模块来构建动态的html页面
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
	//js入口文件
	entry:{
		main:'./src/js/main.js',
	},
	//打包输出的js文件位置［name］会按照模块的名称自动生成两个js文件
	output:{
		filename:'javascripts/[name]-bundle.js',
		//这里没有使用 path模块来构建目录的路径有需要的可以单独修改
		path:__dirname+'/public',
		//publicPath非常重要它可以放置页面的依赖关系在生成之后出现路径问题
		publicPath:'http://localhost:3000'
	},
	//webpack把vuejs的名称指向修改出问题需要它来修改
	resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },
	//loader加载器
	module:{
		rules:[
			{	//css加载器
				test:/\.css$/,
				loader:'style-loader!css-loader'
			},
			{	
				test:/\.js/,
				loader:'babel-loader'
			},
			{   //html加载器（html－webpack－plugin默认以ejs加载页面防止报错我们需要html加载器）
				test:/\.html$/,
				loader:'html-loader'
			}
		]
	},
	//html页面扩展
	plugins:[
		new htmlWebpackPlugin({
			//这个是生成的html文件名，我们把它直接放在views中覆盖原有的欢迎页面
			filename:'../views/index.html',
			//这个是根据哪个页面模版来打包文件
			template:'./src/tpl/index.html',
			//chunks代表当前页面需要引入上述哪个依赖文件，我们直接将两个都引入
			chunks:['main']
		})
	]
}

引入vue.js

---

现在我们可以直接在前端部分引用vue框架了，我在main.js里引用vue.js

import Vue from 'vue';
new Vue({
	el:'#app',
	data:{
		title:'hello vue'
	}
})

在index.html使用vue模板语法

	
		
		
	
	
		

			{{title}}	
		
	

启动项目，localhost:3000