跳到主要内容

从零开始配置vue.js的webpack开发环境

· 7 分钟阅读
lzw.

这里使用的[email protected] 版本

安装webpack

首先需要使用npm来初始配置:

cnpm init

执行后,一系列的回车后, 生成package.json文件 ,接着安装 [email protected] 和webpack-dev-server:

cnpm install [email protected]2.3.2 --save-dev
cnpm install webpack-dev-[email protected]2.4.2 --save-dev

--save-dev会作为开发依赖来安装webpack。执行以上操作的package.json文件:

{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
}
}

配置webpack

新建webpack.config.js文件用来作为webpack配置:

var path = require('path');
var config = {
entry:{ //入口main.js文件
main:'./main'
},
output:{ //打包后
path:path.join(__dirname,'./dist'),
publicPath:'/dist/',
filename:'main.js'
}
}
module.exports=config

以上webpack配置文件最重要的两项就是entry和output,在entry中的main.js是配置的入口文件,output中的main.js则是打包后的文件。所以,还需要一个空的main.js入口文件,现在,我们把webpack与npm环境联系起来,在package.json中添加webpack-dev-server启动脚本:

"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --open --config webpack.config.js"
},

至此,我们的配置就完成了,下面建一个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</title>
</head>
<body>
<div id="app">
hello world
</div>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

执行启动命令后,会自动在浏览器中打开页面:

cnpm run dev

如果你成功打开一个 hello world的页面,那么你已经完成了整个工作最重要的一步了。

加入css处理配置

处理css等样式文件就需要用到style-loader和css-loader,所以需要安装和配置它们:

cnpm install css-loader --save-dev
cnpm install style-loader --save-dev
cnpm install extract-text-webpack-[email protected]2.1.2 ---save-dev--save-dev

利用extract-text-webpack-plugin来启用webpack的插件功能。在wepack.config.js中添加css处理配置:

var ExtractTextPlugin = require('extract-text-webpack-plugin')
var config = {
//...
module:{
rules:[
{ //处理css文件
test:/.css$/,
use:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'style-loader'
})
}
]
},
plugins:[
//打包生成的css文件
new ExtractTextPlugin('main.css')
]
}
module.exports=config

下面我们添加一个style.css文件:

#app{
font-size: 24px;
color: #f50;
}

并在main.js中通过 import 引入:

import './style.css'; 

使用 cnpm run dev 命令重启服务,在浏览器中可以看到通过 <link> 引入的main.css文件生效,页面的 hello world也变大变红。

安装vue相关依赖

处理.vue后缀文件和ES6语言转换等,需要安装相应的依赖:

cnpm install --save-dev vue
cnpm install --save-dev vue-loader
cnpm install --save-dev vue-style-loader
cnpm install --save-dev vue-template-compiler
cnpm install --save-dev vue-hot-reload-api
cnpm install --save-dev babel
cnpm install --save-dev babel-[email protected]7.1.5
cnpm install --save-dev babel-core
cnpm install --save-dev babel-plugin-transform-runtime
cnpm install --save-dev babel-preset-es2015
cnpm install --save-dev babel-runtime

安装完成后,配置webpack.config.js来支持.vue文件和ES6的解析:

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var VueLoaderPlugin = require('vue-loader/lib/plugin')
var config = {
entry:{
main:'./main'
},
output:{
path:path.join(__dirname,'./dist'),
publicPath:'/dist/',
filename:'main.js'
},
module:{
rules:[
{
test:/.vue$/,
loader:'vue-loader',
options:{
loaders:{
css:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'vue-style-loader'
})
}
}
},
{
test:/.js$/,
loader:'babel-loader',
exclude:/node_modules/
},
{
test:/.css$/,
use:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'style-loader'
})
}
]
},
plugins:[
new ExtractTextPlugin('main.css'),
new VueLoaderPlugin()
]
}
module.exports=config

新建一个.babelrc的配置文件,webpack会根据此配置来使用babel编译ES6的代码:

{
"presets":["es2015"],
"plugins": ["transform-runtime"],
"comments": false
}

配置好这些后,现在就可以使用.vue文件了。现在创建一个app.vue文件并写入内容:

<template>
<div>
hello {{name}}
</div>
</template>
<script>
export default {
data(){
return {
name:'vue.js'
}
}
}
</script>
<style scoped>
div{
color: #f60;
font-size:24px;
}
</style>

写好了组件后,就可以在入口文件main.js中使用它,打开main.js文件,替换成以下内容:

import Vue from 'vue';
import App from './app.vue';
new Vue({
el:'#app',
render:h=>h(App)
})

重启服务,在浏览器中可以看到页面的 <div id="app"> 已经被组件替换了:

<div data-v-381730fa>hello vue.js</div> 

对应的main.css为:

div[data-v-381730fa]{
color: #f60;
font-size:24px;
}

用于生产环境

安装url-loader和file-loader来处理图片,字体等文件:

cnpm install --save-dev url-loader
cnpm install --save-dev file-loader

在webpack.config.js添加配置,?limit=1024是指文件小于1kb,就以base64的形式加载:

var config = {
//...
module:{
rules:[
//...
{
test:/.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,
loader:'url-loader?limit=1024'
},
//..
]
},
};

放置一张图片./images/image.png,并在app.vue中加载它:

 <template>
<div>
hello {{name}}
<p>
<img src="/./images/image.gif" alt="">
</p>
</div>
</template>

重启服务后,浏览器页面上将显示图片,当然,这只是测试,更重要的是把所有的静态资源打包压缩。需要安装下面两个依赖:

cnpm install --save-dev webpack-merge
cnpm install --save-dev html-webpack-plugin

为了方便开发和生产环境切换,我们新建一个webpack.prod.config.js配置文件,并在package.json中加入一个build的脚本:

"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --open --config webpack.config.js",
"build": "webpack --progress --hide-modules --config webpack.prod.config.js"
},

先来看下webpack.prod.config.js的配置:

var webpack= require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var merge = require('webpack-merge');
var webpackBaseConfig = require('./webpack.config.js');
var VueLoaderPlugin = require('vue-loader/lib/plugin')
//清空基本配置的插件列表
webpackBaseConfig.plugins=[];
module.exports = merge(webpackBaseConfig,{
output:{
publicPath:'/dist/',
//将入口文件main.js重命名为hash值的文件名
filename:'[name].[hash].js'
},
plugins:[
new ExtractTextPlugin({
filename:'[name].[hash].css',
allChunks:true
}),
//定义当前node环境为生产环境
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:'"production"'
}
}),
//压缩js
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
}),
//提取模板,并保存入口 html文件
new HtmlwebpackPlugin({
filename:'../index_prod.html',
template:'./index.ejs',
inject:false
}),
//加载vue相关插件
new VueLoaderPlugin()
]
})

从上面的配置文件中,可以看出,还需要一个index.ejs的模板文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
</body>
</html>

最后执行打包命令:

cnpm run bulid

会生成一个dist的目录(包含静态资料)和index_prod.html文件,在浏览器通过访问一下链接即可:

http://localhost:8080/index_prod.html 

好了,vue.js的webpack开发环境基本配置就是这样子了。