webpack4学习(1)

首先安装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
})
]