从零开始搭建一个基于webpack的Vue开发环境（2）
2019-12-20 本文已影响0人
zshawk1982
上一部分的代码，已经用webpack包装了一个简单的js项目，下面我们将vue引入，在此之前，我们还是看下目录结构：
项目结构
单纯从项目结构来看，跟之前差别不大，就多了个babel的配置文件，其它的变化的重点在内容的改变
首先来看下util.js,内容跟之前的那个util.js的内容不一样了,我之所以修改,主要是在项目中引入promise,await的使用,同时验证webpack的babel-loader的作用
//一个简单的定时器--1秒后返回一个包含hello vue字符串的promise
export default function getData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("hello vue")
}, 1000)
})
}
然后是我们webpack打包的入口文件,main.js:
import Vue from 'vue'
import './css/main.scss'
import getData from './util'
import loginJpg from './img/login-bg.jpg'
new Vue({
el: '#app',
data: {
content: 'hello world',
loginJpg: loginJpg
// loginJpg2: require('./img/login-bg.jpg')
},
template: `
<div class="main">
{{content}}
<img :src="loginJpg"/>
</div>
`,
methods: {
async fetchData() {
this.content = await getData()
}
},
created() {
this.fetchData()
}
})
main.js中我们引入了vue的内容,不过采用的不是单文件组件,而是使用了script定义了一个简单的根组件,当然在这里,我们用import引入了图片和css文件
然后是main.scss,注意,之前的是main.css，现在变成了main.scss,也就意味着，我们开始使用sass来作为样式了，main.scss的内容：
.main{
color:red;
font-size: 24px;
width:150px;
height:100px;
}
接着我们来看.babelrc文件的内容，该文件主要是为babel-loader服务的,这里的@babel/preset-env是babel的预设环境，@babel/plugin-transform-runtime是为@babel/runtime服务的插件，关于babel的具体可以查阅我的其他文章
{
"presets": [
[
"@babel/preset-env"
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}
package.json中的改变，注意我们没有分离css文件了，所以就不在安装miniCssExtractPlugin，见下图：
{
"name": "webpack_demo2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.6.0",
"@babel/plugin-transform-runtime": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"@babel/runtime-corejs3": "^7.6.0",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"vue-style-loader": "^4.1.2",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
},
"dependencies": {
"vue": "^2.6.10"
}
}
安装了其余的模块:
npm install --save vue
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/runtime-corejs3
npm install --save-dev @babel/plugin-transform-runtime
npm install --save-dev babel-loader
npm install --save-dev vue-style-loader
npm install --save-dev node-sass
npm install --save-dev sass-loader
至于template.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"></div>
</body>
</html>
最后则是我们的重头戏，webpack的配置：注意这里对css处理跟第一部分不大一样，第一部分是将css提取出来，然后以link方式自动连接进去，而我们这里将scss转换成css后则是交给了vue-style-loader去处理了，所以也就没再使用miniCssExtractPlugin来单独分离出css文件
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
//output的publicPath决定了异步加载的js，使用htmlWebpackPlugin插入的bundle.js，从css中引入的图片或字体，以及miniCssExtractPlugin分离的css等的文件引用路径
publicPath: '/dist/'
},
mode: 'development',
devServer: {
publicPath: "/dist/"
},
module: {
rules: [
// {
// //css样式被bundle.js注入到html页面的style里
// test: /\.css$/i,
// exclude: /node_modules/,
// use: ['style-loader', 'css-loader']
// },
{
//提供es6语法支持，使得await，async，promise在任何浏览器可用
test: /\.js$/i,
exclude: /node_modules/,
use: ['babel-loader']
},
//使用sass-loader解析sass，然后交给css-loader处理url和import，最后交给vue-style-loader，让它将css动态插入页面中的style标签中
{
test: /\.scss$/i,
exclude: /node_modules/,
use: ['vue-style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './images/',
}
},
],
},
]
},
plugins: [
//在dist下以template.html为模板生成index.html文件，同时将
//bundle.js插入html文件的body底部
new HtmlWebpackPlugin({
template: './template.html',
filename: 'index.html'
}),
//该插件用于每次build之前自动清除dist目录
new CleanWebpackPlugin()
],
resolve: {
alias: {
//这个用于指明vue采用编译环境，而不仅是运行环境(这里不用别名指定以下的话，会直接报错You are using the runtime-only build of Vue where the template compiler is not available)说白了，其实就是import的vue默认指向的是node_module/vue/dist下的vue.runtime.common.js而不是vue.esm.js，因为有template需要编译，光是运行环境不够，除非不用template，而用render
'vue$': 'vue/dist/vue.esm.js'
}
}
}
这次再次使用打包或者webpack-dev-server启动，访问localhost:8080/dist/index.html也能看到想要的效果，到此vue的引入也发挥作用了。
