webpack@3.6.0(3)-- 优化
本篇内容
- babel配置
- 打包调试
- 第三方资源引入
- 静态资源的集中输出
babel配置
cnpm i -D babel-core babel-loader babel-preset-es2015
//webpack.config.js
{
test:/\.js$/,
loader:'babel-loader',
options:{
presets:['es2015']
},
exclude:/node_modules/ //exclude-排除这个文件夹
}
或:根目录下新建.babelrc
{
'presets':['es2015']
}
//webpack.config.js
{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/ //exclude-排除这个文件夹
}
es6-8(常用)
cnpm i -D babel-preset-env
//改变.babelrc
{
'presets':['env']
}
打包调试
//webpack.config.js
module.exports={
devtool:'xxx', //4种模式
entry:{
main:'./src/main.js'
},
cheap-module-source-map // 生成对应的map文件,不包括列
eval-source-map //不生成单独的map,有性能跟安全性的问题,只能在生产环境中使用,有行,列
cheap-module-eval-source-map //不包括列
source-map //生成对应的map文件,打包速度最慢.包括行,列
根据环境的不同,打包不同的请求地址:
//webpack.config.js
//开发环境时
if(process.env.type=="dev"){ //node中的方法,接收参数
var webset={
publicPath:'http://192.168.1.1:8080/'
}
}else{
//线上环境
var webset={
publicPath:'http:/adoctors.cn:8080/'
}
}
//package.json
"scripts": {
"server": "webpack-dev-server --open",
"dev":"export type=dev&&webpack", //传值
"build": "export type=build&&webpack"
},
第三方资源引入
//前提时引用的包都已经下载好的
//main.js
import $ from 'jquery'; //这种方式引用,不管实际中用不用都会一块打包
//webpack.config.js --方法2
plugins:[
new webpack.ProvidePlugin({ //webpack自带插件,按需打包
$:'jquery'
})
]
推荐:单独抽离
//第1步
entry:{
entry:'./src/main.js',
jquery:'jquery'
}
//第2步
new webpack.optimize.CommonsChunkPlugin({
name:'jquery',
filename:'assets/js/jquery.min.js', //抽离到哪里
minChunks:2 //抽离成几个文件,最少2个
})
静态资源的集中输出
cnpm i -D copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin')
new CopyWebpackPlugin([
{
from: __dirname+ '/static'),
to: 'static', // dist/static
}
]
项目地址:https://github.com/adoctors/webpack-3.6.0-demo1
webpack@3.6.0(3)-- 优化的更多相关文章
- 浅谈webpack4.0 性能优化(转)
前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配.正因为零配置的webpack对项目本身提供的“打包”和“ ...
- webpack4.0打包优化策略整理小结
本文转载于:https://www.jb51.net/article/137449.htm 介绍了webpack4.0打包优化策略整理小结,分享给大家,具体如下: webapck4 新特性介绍-参考资 ...
- 通用PE工具箱 4.0精简优化版
通用PE工具箱 4.0精简优化版 经用过不少 WinPE 系统,都不是很满意,普遍存在篡改主页.添加广告链接至收藏夹.未经允许安装推广软件等流氓行为,还集成了诸多不常用的工具,令人头疼不已.那么今天给 ...
- WebPack实例与前端性能优化
[前端构建]WebPack实例与前端性能优化 计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给 ...
- Hexo-Next6.7.0主题优化
Hexo-Next6.7.0主题优化 效果预览:Next6.7.0主题个人博客 一.下载next主题 $ cd your-hexo-site $ git clone https://github.co ...
- 【原创】Webpack构建中hash的优化
背景: SPA的vue应用,采用webpack2构建,打包入口为main.js 输出:main模块打包成app.js,公共lib打包成vendor.js,公共样式打包成app.css,运行时依赖打包成 ...
- 【翻译】Webpack 4 从0配置到生产模式
查看原文 webpack 4 发布了! webpack 4 作为一个零配置的模块打包器 webpack 是强大的并且有许多独一无二的特点但是有一个痛点就是配置文件. 在中型到大型项目中为webpack ...
- Vue+Webpack之 代码及打包优化
本文重点介绍Vue单页面应用的优化手段: 异步加载 面切换时加loading特效 点击延迟 inline manifest 逻辑代码优化 依赖包体积优化 cdn引用 Vue代码优化 异步加载 所谓的异 ...
- 【前端构建】WebPack实例与前端性能优化
计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几 ...
随机推荐
- BZOJ 1965 [Ahoi2005]SHUFFLE 洗牌:快速幂 + 逆元
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1965 题意: 对于扑克牌的一次洗牌是这样定义的,将一叠N(N为偶数)张扑克牌平均分成上下两 ...
- dos命令行中不同磁盘的调转
windows下,dos中不同磁盘的跳转: 直接 盘符+回车: 如跳转到d盘: D:回车即可 : Microsoft Windows [版本 10.0.10586] (c) 2015 Microsof ...
- 带SoapHeader验证的WebServices
一般在项目中,制作的都是基于SOAP协议的webservices,其描述语言是WSDL.但是有时候在项目中,需要保证webservices的安全,需要对其进行进行验证,那么我们就要实现SoapHead ...
- WebForm 使用点滴。。。。
WebForm使用方式与WinForm很是相似,可控性非常高! 1.调用别的按钮事件: BtnSelect_Click(sender, e);
- 如何让DIV可编辑、可拖动
1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEdit ...
- Oracle学习笔记_03_单行函数
1.SQL函数: 单行函数.多行函数 单行函数: 操作数据对象 接受参数返回一个结果 只对一行进行变换 每行返回一个结果 可以转换数据类型 ...
- Android DOM解析XML方法及优化
在Android应用开发中,我们常常要在应用启动后从服务器下载一些配置文件,这些配置文件包含一些项目中可能用到的资源,这些文件很多情况下是XML文件,这时就要将XML下载到文件中保存,之后再解析XML ...
- freeMarker(十四)——XML处理指南之必要的XML处理
学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 1.基本内容 假设程序员在数据模型中放置了一个XML文档,就是名为 d ...
- js基础:关于Boolean() 与 if
最近面试比较多,但每次我问这个问题的时候,答出来的同学并不多 var a = 0; if( a) { alert(1); } 这个问题有部分人会答alert(1), 有些人会答不执行. 结果是不执 ...
- bzoj 1132: [POI2008]Tro 计算几何
题目大意: 平面上有N个点. 求出所有以这N个点为顶点的三角形的面积和 N<=3000 题解 我们看到了n的范围,于是我们就知道这一定不是一个线性算法 所以我们尝试枚举三角形的一个点,那么我们现 ...