今天我们开始新的一个章程,在之后的博客记录中我将一步一步和大家学习惯于webpack的一些配置和在项目中的使用,声明:webpack的配置内容实在过多,我们不可能都说到,所以就只说一些常用的配
开始: webpack到底是什么?
实际它的定义时有个模块打包工具,将前端开放中的不同的模块打包到一起,在页面引入时减少模块的加载,以模块化的形式关联个文件间的关系,所以我们可以看到在很多的脚手架工具中使用webpack打包后的项目最终只引入了一个js文件,就将所有的关联的模块文件都给引入了。
webpack是基于node开发的模块打包工具,所以之后我们在做webpack的配置时进行模块的引入需要遵循CommonJs的模块引入规则,同时使用webpack之前我们要也要为开发环境配置上node的开发环境,同时初始化我们的项目的node环境: (npm init) 即可,npm 是node的一个包管理工具,在安装node后默认就装上了, 我们可以在命令行工具中使用 npm -v 查看我们当前npm的版本
初始化好node的环境后我们便可以为我们的项目中安装上webpack打包工具了:
运行npm install webpack webpack-cli -D
(由于我们的webpack打包只需要在开发情况下打包完成上线即可,所以我们安装时也只需要安装到dev环境,它并不是项目运行的依赖)
一切安装好后我们进行第一次的打包,首先我们需要我们的目录下有一个需要被打包的文件,之后直接在命令行运行 npx webpack 打包的文件名 即可.
打包成功后我们可以看到我们的项目下多了一个dist目录,该目录下的js文件就是webpack为我们打包生成的文件了,此时我们运行的打包命令,webpack使用的是它的默认的配置文件, 而如果我们需要对其打包的配置文件进行更改设置,就需要编写webpack打包的配置文件了:
webpack的配置文件默认的名称是: webpack.config.js,当webapck运行打包命令时,webpack就会到目录下去寻找它的这么一个配置文件,我们现在就简单的配置一下这个文件的一些基本的配置项:
const path = require('path')
// 该文件需要导出webpack的配置对象
module.exports = {
entry: path.join(__dirname, "src/main.js"),
output: {
filename: "bundle.js",
path: path.join(__dirname, "dist")
}
}
如上所示,我们便配置配置了一个最简单的webpack的配置项:
entry
这一项表示的是webpack打包的入口,通俗的说就是我们需要让webpack为我们打包哪一个文件
output
这一项表示webpack打包的出口,通俗说就是webpack在打包后将打包生成的文件放到哪里,其中: filename表示webpack打包生成文件的文件名,path表示文件存放的路径
之后我们运行webpack打包命令打包文件时就会按照我们的配置文件去执行打包,此时我们只需要在命令行中运行webpack 命令即可完成我们的打包,打包后dist目录下也就出现我们需要的bundle.js 文件
当我们运行完成webpac的打包命令后命令行中会出现这么一段信息,我们这里解释一下:
- Version: 表示当前webapck打包的webpack版本
- Time: 表示此次打包的耗时
- Built at: 当前webpack打包的时间
- Assets, Size Chunks, Chunk Name: 看成是一个表格,Assets是打包生成文件的文件名, Size Chunks是打包的文件的大小,即bundle.js文件的大小, Chunk Names 是我们被打包的文件
上面我们说到了,webapck的默认配置文件名称是webpack.config.js,但如果我们实际的文件名称不是这个时,如何运行webpack打包呢:?
此时我们只需要在运行打包命令时为webpack显示的指定它的配置文件即可:
webpack --config + 配置文件的路径和名称
今天的最后,我们还说一点是,当我们每次运行打包时,我们都要运行webpack命令,或者有时还需要加上–config指定配置文件,这就使得不方便,此时我们可以在package.json中配置我们的打包命令:
在"script"属性下加上如下的代码:
//......
"script": {
"dev": "webpack"
}
//.....
如上,"dev"命令是我们自定义的,大家也可以自行的改变,这句代码表示的是当我们运行npm run dev的时候,他就会去运行webpack的打包命令
好了,今天的webpack入门就到这里了,虽然很简单,但也是最基础的东西,之后我的文章所要做的就是和大家一起一步一步的完善这个webpack.config.js的配置文件