webpack
文章平均质量分 82
「已注销」
这个作者很懒,什么都没留下…
展开
-
webpack01 简介
什么是webpackWebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用与gulp/grunt的区别Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得...原创 2018-07-09 09:58:09 · 225 阅读 · 0 评论 -
webpack02 优化第三方库的打包性能
在引入第三方的库之后使用webpack打包时,默认会将这些第三方的库重新打包,但是实际上需要重新打包的只有业务代码,这些第三方库是完全不用重新打包的,所以需要对这个过程进行优化。1 externalsWebpack可以配置externals来将依赖的库指向全局变量,从而不再打包这个库,比如对于React:import React from 'react';如果你在Webpa...原创 2018-07-09 09:58:37 · 1019 阅读 · 0 评论 -
构建工具03 Webpack模块热重载(HMR)
使用webpack-dev-server 实现的Hot Moudle Replacement(HMR)让我们在开发时修改代码并保存后,不必手动刷新浏览器,而是让浏览器通过新的模块替换老的模块。这样可以让我们在保证当前页面状态的前提下,让新的代码生效,就如同在Chrome的控制台修改CSS样式一样。原创 2018-07-09 09:58:59 · 2381 阅读 · 0 评论 -
webpack04 resolve
resolve是webpack的配置项中一个比较重要的属性,主要用来配置模块如何解析。例如在ES2015中调用import 'lodash',resolve能够对webpack查找lodash的方式进行修改resolve.alias创建import或者require的别名,来确保模块引入更简单,最常见的就是用@来代替scr目录:module.exports = { re...原创 2018-07-09 09:59:40 · 1051 阅读 · 0 评论 -
webpack05 多入口文件页面打包配置
大多数情况,我们使用webpack打包单页面应用,有的时候也会遇到多页面的项目单入口配置一般情况下的配置模板如下:module.exports = { entry: {}, output: {}, module: {}, plugins: [], devServer: {}}entry:配置入口文件的地址,可以是单一入口,也可以是多入口;outpu...原创 2018-07-09 10:00:00 · 1979 阅读 · 0 评论