网站首页 > 技术文章 正文
本文意在带领读者简单搭建基于webpack4.0环境下的Vue项目，在此过程中熟悉webpack以及vue的简单用法，请一定要按照步骤一步一步进行，循序渐进，从依赖包安装到webpack配置到vue单文件组件的引用到最后打包发布一条龙服务包各位看官满意；
下面坐端正，手放在电脑上，看老师，Let's go，整个过程预计在30min-45min；
最后会附上源代码下载链接
第一步：安装webpack
首先自行选择路径创建项目
并新建一个文件夹 webpack-vue
全局安装webpack，安装之前先检查全局是否已经安装并且确定版本
本文中 webpack 版本为 4.23.0，webpack-cli 版本为 3.1.2
检查版本命令为：
F:\vue-learns\webpack-vue>webpack -v 4.23.0 F:\vue-learns\webpack-vue>webpack-cli -v 3.1.2
如果没有安装请自行安装，命令如下：
yarn add webpack webpack-cli -g
第二步：项目初始化
进入项目目录：
cd vue-learns cd webpack-vue yarn init -y //新建package.json //和npm功能类似，如果还没安装yarn，网上有大量教程在此不赘述
安装vue webpack webpack-dev-server
yarn add vue （--save可省略） yarn add webpack webpack-dev-server --dev //--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。 //--dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
在项目根目录下新建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>Document</title> </head> <body> </body> </html>
在项目根目录下新建webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {};
新建src文件夹目录，并且在src下新建main.js，此时目录结构如下：
webpack的思想就是一切皆模块，官方推荐使用commonJS规范，这使得我们浏览器端也可以使用commonJS的模块化写法 :module.exports = {}
src目录下新建一个utils.js
module.exports = function say() {
console.log('hello world');
}
main.js :
var say = require('./utils');
say();
webpack.config.js:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
output: {
path: path.resolve(__dirname, './dist'), // 项目的打包文件路径
publicPath: '/dist/', // 通过devServer访问路径
filename: 'build.js' // 打包后的文件名
},
devServer: {
historyApiFallback: true, //historyApiFallback设置为true那么所有的路径都执行index.html。
overlay: true // 将错误显示在html之上
}
};
运行:
webpack4.0 可能会运行报错，需要重新安装 yarn add -D webpack-cli
yarn run dev
可以发现浏览器自动打开一个http://localhost:8080/ 的页面 F12打开控制台可以看到有hello world打出
随意修改utils.js，可以发现浏览器会自动刷新
如果我们希望看打包后的bundle.js文件，运行
yarn run build
- webpack默认不支持转码es6，但是import export这两个语法却单独支持。所以我们可以改写前面的模块化写法
utils.js:
export default function say() {
console.log('hello world ');
}
第三步：引入vue
main.js:
import Vue from 'vue';
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
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>Document</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="/dist/build.js"></script>
</body>
</html>
webpack.config.js :
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
devServer: {
historyApiFallback: true,
overlay: true
},
resolve: {
alias: {
'vue