本文讲解基于webpack4。
一、为什么要使用webpack?
如今项目越做越大,越来越复杂,前端工程化就成为了必不可少的一环。我们知道,工程化是系统化,模块化,规范化的过程,而在这个过程中,webpack是一个非常重要的工具。
一、安装
webpack基于node环境
1.全局安装:npm install webpack webpack-cli -g
2.查看是否安装成功:webpack -v
此处有一个需要注意的地方是,webpack3没有webpack-cli
二、webpack的一些概念
1.webpack必须有入口与出口,即entry与output
- entry:打包的起点,webpack必须得有一个入口让它知道从哪里开始。
- output:处理完成后,结果文件输出到哪。
2.webpack.config.js是webpack的配置文件,也是项目的入口文件。当然,如果你的配置文件不叫webpack.config.js,需要额外指定一下。
三、基础打包
1.首先我们在一个空文件夹下新建一个webpack.config.js。在其中暴露一个对象,写上入口与出口。
这里我新建了一个app.js作为入口文件,其中内容如下。
2.项目初始化
- 项目打包必须进行项目初始化。
- 调用 npm init 来初始化 package.json,它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。
npm init -y (y --》代表yes ,省去了默认选项点击)
初始化完成后,目录下出现 package.json。
3.打包
命令:webpack
命令运行以后,可以看到,已经打包成功了。
4.mode
虽然打包成功了,但是发现报了一个警告。
- 有关mode
这里需要说明一下,mode是webpack4的属性,用来设置开发模式还是生产模式。
webpack有一个理念就是减少他的配置文件。我们在前面可以看出,如果没有设置mode,main.js中的代码是压缩的。
我们把mode设置为development之后,你不用做任何事,运行webpack后它的代码就不压缩了。
执行webpack
当然,对应的,mode设置为production以后,main.js中的代码是压缩的。
mode:'production'
- 这里值得一提的是,在webpack3中,如果你不去写一些压缩的配置,是没有属性提供你去做代码压缩的。
三、全局与局部
上面我们不难看出,这个项目的打包一直在用全局的webpack打包。
在实际工作中,我们的打包却不是这样的。以vue为例,我们在项目中运行npm run build就会进行打包。这里,我们将实现这样的功能。
未完待续…