webpack进阶
来源:互联网 发布:multisim数据库 编辑:程序博客网 时间:2024/06/07 11:57
先来看看最基础的webpack配置:
var path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }}
在index.js中引入了lodash库:
src/index.js:
import _ from 'lodash'; function component() { var element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());
打包之后,只会生成一个bundle.js,这样的话,每次若要加载资源文件,浏览器都会加载根本不会改动的lodash库,这样很低效。
由于如果每次去访问浏览器,浏览器都重新下载资源,由于网络获取资源可能很慢,可能页面久久加载不出来,低效且不友好,故浏览器会缓存资源,以避免每次访问都通过网络去获取资源。
但是,由于浏览器缓存,又会出现新的问题,如果我们部署版本时不更改资源的文件名,浏览器可能认为它没有更新,就会使用它的缓存版本。
这样我们就需要解决两个问题:第一,分离打包文件。第二,解决缓存问题。
const path = require('path');const webpack = require('webpack'); module.exports = { entry: { common: ['lodash'], app: './src/index.js' }, output: { filename: '[name].[hash].js', path: path.resolve(__dirname, 'dist') }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'common' // 指代index.js引入的lodash库 }) ]}
主要变动:
- 添加插件:CommonsChunkPlugin,提取引入的库,并且更名,实现代码分离。
- 输出上在名字上加了hash,每次打包后,hash值都不一样解决了浏览器缓存的问题。
结果:index.js打包为app.[hash].js,index.js引入的lodash打包为common.[hash].js。这样解决了浏览器缓存问题和实现了静态资源代码和源代码的分离,但是新的问题又出现了。
阅读全文
0 0
- 进阶webpack
- webpack进阶
- webpack进阶
- webpack进阶构建项目
- 进阶篇 react + webpack 配合
- webpack进阶构建项目(一)
- webpack进阶之loader篇
- webpack进阶之loader篇
- 从头到尾讲Webpack-进阶篇
- react-redux-webpack进阶实战(含教程和源码)..
- Vue笔记二:进阶[译]用Webpack构建Vue
- WebPack
- webpack
- webpack
- webpack
- webpack
- Webpack
- webpack
- 查询数据表中某字段值是否有多条记录相同的sql语句
- 【C++】 LeetCode 87. Scramble String
- null
- 2017 多校训练第三场 HDU 6066 RXD's date
- HDU
- webpack进阶
- Tornado框架知识系列之一
- null
- 为什么你该开始学习编程了?
- 0801-Java数据类型
- 网页中加入当前天气(附代码)
- Linux个人小记
- hdu 6066-RXD's date
- 经典技术书籍