本篇内容

  • 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. meta 标签代码解决IE兼容问题,IE6,IE7,IE8,IE9,IE10(包括360的兼容模式)

    最近做了一个项目,客户反映,在360下布局错位,远程调试了一下,发现客户使用的是360的兼容模式,然而我在自己的电脑上测试的时候是正常的(兼容模式也正常):简单研究了一下360的兼容模式,在360的兼 ...

  2. node.js+express+jade系列六:图片的上传

    安装npm install formidable 先把文件上传到临时文件夹,再通过fs重命名移动到指定的目录即可 fs.rename即重命名,但是fs.rename不能夸磁盘移动文件,所以我们需要指定 ...

  3. AMD模块定义规范

    AMD 即Asynchronous Module Definition,中文名是“异步模块定义”的意思.它是一个在浏览器端模块化开发的规范,服务器端的规范是CommonJS.   模块将被异步加载,模 ...

  4. Jenkins部署及邮箱配置

    第一步:下载jenkins安装包,下载地址是https://jenkins.io/download/,下载通用的war文件即可,这个格式文件不论哪个操作系统都可运行: 第二步:jdk安装,最新的jen ...

  5. python-多线程(一)

    一.Python中的线程使用: Python中使用线程有两种方式:函数或者用类来包装线程对象. 1.  函数式:调用thread模块中的start_new_thread()函数来产生新线程.如下例: ...

  6. 1_Command 游戏开发命令模式

    A dead simple implementation looks like: ``` // simple void InputHandler::handleInput() { if (isPres ...

  7. 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 ...

  8. Java中常见的几个乱码问题以及解决方法

    1.ajax--URL中的参数含中文,后台接受的参数出现乱码 解决方法: 第一步:在javascript中,对url进行两次编码 url = "http://localhost:8080/M ...

  9. 3.3 CCSprite 精灵详解

    3.3.1 创建精灵常用的 4 种方式 (当然还有其他方式,只不过 这四种比较常用) //创建精灵常用的 4 种方式 CCSprite* spr1 = CCSprite::create(const c ...

  10. POJ1741 Tree(树的点分治基础题)

    Give a tree with n vertices,each edge has a length(positive integer less than 1001).Define dist(u,v) ...