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
}
]
