[email protected]（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