webpack实用小功能介绍


Posted in Javascript onJanuary 02, 2018

上一次分享了vue2-webpack3,大多都是一些基础的内容,本期继续分享一些webpack比较实用的功能

1.overlay

overlay属于devServer的属性,配置案例如下:

devServer: {
 overlay: {
  errors: true,
  warnings: true
 }
}

配置很简单,那它的作用是什么呢?overlay的作用是可以在浏览器打开的页面显示终端编译时产生的错误。通过配置该属性,以后在写代码的时候,编译如果出错了,我们就不需要打开终端看到底是什么报错了,可以直接在页面里看到错误,对于开发而言确实很方便。

2.require.ensure

相比较overlay,require.ensure可以的作用更加实用,上次讲的vue2-webpack3我们配置的是多页面的应用,但是如果是SPA应用呢?

我们最容易遇到的问题代码全部打包在一个js里面,导致这个js过于庞大,最终导致应用首次加载时等待时间过长,那么该怎么解决这个问题呢?require.ensure就是专门用来解决这个问题的。

该怎么使用?

使用起来也很简单,只要按照下面的写法来进行vue的router配置即可:

const Layout = require('../Layout')
const Home = r => require.ensure([], () => r(require('../home'), home)
export default [{
 path: '/',
 component: Layout,
 children: [{
  path: '',
 component: Home
 }]
}]

可以看到require.ensure有三个参数

第一个参数的作用是配置依赖列表,被依赖的模块会和当前模块打包到一起; 第二个参数是一个函数,将要单独打包的模块传入回调里; 第三个参数是chunkname,可用来配置js的文件名; 配置完了以后,当我们加载这个页面的时候,属于每个页面自己的代码部分,就会单独去加载了。

3.webpack-bundle-analyzer

这是一个webpack的插件,它的主要作用是用来分析我们模块打包的资源情况,非常的直观,也非常的实用,下面我们先看下它的效果图:

webpack实用小功能介绍 

那么该如何配置呢? 首先你得先install,然后配置如下:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins = [
 new BundleAnalyzerPlugin({
 // Can be `server`, `static` or `disabled`.
 // In `server` mode analyzer will start HTTP server to show bundle report.
 // In `static` mode single HTML file with bundle report will be generated.
 // In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
 analyzerMode: 'server',
 // Host that will be used in `server` mode to start HTTP server.
 analyzerHost: '127.0.0.1',
 // Port that will be used in `server` mode to start HTTP server.
 analyzerPort: 8888,
 // Path to bundle report file that will be generated in `static` mode.
 // Relative to bundles output directory.
 reportFilename: 'report.html',
 // Module sizes to show in report by default.
 // Should be one of `stat`, `parsed` or `gzip`.
 // See "Definitions" section for more information.
 defaultSizes: 'parsed',
 // Automatically open report in default browser
 openAnalyzer: true,
 // If `true`, Webpack Stats JSON file will be generated in bundles output directory
 generateStatsFile: false,
 // Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
 // Relative to bundles output directory.
 statsFilename: 'stats.json',
 // Options for `stats.toJson()` method.
 // For example you can exclude sources of your modules from stats file with `source: false` option.
 // See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
 statsOptions: null,
 // Log level. Can be 'info', 'warn', 'error' or 'silent'.
 logLevel: 'info'
 })
]

是不是很简单却很实用呢~

4.DllPlugin+DllReferencePlugin

在使用webpack开发的过程中,相信很多人都会觉得有时候项目启动编译时间等待太久了,为什么呢?因为当项目慢慢庞大起来的时候,我们依赖的模块越来越多,每次项目启动编译都需要全部编译打包,所以自然会导致编译时间偏长,那如何解决这个问题呢?

首先思路是这样的,一般node_modules文件中的依赖,基本上是不会去做改变的,所以没有必要每次都去进行打包,我们完全可以将这些依赖提前打包好,然后就可以一直使用了。

DllPlugin就是用来提前打包我们的依赖包的插件。DllPlugin分为两个插件,一个是DllPlugin,另一个是DllReferencePlugin。

首先DllPlugin的作用是用来提前打包好依赖,步骤如下:

新建一个vendor.js,用来引入所有我们依赖的模块:

import Vue from 'vue';
import ElementUI from 'element-ui';
import VouRouter from 'vue-router';

新建一个webpack.config.dll.js的配置文件,配置如下:

const path = require('path');
const webpack = require('webpack');
module.exports = {
 entry: {
  vendor: [path.resolve(__dirname, 'vendor')]
 },
 output: {
  path: path.resolve(__dirname, './dll'),
 filename: 'dll.[name].js',
 library: '[name]'
 },
 plugins: [
 new webpack.DllPlugin({
 path: path.join(__dirname, "./dll", "[name]-manifest.json"),
 name: "[name]"
 })
 ],
 resolve: {
 extensions: ['js']
 }

配置好了以后,就可以到终端里运行webpack --config webpack.config.dll.js了,然后就能在你的dist/dll目录下看到一个dll.vendore.js和一个vendor-manifest.json文件,到此DllPlugin提取依赖的作用就完成了。

下面是DllReferencePlugin的配置,这个配置更简单,找到项目原本的webpack.config.js文件,然后配置如下:

module.exports = {
 plugins: [
  new webpack.DllReferencePlugin({
   context: path.join(__dirname, "src"),
   manifest: require("./dll/vendor-manifest.json")
  })
 ]
}

这样就都配置好了,但是这样做还存在个问题,当你运行项目时,会提示:

You are using the runtime-only build of Vue...

大概的意思就是说因为你使用了vue的template,使用的vue版本不对,所以我在webpack.config.dll.js里面对vue做如下设置:

alias: {
 'vue$': 'vue/dist/vue.common.js'
}

否则会默认打包vue.runtime.common.js,正确的应该是打包vue.common.js这个文件。做了以上配置以后,本以为就OK了,但还是太天真,依旧还是报了一样的错误。

然后我到webpack.config.js里面做了同样的配置,结果就OK了。但是这会导致vue被打包了两份,所以暂时只能放弃在vendor内引入vue了,导致该问题的原因暂不明了。

Javascript 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
js最简单的双向绑定实例讲解
Jan 02 #Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 #Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 #Javascript
JS实现验证码倒计时的注册页面
Jan 02 #Javascript
使用socket.io实现简单聊天室案例
Jan 02 #Javascript
使用socket.io制做简易WEB聊天室
Jan 02 #Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 #Javascript
You might like
PHP 木马攻击防御技巧
2009/06/13 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
利用php输出不同的心形图案
2016/04/22 PHP
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
Python 异常处理实例详解
2014/03/12 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Python变量类型知识点总结
2019/02/18 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
优秀老师事迹材料
2014/02/05 职场文书
作文评语集锦
2014/12/25 职场文书
小学中等生评语
2014/12/29 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
地雷战观后感
2015/06/09 职场文书
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python