使用Webpack与Vue2从零构建前后端分离项目骨架

项目背景与前置条件

在前端开发中，Webpack作为打包工具与Vue2作为开发框架，已成为前后端分离架构下的主流技术组合。本文旨在演示如何手动使用Webpack和Vue2搭建一个前后端分离项目的基础骨架。尽管vue-cli脚手架能自动生成项目结构，但理解其底层原理对于开发者依然至关重要。因此，本文将详细记录从0开始配置Webpack与Vue构建基础项目的过程。前提条件是本地已安装Node.js环境。

核心依赖安装

项目运行所需的全部npm依赖列表如下：

CSS相关处理依赖包括：style-loader、css-loader、sass-loader以及node-sass。

JavaScript编译相关依赖包括：babel-core、babel-loader和babel-preset-es2015。

Webpack核心工具包括：webpack本身以及webpack-dev-server用于本地开发服务。

Vue相关依赖包括：vue、vue-loader、vue-html-loader以及vue-template-compiler。

项目初始化与目录结构

接下来，创建项目的基础目录结构。

首先新建一个名为myApp的文件夹作为项目根目录，在终端中进入该目录并执行初始化操作。

执行项目初始化流程。

$ npm init 

在初始化过程中，若无特殊需求，直接连续按“回车键”即可。初始化完成后，项目根目录下会生成package.json文件，该文件主要用于记录项目的依赖列表以及配置项目的启动命令。

开始安装项目所需的各类依赖包。

$ npm i style-loader --D 

在使用npm安装依赖时，建议加上“--D”参数（即--save-dev），这样依赖会被记录在package.json中。如果不加此参数，当项目迁移到其他系统时，可能会因为node_modules的兼容性或体积问题导致依赖失效。通过添加“--D”，我们只需在打开项目时通过npm重新安装所有依赖即可，无需拷贝庞大的node_modules文件夹。

$ npm i 

Webpack与Package配置

接下来配置webpack.config.js文件，这是Webpack的核心配置文件。

Webpack的所有配置均定义在webpack.config.js文件中。初始化项目后，需新建此文件并进行配置。鉴于Webpack基础配置已有专门介绍，此处直接展示具体的配置代码：

module.exports = {

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

 output:{

  path: __dirname + '/dist/',

  filename: 'bundle.js'

 },

 devtool:'source-map',

 devServer:{

  // 主要改变项目的根目录

  contentBase: __dirname + '/dist/',

  port:8080,

  inline:true

 },

 module:{

  loaders:[

   {test:/\.css$/,loader :'style-loader!css-loader'},

   {test:/\.js$/, loader:'babel-loader',exclude:/node_modules/},

   { test: /\.vue$/, loader: 'vue-loader' }

  ]

 },

 //vue文件想要解析必须要要加上这句才能成功

 resolve: { alias: { 'vue': 'vue/dist/vue.js' } }

} 

随后配置package.json文件中的脚本命令。

在package.json中，主要需要配置两个脚本命令：一个是用于开发模式的start命令，另一个是用于打包项目的build命令。

项目启动与目录详解

配置完成后，即可启动开发服务器。

$ npm start 

项目打包构建操作。

$ npm run build 

整个项目的目录结构规划如下：

src目录：存放所有开发用的源代码文件。

components目录：用于存放所有的Vue组件文件。

styles目录：存放所有的样式文件，如CSS或SCSS。

utils目录：存放项目中自定义的工具函数或方法。

app.vue：这是所有Vue组件的入口文件，通常作为根组件。

main.js：这是整个项目的JavaScript入口文件，负责初始化Vue实例。

index.html：该文件可以放置在项目根目录myApp下，也可以放在Webpack打包生成的dist目录中。若放在根目录，webpack.config.js中的contentBase应设置为__dirname；若放在dist目录，则应设置为__dirname + '/dist/'。这主要决定了本地服务器（localhost:8080）访问时的根目录位置。经过测试，将index.html放在打包生成的dist目录中表现更好，因为在开发模式下能实现更好的实时更新效果（注：此结论可能随后续测试调整）。

以下是index.html文件的具体代码内容：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>webpack+vue</title>
</head>
<body>
 <div id="app"></div>
 <script src="./bundle.js"></script>
</body>
</html> 

以下是main.js入口文件的具体代码内容：

//引入vue框架<br>
//import是es6的写法，其实和var Vue = require('vue')是相同的意义<br>import Vue from 'vue';<br>
//引入App.vue文件，这个文件也是vue所有组件的入口，我们的项目就是将这个文件追加到index.html文件里面
import App from './App.vue';
new Vue({
 el:'#app',
 components: {App},<br>//主要目点就是将App追加到“#app”里面去
 render: h => h(App)
}) 
App.vue文件代码
<template>
  <div>Hello VueJS!</div>  
</template>
<script>
 export default{
   name:"app"
  }
</script> 

运行结果与总结

至此，项目的基本结构搭建完成。在浏览器地址栏输入localhost:8080，即可看到页面显示效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。