登录  /  注册
首页 > web前端 > js教程 > 正文

怎么使用 webpack 构建 vue.js 单页应用

伊谢尔伦
发布: 2016-11-21 13:09:39
原创
1427人浏览过

  在现在正在开发的项目中,为了实现前后端分离开发,决定使用刚刚发布不久的 vue.js 2.0 和 koa 2.0 来进行开发,深入的使用了webpack作为前端打包工具。为了更好的掌握,打算通过练习来加强对webpack的理解。接下来还会针对开发中相关的技术,做深入的练习,并且写一系列文章。

2019.jpg

  本文主要目的是对项目开发和自己练习中对webpack的使用,做一个总结。介绍开发vue.js单页面前端应用时,如何使用webpack来打包。本文同时也是之前react系列文章的延续。

  作为一个完整的Demo,系列文章中的完整项目,会实现一个文件上传和管理的单页面Web应用

  1 安装依赖包

  项目中使用了vue.js,webpack,gulp,还有饿了么开源的elementUI,因为使用了es2015,所以还需要引入babel将es6的js代码转换成es5。

  必须用到的依赖如下    

"dependencies": {
    "babel-core": "^6.18.2",
    "babel-preset-es2015": "^6.18.0",
    "config": "^1.24.0",
    "element-ui": "^1.0.0",
    "es6-promise": "^4.0.5",
    "vue": "^2.0.5",
    "vue-router": "^2.0.1"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-loader": "^6.2.7",
    "vue-loader": "^9.8.1",
    "style-loader": "^0.13.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "gulp": "^3.9.1",
    "webpack": "^1.13.3",
  },
登录后复制

此外 gulp-cli 、 webpack 、 babel-cli 最好使用全局安装, npm install -g webpack ,就可以在命令行下方便的使用命令。此外npm的安装和下载速度也是一个饱受诟病的问题,为了提高安装依赖包速度,可以安装cnpm或者yarn,目前我自己使用的是cnpm。

  2 webpack配置文件

  安装完依赖包之后,就可以直接使用webpack命令进行打包,通过webpacke.config.js配置文件,指挥webpack需要按照什么规则进行构建。

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: "./client/main.js",
    resolve: {
        extensions: ['', '.js', '.vue', '.scss','.css'],
    },
    output: {
        path: path.join(__dirname, "./build/assets/"),
        filename: '[name].[chunkhash:8].js',
        chunkFilename: '[id].js',
        publicPath: '/assets/',
    },
    module: {
        loaders: [
            { test: /\.vue$/, loader: 'vue'},
            {
                test: /\.js$/,
                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-API\//,
                loader: 'babel'
            }
        ]
    },
    plugins:[
        new webpack.optimize.CommonsChunkPlugin({
            names: ['bundle']
        }),
    ]
};
登录后复制


  说明:

  entry:入口点,webpack会从入口点设置的js文件开始对项目进行构建,过程中,所有入口点通过import或者require依赖的包,都会被打包到output中制定的文件和路径;

  output:中设置打包好的文件的输出路径还有文件名;

  module:中主要是loaders,loaders是webpack进行打包的解析器,css、vue、babel、scss都需要用npm安装相应的loader,webpack才能对该格式的文件进行解析和处理;

  plugins:是一些webpack的打包插件,跟解析的语言无关,用来辅助构建,提供丰富的附加功能。

  3 对文件进行解析

  在从entry开始解析依赖的模块过程中,webpack支持css、sass还有各种使用到的外部字体文件,webpack本身并没有内置所有格式的处理能力,而是通过安装配置不同的loader实现,根据项目的实际需要,引入对应的loader,webpack就能解析并打包不同的应用。

  将es6代码编译成es5,也是安装babel-loader来实现的;要解析vue.js将template/script/style放在一个文件中的语法,也需要vue-loader。

  通过使用style-loader、css-loader、sass-loader就可以让webpack具备解析scss文件的能力。如下面的示例中所示,loader的语法可以有多种写法:

loaders: [
    { test: /\.vue$/, loader: 'vue'},
    {
        test: /\.css$/,
        loader: "style!css"
    },
    {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
    },
    {
        test: /\.js$/,
        exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
        loader: 'babel'
    },
    {
        test   : /\.(ttf|eot|svg|svg|woff|woff(2))(\?t\=[0-9]+)?$/,
        loader : 'file'
    }
]
登录后复制

 4 自定义打包规则

  根据实际的项目需要,结合使用一些webpack插件,就可以实现强大的功能,不需要另外使用gulp或者grunt。

  4.1 生成hash指纹

  为了实现前端静态资源的增量更新,使用webpack自带的功能,为bundle文件生成hash指纹,通过在output中设置生成的文件名的规则,就可以生成带hash指纹的bundle文件。示例如下:

output:{
  ...
  //filename: '[name].[hash:8].js',
  filename: '[name].[chunkhash:8].js',
  //filename: '[name].[contenthash:8].js',
  ...
}
登录后复制

 webpack提供了hash/chunkhash/contenthash三种生成生成规则; [hash:8] 中的8是hash的位数。

  hash:根据编译时资源对应的编译进程计算hash值

  chunkhash:根据模块内容计算hash值

  contenthash:根据文件的内容计算hash值

  4.2 将独立的js依赖包,单独打包成vendor

  如果项目中使用到jquery、bootstrap、fetch或者其他不支持require的js文件,可以通过webpack,将这些文件打包到一个单独的vendor文件中,优化静态文件的部署加载。

这个操作是通过在entry中进行配置实现的,使用到了CommonsChunkPlugin插件,作为不同的模块来打包;配置如下:

...

entry: {

bundle: ['./client/main.js'],

// 规则跟require引用时一致

vendor: ['whatwg-fetch','jquery']

},

...

plugins:[

new webpack.optimize.CommonsChunkPlugin({

names: ['bundle','vendor']

}),

]

...

复制代码


  4.3 将样式打包成独立的css文件

  同样是因为部署的需要,我们可以使用 ExtractTextPlugin 插件,将引用到的样式打包成单独的css或其他样式文件;同样可以生成hash指纹。

...
module: {
    loaders: [
        ...
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        },
        {
            test: /\.scss$/,
            loaders: ExtractTextPlugin.extract("style-loader", "css-loader","sass-loader")
        }
        ...
    ]
},
...
plugins:[
    new ExtractTextPlugin("[name].[contenthash:8].css", {
        allChunks: true
    }),
]
...
登录后复制

 4.4 在html文件中引入带hash指纹的bundle文件

  最后我们需要类似gulp-rev的功能,自动在html文件中,引入打包编译好的带hash指纹的bundle和vendor文件;这个过程可以由webpack自动完成,使用的是 HtmlWebpackPlugin 插件。如果需要对js文件进行压缩,可以使用 UglifyJsPlugin 插件,插件配置如下:

plugins:[
    ...
    new HtmlWebpackPlugin({
        title: 'My App',
        template: 'index.html',
        filename: '../index.html'
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),
]
登录后复制

 5 配合gulp使用

  除了使用之前的gulp-webpack插件,还可以直接在gulp中require('webpack')的方式,来配合gulp使用webpack。配置比较简单

webpack(require("./webpack.config.js"), function(err, stats) {
    if(err) throw new gutil.PluginError("webpack:build", err);
    gutil.log("[webpack:build]", stats.toString({
        colors: true
    }));
    callback();
});
登录后复制

6 源代码

  最后,整个项目的源代码在 github 上;稍后的其他文章,会跟项目同时更新。

// 使用gulp调用webpack打包,打包好的代码在build目录下
npm run build 
// 运行有watch自动刷新触发webpack编译的静态服务器
// http://localhost:3333
npm run dev
登录后复制
智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号