Webpack4+

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

webpack底层是用commonJS语法规范编写,除此之外,它还支持AMD,CMD,ES6等其它语法规范。

webpack的四个核心概念

  • 入口(entry)
  • 出口(output)
  • loader
  • 插件(plugins)

入口

    由entry指定,是内部依赖图的起点,可在webpack.config.js中配置一到多个入口

module.exports{
    entry: './app/entry', // string | object | array
    // 这里应用程序开始执行
    // webpack开始打包
}

webpack的entry支持三种格式:字符串,对象,数组

字符串:适用于只有一个入口文件的情况

对象:适用于有多个入口文件的情况

数组:适用于多个入口文件的情况

出口

 

loader

 

plugins

plugins(插件,是一个数组):webpack功能的扩展,使它的功能更加的强大

plugins是一个数组,数组中的每一项都是某一个plugin的实例,plugins数组甚至可以存在一个插件的多个实例

loader可以来处理css,但是它却无法独立的从js中抽离出来,那么我们就可以用plugins来实现,webpack 称plugins为其backbone(支柱),一切loader不能做的处理都可由plugins来做。此评价足见其重要性。

 

webpack安装的时候分为全局安装和局部安装,那么为什么还要局部安装呢?

因为项目每个版本所依赖的webpack的版本可能不一样,为了避免全局的冲突,最好再局部安装一下。

 

webpack4.0+与之前版本的一些不同之处

webpack版本更新后将webpack-cli(webpack命令行接口)从webpack中分离出来,因此在安装webpack时要注意将webpack-cli一并的安装下来。

配置webpack流程参考

1、全局安装webpack webpack-cli

npm install webpack webpack-cli -g

2、初始化 npm init

npm init

3、局部安装 webpack 

npm install webpack webpack-cli -D

在这里-D相当于--save-dev

4、配置webpack.config.js(如果此处未配置,webpack4会将通过一个默认的入口(src/index.js)打包,webpack4之前,未配置会报错)

5、webpack(打包)

安装webpack-dev-server服务器

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值