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 曾几 ...
随机推荐
- meta 标签代码解决IE兼容问题,IE6,IE7,IE8,IE9,IE10(包括360的兼容模式)
最近做了一个项目,客户反映,在360下布局错位,远程调试了一下,发现客户使用的是360的兼容模式,然而我在自己的电脑上测试的时候是正常的(兼容模式也正常):简单研究了一下360的兼容模式,在360的兼 ...
- node.js+express+jade系列六:图片的上传
安装npm install formidable 先把文件上传到临时文件夹,再通过fs重命名移动到指定的目录即可 fs.rename即重命名,但是fs.rename不能夸磁盘移动文件,所以我们需要指定 ...
- AMD模块定义规范
AMD 即Asynchronous Module Definition,中文名是“异步模块定义”的意思.它是一个在浏览器端模块化开发的规范,服务器端的规范是CommonJS. 模块将被异步加载,模 ...
- Jenkins部署及邮箱配置
第一步:下载jenkins安装包,下载地址是https://jenkins.io/download/,下载通用的war文件即可,这个格式文件不论哪个操作系统都可运行: 第二步:jdk安装,最新的jen ...
- python-多线程(一)
一.Python中的线程使用: Python中使用线程有两种方式:函数或者用类来包装线程对象. 1. 函数式:调用thread模块中的start_new_thread()函数来产生新线程.如下例: ...
- 1_Command 游戏开发命令模式
A dead simple implementation looks like: ``` // simple void InputHandler::handleInput() { if (isPres ...
- codeforces 553A A. Kyoya and Colored Balls(组合数学+dp)
题目链接: A. Kyoya and Colored Balls time limit per test 2 seconds memory limit per test 256 megabytes i ...
- Java中常见的几个乱码问题以及解决方法
1.ajax--URL中的参数含中文,后台接受的参数出现乱码 解决方法: 第一步:在javascript中,对url进行两次编码 url = "http://localhost:8080/M ...
- 3.3 CCSprite 精灵详解
3.3.1 创建精灵常用的 4 种方式 (当然还有其他方式,只不过 这四种比较常用) //创建精灵常用的 4 种方式 CCSprite* spr1 = CCSprite::create(const c ...
- POJ1741 Tree(树的点分治基础题)
Give a tree with n vertices,each edge has a length(positive integer less than 1001).Define dist(u,v) ...