跳到主要内容

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

· 阅读需 7 分钟
lzw.

这里使用的[email protected] 版本

安装webpack​

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

cnpm init

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

cnpm install webpack@2.3.2 --save-dev
cnpm install webpack-dev-server@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-plugin@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-loader@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开发环境基本配置就是这样子了。