首先安装webpack:npm install webpack webpack-cli
编译ES6注意点
编译ES6用到的有：babel-loader,babel-preset-env,babel-polyfill等babel系列
需要注意的是安装babel-core和babel-loader这个2个的使用版本问题
babel-core （版本6）对应babel-loader的版本7，
babel-core后续改成@babel/core(7)对应babel-loader的8，混淆使用webapck打包会报错；
babel-loader配置中的opitons对相应的是外置配置.bablerc文件
基本的webpack.config.js介绍：
module.exports={
mode:"development",//打包模式，设置为production时webpack自动处理项目中为使用的代码等
entery:{
app:"./src/app.js"//项目入口文件设置
}，
output:{
//输出文件配置
publicPath:""//项目中资源文件等的引入路径配置
path:""//输出路径
filename:""//输出文件名
chunkFilename:""//打包代码块名
}，
module:{
rules:[]//配置loader规则
}
....
}
多页面提取公共代码
config.optimization={
minimize:true,//是否压缩代码
splitChunks:{ //根据不同的配置来分割出不同的bundle
chunks:"all"||"async"||"initial"//分割代码块
name:""//分割代码的js名称
minChunks:""//最小公共模块次数
cacheGroups:{ //缓存策略，默认可以覆盖外面的name等设置
test:""//正则匹配文件
priority :""//优先级
...
}
}
}
单页面代码分割
import(/*webpackChunkName:'test' */ "./test.js").then()
//或者使用
require.ensure()
css提取
使用到：extract-text-webpack-plugin插件
npm install extract-text-webpack-plugin@next --save-dev
var extractPlugin=require('extract-text-webpack-plugin');
rules:[
use:extractPlugin.extract({
fallback:{},
use:[]
})
]
plugin:[
new extractPlugin({
name:"",
allChunks:false
})
]
