webpack@3.6.0（3）-- 优化
2024-08-28 23:45:04
本篇内容
- 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
最新文章
- Intent
- DbContext 和ObjectContext两者的区别
- uva 10129 play on words——yhx
- 关于xampp使用不同端口的虚拟机
- block 实现原理详解（一）
- HDU-4651 Partition 整数拆分,递推
- JavaScript中判断对象类型的种种方法
- ORACLE搭建Stream过程中报错【error收集】
- TCP的拥塞控制（转载）
- java核心技术学习笔记之一程序设计概述
- uva 305 Joseph
- zepto学习之路--数组去重和原生reduce
- mysql强制索引和禁止某个索引
- #1 爬虫：豆瓣图书TOP250 「requests、BeautifulSoup」
- 记一次msyql导入导致的问题
- 解决Table不继承父节点的属性的方法
- Eclipse debug 断点不能调试 ，Eclipse Unable to install breakpoint in 解决办法
- my stackoverflow
- 第三百七十五节，Django+Xadmin打造上线标准的在线教育平台—创建课程机构app，在models.py文件生成3张表，城市表、课程机构表、讲师表
- PHP5.3以上版本使用pthreads PHP扩展真正支持多线程