webpack的相关知识点

webpack和Grunt,gulp对比

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。

Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。

webpack3和4的对比

  1. 不需要在配置文件webpack.config.js中指定入口以及出口文件。webpack3的webpack.config.js文件:
const path = require('path')
module.export = {
    output: {
        path: path.resolve(__dirname, './dist')
    },
    entry: './src/index.js'
}

在webpack4中不需要指定入口和出口,不指定输入文件位置的话,则默认为 src/index.js,不指定输出文件位置,默认为 dist/main.js

webpack下include和exclude的区别

webpack 中所有的 loader 都可以拥有 include和exclude 属性
exclude:排除不满足条件的文件夹(这样可以排除webpack查找不必要的文件),表示哪些目录中的 .js 文件不要进行 xxxx-loader
include:需要被 loader 处理的文件或文件夹,表示哪些目录中的 .js 文件需要进行 xxxx-loader

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 6,814评论 0 16
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 8,224评论 40 247
  • 姓名:母光艳 公司:宁波贞观电器 第235期,利他二组 【日精进打卡第237天】 【知-学习】 诵读《六项精进》大...
    母光焱阅读 107评论 0 0
  • 下课时,与面试公考学员议到公务员的名利关,便讨论起红楼梦的相关情节。 第十六回,宝黛久别重逢前,二位情到深处,却只...
    邹佩华阅读 371评论 0 2
  • 购物是什么?其实购物就是一个被快乐的骗的过程!
    纵帝阅读 236评论 0 0