webpack（打包神器）简单入门

webpack具有一般的构建工具具有的功能：

    1.代码转换：例如 scss编译为css ，typescript编译为js等

    2.文件压缩,文件优化。

    3.代码分割.：提取公用的代码。首屏展示的时候不需要的代码，需要的时候才执行加载，懒加载的过程。

    4.模块合并。

    5.自动刷新。6.代码校验。

webpack一些核心的概念

    1.Enter：打包的入口-进行入口文件的配置

    2.Output:出口,打包生成的bundle.js文件

    3.Loader:模块转换器-将非js文件转换为js文件。

    4.Plugin插件：打包过程中特定的时间插入特定功能的代码。

    5.Module模块：默认只识别js模块，如果是其他的，需要对应的loader转换为js文件。

    6.Chunk（代码块）--打包生成的文件叫做chunk文件

    7两种环境——开发环境和生产环境

全局下载webpack之后-查看webpack版本命令：webpack-v 

当前项目文件夹下 执行webpack命令之后-进行打包

基本的命令(命令指定入口文件和出口文件)示例--webpack src/index.js dist/bundle.js

一般需要配置文件 webpack.config.js文件----如果有配置文件的话 执行webpack 会自动找配置文件执行自动化打包

npm脚本的配置及webpack基本命令使用

packjson文件中scripts命令配置-

“build”:“webpack --diaplay-modules”-显示隐藏的打包文件

“build”:“webpack --diaplay-modules  --config webpack.config2.js”-显示隐藏的打包文件并指定配置文件名

 “start”: "webpack-dev-server --open"    --开发环境打包并在浏览器自动打开

    "server": "node server.js"   -配置开发服务器 运行执行npm run server

基础loader使用示例：

安装 npm install --save- dev css-loader style-loader   作用加载css文件--其中css-loader将css转换为js 后者是插入到html中

file-loader --加载图片文件的

xml-loader --加载xml文件的

webpack配置

enter output module plugins resolve devtools devServer

module 中配置 rules[{正则，一个或者多个loader}]---多个loader的话 如果有先后执行顺序的话后边的是先执行的

plugin中配置各种plugin插件扩展webpack的功能

devtools ：“inline-source-map”---开启source map 功能 或者配置为 “cheap-module-eval -source-map”

                   一般情况下是在开发环境下开发，生产环境下不开启

devServer:{

    contnetBase:"./dist",

    port: 8080 //默认是8080端口

}

多入口打包生产多个bundle

多入口多出口文件配置示例：

entry:{

    app:"./src/index.js",

    print:"./src/print.js"

}

output:{

    filename:"[name].bundle.js", ---name是变化的数据和entry是对应的

    path:path.resolve(__filename,"dist")

}

常用的plugin插件

常用的plugin插件：不是webpack内部的插件的话 需要进行require进行引入

    html-webpack-plugin ---生成html页面

    clwan-webpack-plugin ---清除指定文件夹

    uglifyjs-webpack-plugin --插件压缩代码移除js文件中引用的但没有用到的代码文件  -tree-shaking

示例：

plugins:[

     new CleanPlugin(["dist"])       ,----指定清除的文件夹

     new  HtmlPlugin({

         template: index.html --指定生成html的模板

        title: "mingcheg" ---指定生成html的title

    })   

 ]

source-map 代码调试映射

1.webpack 的watch 模式

2.webapck-dev-server 开发服务器

3. express webpack-dev-server 可自定义配置server模式

目的:方便调试，映射到反映的问题，知道代码是在哪一行执行的，本质上就是一个信息文件，存着打包文件与原文件之间的映射关系。

开发模式是在内存中打包 npm install --save -dev  webpack-dev-server   开发服务器：特点是在内存中打包，内部实际上用了监视模式，如果配置的话，本地内存中打包并具有live-reload自动编译打包的作用

webpack-de-server内部配置比较固定，不方便自己配置的便捷性，引入了express webpack-dev-middleware中间件

安装 npm install --save-dev express webpack-dev-middleware     express+开发中间件

根据api进行一个server.js 文件配置--在script文件中进行配置 "server":"node-server.js"   运行时执行npm run  server

热膜替换（HMR）---应用于开发环境

只改变更新的内容--只对改变的内容进行服务器端的编译打包---更加方便的进行样式的调整

开启热模替换   和live-reload 的区别的是  “替换”“重新打包编译”

devServer:{contentBase: "./dist",hot:true} ----开启热膜替换

同时在plugins指定配置hmr插件  示例：new webapck.HotModuleReplacementPlugin()   --引入hmr插件

下边的一些插件 将会继续更新