本篇内容

  • 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. spring boot: 在maven中装入springframework框架

    1.在maven 的pom.xml中加入 <dependency> <groupId>org.springframework</groupId> <artif ...

  2. Memcached 分布式缓存实现原理简介

    摘要 在高并发环境下,大量的读.写请求涌向数据库,此时磁盘IO将成为瓶颈,从而导致过高的响应延迟,因此缓存应运而生.无论是单机缓存还是分布式缓存都有其适应场景和优缺点,当今存在的缓存产品也是数不胜数, ...

  3. Java集合类--->入门上篇

    最近我又在研究Java语言,这是第五次还是第六次学习Java的集合类,你也许会惊讶为什么这么多次?哈哈,因为之前的我没有记录下来,忘记了,当然最主要还是觉得自己毅力不够,没有坚持.那么,这次我将换一种 ...

  4. 一个用 vue 写的树层级组件 vue-ztree

    最近看了大神的关于vue-ztree的博客,感觉很赞,于是摘抄下来,方便自己学习,机智girl,哈哈哈O(∩_∩)O 最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 z ...

  5. hdu-5653 Bomber Man wants to bomb an Array.(区间dp)

    题目链接: Bomber Man wants to bomb an Array. Time Limit: 4000/2000 MS (Java/Others)     Memory Limit: 65 ...

  6. linux命令学习笔记(60):scp命令

    scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行 拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务 ...

  7. bzoj 2969: 矩形粉刷 概率期望

    题目: 为了庆祝新的一年到来,小M决定要粉刷一个大木板.大木板实际上是一个W*H的方阵.小M得到了一个神奇的工具,这个工具只需要指定方阵中两个格子,就可以把这两格子为对角的,平行于木板边界的一个子矩形 ...

  8. 【Lintcode】363.Trapping Rain Water

    题目: Given n non-negative integers representing an elevation map where the width of each bar is 1, co ...

  9. Exchange邮箱设置,android手机和mac book

    假设 用户名:abc 密码:123 公司名是:qq 一 android手机: 1 输入地址:abc@qq.com 2 密码:123 3 协议:EXCHANGE 点击下一步 用户名:abc 域名:qqc ...

  10. 洛谷 2822 组合数问题——质因数有关的dp

    题目:https://www.luogu.org/problemnew/show/P2822 发现 k 都是一样的.所以可以设dp[ i ][ j ]表示 n<=i,m<=j 的答案.发现 ...