webpack打包神器（一）（再看webpack）

之前已经记录过一些零零碎碎的webpack知识点，今天又温习一遍

1.先来说模块化

就是将一个复杂的系统分解成若干个系统方便编码

2.自动化构建

构建的目的就是将源代码转换发布为线上可以执行的代码，内容包含
-代码转化：typescript转化为js。less转换为css
-文件优化: 压缩js css html代码，压缩合并图片
-代码分割：提取多个页面的公共代码，提取首屏不需要执行的代码让其异步加载
-模块合并：在采用模块化的项目中会有很多个模块和文件，需要构建功能吧模块分类合并成一个文件
-自动刷新： 监听本地代码的变化，自动重构，刷新浏览器
-代码校验： 检查代码是否符合规范
-自动发布：更新完代码之后，自动构建出线上代码并传输给发布系统

3.本地安装

初始化模块
npm init -y   -会生成package文件
npm install webapck webapck-cli -D  ->生成开发依赖

4.执行webapck命令

在node 8.+版本以上 webapck4.版本以上 会有一个命令npx
执行npx webpack 会将项目下js文件开始进行打包--会生成dist文件夹
    解释一下：npx命令可以直接运行node-modules/.bin目录下的命令
1. npx webpack --mode development   开模模式下进行打包，开发模式下代码不会进行压缩
    打包生成的文件是main.js

5. webpack配合文件基本结构

因为是基于node的 遵循commonjs规范
 let path = require('path')
module.exports={
    entry:'', // 入口  entry也可以写成数组['文件路径'，'文件路径']
    output:{
        filename:'build.js',
        path:path.resolve('./build')
    }, // 出口
    devServer:{} // 开发服务器
    module:{},// 模块配置
    plugins:[], // 插件的配置
    mode: 'development', // 模式
    resolve:{} // 配置解析

}

6.webpack中开发服务器的配置 webpack-dev-server

基于上边5devServer对象里边-进行webpack开发服务器的配置，开发环境在内存中打包
 devServer:{    
    contentBase: './build', //以这个文件夹为静态目录
    port:3000,
    compress: true, // 服务器压缩
    open:true // 自动打开浏览器
 }

运行npm run sart--需要在package.json中进行配置
'scripts':{
    "start":"webpack-dev-server"
}

7.插件将html打包到build下可以自动引入生产的js文件（html-webpack-pl  ugin）

插件用的时候首先要安装
之后要以node的方法引用--引入就是相当于引入了一个函数
1.var HtmlWebpackPlugin = require('html-webpack-plugin')
2.在上边5代码中plugins:[]中进行实现
plugins:[
    new HtmlWebpackPlugin({
        temlate:'html文件的路径',
        title: '', // 配置html中title 
        hash:true, // 引用js文件的时候中加上hash字符串 用于清除缓存用
        minify:{
            removeAttributeQuotes:true, // 删除属性的双引号
            collapseWhitespace:true // 代码成一行    
        }
    })
]

上边关于html中每次引用文件时候，为了清除缓存的影响，两种方式
 1： 就是HtmlWebpackPlugin插件中进行hash:true配置
 2： 在输出文件中
    output:{
        filename: 'build.[hash:8].js' // 8是示例 随机位数
    }
 

8.插件（clean-webapck-plugin）--每次打包之前进行js文件的清除

1.var CleanWebpackPlugin = require('clean-webpack-plugin')
2.plugins:[
  new CleanWebpackPlugin([./build]) // 进行文件目录配置 
]

9.配置多文件多入口打包

上边说的是单文件入口示例，webapck也可以进行配置多文件多出口配置
比如 有两个js文件
a.js b.js
一个模板html文件
向打包生成a.html文件引入包的是a.js,生成b.html引入b.js文件

需要改动的代码示例
input:{                   ========input可以是一个字符串，可以是一个对象，也可以是一个数组
    a.js: 'js文件路径',
    b.js：'js文件路径'
}
output:{
    filename:'[name].[hash:8].js',  ---根据入口文件生成同名的出口js文件
    path:path.resolve('./build')
}
plugins:[
    new HtmlWebpackPlugin({
        filename: 'a.html', // -------》命名输出的html文件名
        temlate:'html文件的路径',
        title: '', // 配置html中title 
        hash:true, // 引用js文件的时候中加上hash字符串 用于清除缓存用
        chunks:['a'] --------------->和entry文件名对应
    }),
    new HtmlWebpackPlugin({
        filename:'b.html',
        temlate:'html文件的路径',
        title: '', // 配置html中title 
        hash:true, // 引用js文件的时候中加上hash字符串 用于清除缓存用
        chunks:['b'] --------------->和input文件名对应
    })
]

10.热更新插件 是webapck自带的功能

var webapck = require('webapck')
plugins:[
    new webapck.HotModuleReplacementPlugin()
]
devServer:{
    配置hot:true
}

11.一些css加载器

css-loader 处理css中路径引用等问题 
style-loader 动态把样式写入css 
sass-loader scss编译器 
less-loader less编译器 
postcss-loader scss再处理


下边是配置的写法示例
module:{
    rules:[
        test:/\.css$/,use:[
            {loader:style-loader},
            {loader:css-loader}
        ]
    ]
}

12.话说loader和plugin是比较容易混淆的概念

对于loader，它就是一个转换器，将A文件进行编译形成B文件，这里操作的是文件
    比如将A.scss或A.less转变为B.css，单纯的文件转换过程；
对于plugin，它就是一个扩展器，它丰富了wepack本身，
    针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听            
    webpack打包过程中的某些节点，通过对节点的监听，从而找到合适的节点对文件做适当的处理。

今天就先到这 ，下篇接下来有时间继续，以webapck.config.js文件中进行配置进示例