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

这里使用的webpack@2.3.2 版本

安装webpack

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

cnpm init

执行后,一系列的回车后, 生成package.json文件 ,接着安装 webpack@2.3.2 和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开发环境基本配置就是这样子了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注