webpack 阶段回顾

webpack: 前端构建工具，支持模块化。经过loader,plugins对资源进行处理。

loader数组是从后往前执行顺序

1.js的编译： 
    babel-loader, babel-preset(告诉babel-loader按哪一个规范编译)

use:{
    loader:'babel-loader',
    options:{
        presets:[
            ['@babel/preset-env',{
              targets:{
                  browsers:['>1%']   //按浏览器市占率来
                  //chrome:'59'  //按特定浏览器来编译
              }  
            }]
        ]
    }
}

2.css的编译：  

rules:[
    {
        test:/\.less$/,
        use:[
            {
                loader:'style-loader'
            },
            {
                loader:'css-loader'
            },
            {
                loader:'less-loader'   //写最后面
            }  
        ]
    }
 ]

3.img的编译（css中的图片，js中的图片，html中的图片）具体总结在项目里，这里不贴代码了

4. html打包

//引入插件
var htmlWebpackPlugin = require('html-webpack-plugin')

//注册插件
plugins:[
    new htmlWebpackPlugin({
        filename:'index.html',     //保存文件的名字
        template:'./index.html',     //以哪一个为模板
        minify:{    //是个对象 而非boolean，由于这是插件，是给第三方插件的配置说明 
            collapseWhitespace:true
        },
        inject:true,     //false则不会自动引入js和css
        chunks:['app']    //是个数组，若是有多个入口文件，能够指定要的入口js
    })
]

4. webpack不一样环境配置

//告诉webpack配置文件和环境
webpack --config webpack.common.js --env development

策略不一样环境下的配置编写：

1. 编写一个开发环境下的配置文件

2. 编写一个生产环境下的配置文件

3. 在基础配置引入开发和生产配置

4. 判断env参数，合并对应的配置

  能够在package.json里的添加命令，就不用每次都敲 一长串了

"scripts":{
    "build": "webpack --env production  --config webpack.common.js",
    "dev":"webpack-dev-server --env development --config webpack.common.js"
}

webpack4 为了干掉配置，提供了个懒人办法

webpack --mode development   
webpack --mode  production

（webpack4把webpack-cli独立了， 因此要单独再安装下 npm install webpack-cli -D) ， webpack4的loader和optimize进行了较大的改动

module.loaders改成module.rules
module.loaders.loader改为module.loaders.use

webpack的打包流程： 

1. 读取配置文件
2. 注册内部插件与配置插件
3. loader编译
4. 组织模块
5. 生成最终文件导出

 

webpack代码分割及大小控制，抽空再总结下：)