本篇内容

  • 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)-- 优化的更多相关文章

  1. 浅谈webpack4.0 性能优化(转)

    前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配.正因为零配置的webpack对项目本身提供的“打包”和“ ...

  2. webpack4.0打包优化策略整理小结

    本文转载于:https://www.jb51.net/article/137449.htm 介绍了webpack4.0打包优化策略整理小结,分享给大家,具体如下: webapck4 新特性介绍-参考资 ...

  3. 通用PE工具箱 4.0精简优化版

    通用PE工具箱 4.0精简优化版 经用过不少 WinPE 系统,都不是很满意,普遍存在篡改主页.添加广告链接至收藏夹.未经允许安装推广软件等流氓行为,还集成了诸多不常用的工具,令人头疼不已.那么今天给 ...

  4. WebPack实例与前端性能优化

    [前端构建]WebPack实例与前端性能优化   计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给 ...

  5. Hexo-Next6.7.0主题优化

    Hexo-Next6.7.0主题优化 效果预览:Next6.7.0主题个人博客 一.下载next主题 $ cd your-hexo-site $ git clone https://github.co ...

  6. 【原创】Webpack构建中hash的优化

    背景: SPA的vue应用,采用webpack2构建,打包入口为main.js 输出:main模块打包成app.js,公共lib打包成vendor.js,公共样式打包成app.css,运行时依赖打包成 ...

  7. 【翻译】Webpack 4 从0配置到生产模式

    查看原文 webpack 4 发布了! webpack 4 作为一个零配置的模块打包器 webpack 是强大的并且有许多独一无二的特点但是有一个痛点就是配置文件. 在中型到大型项目中为webpack ...

  8. Vue+Webpack之 代码及打包优化

    本文重点介绍Vue单页面应用的优化手段: 异步加载 面切换时加loading特效 点击延迟 inline manifest 逻辑代码优化 依赖包体积优化 cdn引用 Vue代码优化 异步加载 所谓的异 ...

  9. 【前端构建】WebPack实例与前端性能优化

    计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几 ...

随机推荐

  1. BZOJ 1965 [Ahoi2005]SHUFFLE 洗牌:快速幂 + 逆元

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1965 题意: 对于扑克牌的一次洗牌是这样定义的,将一叠N(N为偶数)张扑克牌平均分成上下两 ...

  2. dos命令行中不同磁盘的调转

    windows下,dos中不同磁盘的跳转: 直接 盘符+回车: 如跳转到d盘: D:回车即可 : Microsoft Windows [版本 10.0.10586] (c) 2015 Microsof ...

  3. 带SoapHeader验证的WebServices

    一般在项目中,制作的都是基于SOAP协议的webservices,其描述语言是WSDL.但是有时候在项目中,需要保证webservices的安全,需要对其进行进行验证,那么我们就要实现SoapHead ...

  4. WebForm 使用点滴。。。。

    WebForm使用方式与WinForm很是相似,可控性非常高! 1.调用别的按钮事件: BtnSelect_Click(sender, e);

  5. 如何让DIV可编辑、可拖动

    1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEdit ...

  6. Oracle学习笔记_03_单行函数

    1.SQL函数: 单行函数.多行函数 单行函数:       操作数据对象       接受参数返回一个结果       只对一行进行变换       每行返回一个结果       可以转换数据类型  ...

  7. Android DOM解析XML方法及优化

    在Android应用开发中,我们常常要在应用启动后从服务器下载一些配置文件,这些配置文件包含一些项目中可能用到的资源,这些文件很多情况下是XML文件,这时就要将XML下载到文件中保存,之后再解析XML ...

  8. freeMarker(十四)——XML处理指南之必要的XML处理

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 1.基本内容 假设程序员在数据模型中放置了一个XML文档,就是名为 d ...

  9. js基础:关于Boolean() 与 if

    最近面试比较多,但每次我问这个问题的时候,答出来的同学并不多 var a = 0; if( a) { alert(1); } 这个问题有部分人会答alert(1),   有些人会答不执行. 结果是不执 ...

  10. bzoj 1132: [POI2008]Tro 计算几何

    题目大意: 平面上有N个点. 求出所有以这N个点为顶点的三角形的面积和 N<=3000 题解 我们看到了n的范围,于是我们就知道这一定不是一个线性算法 所以我们尝试枚举三角形的一个点,那么我们现 ...