Webpack + Vue 的框架搭建
2019-01-15 本文已影响107人
最尾一名
之前写过一篇用 Vue-Cli 3.x 搭建项目框架的文章，这次写一个不用脚手架来搭建框架的教程。
创建项目
mkdir vue-demo && cd vue-demo
生成 package.json 文件
npm init
大致的 package.json :
{
"name": "vue-demo",
"version": "1.0.0",
"description": "just a vue demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"dependencies": {
}
}
引入 webpack:
npm install -g webpack webpack-cli
npm install --save-dev webpack webpack-cli
在项目中创建 webpack.config.js 文件
const path = require('path');
module.exports ={
entry:'./src/main.js',
output:{
path: path.resolve(__dirname, 'dist'),
filename: "demo.js"
}
};
引入 Vue
npm install vue --save
创建 index.html 和 src/main.js 文件
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue demo</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
// main.js
import Vue from 'vue';
const vm = new Vue({
el: '#app',
data: {
message: 'Hello vue'
}
});
引入 babel
npm install --save-dev babel-core babel-loader
将 babel 加入到 webpack.config.js 配置文件中：
// ...
module:{
rules:[
{
test: /\.js$/,
loader:"babel-loader",
exclude: /node_modules/
}
]
}
// ...
在配置中加入以下代码（重要！）
这是因为正在使用的是 vue 的运行时版本，而此版本中的编译器时不可用的，我们需要把它切换成运行时 + 编译的版本，需要在配置文件中添加如下代码：
// webpack.config.js
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
使用 html-webpack-plugin 插件
引入插件：
npm install --save-dev html-webpack-plugin
在 webpack.config.js 中加入以下配置：
const HtmlWebpackPlugin = require('html-webpack-plugin')
// ...
plugins: [
new HtmlWebpackPlugin({
title: 'vue demo',
template: 'index.html'
})
],
使用 webpack-dev-server 插件
在我们实际开发中需要将代码部署在 server 中，而不是在浏览器中直接打开文件。
此时我们需要使用 webpack 的 webpack-dev-server 。
webpack-dev-server 为我们提供了一个简单的web服务器，并且能够实时重新加载（live reloading）。
npm install --save-dev webpack-dev-server
在 webpack.config.js 文件中需要指定一个文件夹,告诉开发服务器需要从哪儿加载文件:
devServer: {
contentBase:"./dist"
},
修改 package.json 中的 scripts 信息：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --hot --inline",
"build": "webpack"
},
这时，运行指令：
npm run dev
就能在浏览器中看到你的 Vue 项目。
文件总览
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'demo.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'vue',
template: 'index.html'
})
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
contentBase: './dist',
host: 'localhost',
port: 8099,
open: true
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
}
]
}
};
// package.json
{
"name": "vue-demo",
"version": "1.0.0",
"description": "just a demo to learn vue",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --hot",
"build": "webpack"
},
"keywords": [
"vue"
],
"author": "rain",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.2.2",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"vue": "^2.5.22"
}
}
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue demo</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
// src/main.js
import Vue from 'vue';
const vm = new Vue({
el: '#app',
data: {
message: 'Hello vue'
}
});
大功告成！
