了解Webpack吗？

你了解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 操作去加载 CSS
url-loader：在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
babel-loader 把 ES6 转换成 ES5
source-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 来实现

提取公共代码。