webpack详解

webpack是什么

现在的web应用都拥有着复杂的代码和一大堆依赖包，为了简化开发，也出现了很多好的应对措施：模块化可以让复杂的程序细化为小的文件，还有TypeScript、Sass、less这类预处理语言可以简化编写。但是这些方法都不能直接被浏览器识别，这时webpack这类工具就提供了帮助。

Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，将项目中的一些浏览器不能直接运行的文件进行转换，最终生成几个打包后的文件。
他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJs)、全局分析。

loader的作用

实现对不同格式的文件的处理，如将scss转换为css、将typescript转化为js，使其能够被添加到依赖中。
loader需要在webpack.config.js里单独用module进行配置。

常用loader：
babel-loader:把es6及以上语法转换为es5
css-loader,style-loader：解析css文件，能解释@import，url()，需要解析less就在后面加一个less-loader

Plugin的作用

用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程。

文件束chunk

webpack可以将几个JS的公共模块提取成一个chunk，需要借助一个commonChunkPlugin

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
    plugins: [
            new CommonsChunkPlugin({
                //minChunks: 3,
                name: "common-app.chunk",
                chunks: ["home", "detail", "list"]
            })
        ]

webpack-dev-server

这是webpack的一个插件，可以在本地开一个静态服务器作为本地开发使用，使用内存来存储开发环境下的打包文件，可以使用模块热更新。

模块热更新

可以使代码修改后不用刷新浏览器就可以更新

长缓存优化

浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output纵输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。通过NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。

Tree-shaking

指的是在打包过程中去除那些引入了却没有被用到的死代码。CSS和JS需要使用purify-css

npm run dev/npm run build

npm run dev是执行配置在package.json中的脚本build/dev-server.js
也就是在开发环境下启动项目
npm run build是执行配置在package.json中的脚本build/build.js
也就是打包文件，在生产环境下启动项目

使用方法

1.使用npm安装webpack

npm install -g webpack

2.npm初始化目录

cd my-project
npm init

这个过程需要填写一些信息，全部默认也可。
也可以使用各框架的脚手架直接生成一个项目。

3.配置webpack.config.js
配置入口和出口以及plugin

module.exports={
  entry:'./main.js',  //唯一入口文件
  output:{
    path:'dist/js',  //打包后文件存放地方
    filename:'bundle.js'  //文件名
  }
}

4.模块资源导入导出

module.exports = function() {}

这是将一个模块中的资源暴露出来以供其它模块使用的写法。这里是CommonJS规范，将一个函数暴露给了其他模块。
要使用别的模块暴露出来的资源，就需要用require引入：

const text = require('./hello.js');

5.打包
在命令行运行webpack即可自动打包项目。