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 相关文章推荐
Expandable "Detail" Table Rows
Aug 29 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
layui实现动态和静态分页
Apr 28 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
Ajax实现页面无刷新留言效果
Mar 24 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网页显示各种语法错误
2013/09/23 PHP
php解析url的三个示例
2014/01/20 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
Python格式化输出%s和%d
2018/05/07 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Python 线程池用法简单示例
2019/10/02 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
大三学习计划书范文
2014/05/02 职场文书
党课培训心得体会
2014/09/02 职场文书
考察邀请函范文
2015/01/31 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python