了解Webpack吗？

Cympros 发布于2019-08-23 18:29 / 2736人阅读

摘要：你了解吗核心概念的核心概念大致分为四个入口出口插件，是一个打包模块化的工具，专注构建模块化项目。优点只更新变更内容，以节省宝贵的开发时间。在构建过程中，将引用的静态资源路径修改为上对应的路径。可以通过在启动时追加参数来实现提取公共代码。

你了解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来实现

提取公共代码。

云服务器海外云主机 webpack _webpack webpack cdn webpack2

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105318.html

前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)

答案自己谷歌或百度找。一、来源背景面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...

Kerr1Gan 2019-08-26 12:20 评论0 收藏0
前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)

答案自己谷歌或百度找。一、来源背景面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...

lushan 2019-08-02 11:34 评论0 收藏0
前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)

答案自己谷歌或百度找。一、来源背景面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...

joyvw 2019-08-30 15:54 评论0 收藏0
2019前端秋季社招面试经历总结（三年经验）

摘要：经历月份开放的简历，收到了蛮多询问和面试，算是招人旺季，需要跳槽的小伙伴抓住机会。现在是面试了家公司左右，有些高频问题会标记次数总次数，可供大家参考。最后祝大家面试顺利，拿到心仪的，写错的地方请不吝赐教，谢谢。经历 7月份开放的简历，收到了蛮多询问和面试，算是招人旺季，需要跳槽的小伙伴抓住机会。一开始广泛看面试题，没抓住重点复习，有很多平时也没怎么用到，导致一开始面试的时候，问的问题...

Kross 2019-08-02 15:41 评论0 收藏0
记录一下自己的春招，唯品会、360、京东offer已收、腾讯offer_call已达！！！

摘要：春招结果五月份了，春招已经接近尾声，因为到了周五晚上刚好有空，所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底，截止今天，已经斩获唯品会电商前端研发部大数据与威胁分析事业部京东精锐暑假实习生的腾讯的是早上打过来的。春招结果五月份了，春招已经接近尾声，因为到了周五晚上刚好有空，所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底，截止今天，已经斩获唯品...

freewolf 2019-08-22 16:57 评论0 收藏1