你了解Webpack吗？

核心概念

Webpack的核心概念大致分为四个：入口、出口、loader、插件，是一个打包模块化js的工具，专注构建模块化项目。

是一个模块打包器，强调模块化方案

打包的原理

把所有的依赖打包成一个bundle.js,然后通过代码分割单元片段并按需加载

1、入口

module.exports = {    entry: './src',  //单入口    // or    entry: [        './src', //多入口        '/src2',    ],    // or    entry: {        main: './src', //对象写法的单入口简写    }    //or    entry: {        app: './src/index.js', //对象写法的第三方库写法        vendors: './src/script/moment.js'    }    // or    entry: {        page1: './src/page1.js',        page2: './src/page2.js',        page3: './src/page3.js',    }    }

其实入口很简单

2、出口 output

module.exports = {    /*    output接受对象属性，参数为    filename: 打包后的文件名    path: 打包后所需导出的路径    */    output: {        filename: 'index.js',        path: path.resolve(__dirname, '/dist')    }    // or 多入口    entry: {        app: './src/index.js',         vendors: './src/script/moment.js'    },    output: {        filename: '[name].js',        path: __dirname + 'dist'    }}

3、Loader 加载器主要用于源代码进行转换

用于记载某些资源文件，因为本身只能打包common.js规范的js文件,对于其他资源如css，img等，是没有办法加载的，这时就需要对应的loader将资源转化，从而进行喜欢转化

4、插件 plugin

用于扩展webpack 的功能，不同于loader，plugin的功能更加的丰富比如压缩，优化，不只局限于资源的饿加载

常见的插件和常见的loader

plugin:html-webpack-plugin 打包结束后，在dist目录中自动生成一个html文件，并把打包生成的js自动引入到这个html文件中clean-webpack-plugin 删除打包文件webapck-dev-server 实现自动打包编译功能（将dist文件托管到内存中）,并开启热更新功能uglifyjs-webpack-plugin:通过UglifyES压缩ES6代码loader:css-loader 加载 CSS，支持模块化、压缩、文件导入等特性style-loader 把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSSurl-loader：在文件很小的情况下以 base64 的方式把文件内容注入到代码中去babel-loader 把 ES6 转换成 ES5source-map-loader 加载额外的 Source Map 文件，以方便断点调试eslint-loader：通过 ESLint 检查 JavaScript 代码

关于热更新

定义：模块热更新是webpack的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。
优点：只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式

webpack与grunt、gulp的不同

grunt、gulp早期比较流行、一些轻量化的任务还是会用gulp来处理的，对其做系列的链式操作、更新流的数据、构成了一个任务、

webpack基于入口的，webpack会自动的递归，然后用不同的loader来处理不同的文件，用plugin来扩展功能

类似的工具、谈谈你最终的选择使用webpack

webpack 用于大型的前端站点
rollup适用于基础库的打包、如Vue、react
parcel适用于实验性项目

构建的流程、从读取的输出文件这个过程尽量说全

1、初始化参数、

2、开始编译、

3、确定编译

4、完成模块编译

5、完成模块的编译

6、输出资源

7、输出完成

是否自己loader和plugin描述一下思路

将源文件一步步翻译成想要的样子、编写Loader只做一种“转义”，每个Loder拿到是源文件内容、可以通过返回值的方式将处理后的内容输入，相对于loader而言，plugin的编写

利用webpack来进行前端的优化

压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件，利用cssnano（css-loader?minimize）来压缩css

利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径

删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现

提取公共代码。