快速了解webpack，及其基础知识

• 前言
• 什么webpack
• 快速开始webpack
• • 安装
  • 使用webpack模块配置
  • webpack.config.js

前言

这是webpack学习总结及心得分栏的第一章，主要讲述一下我对webpack的一些新的认识，和webpack的基础用法，webpack源代码文档

什么webpack

webpack是一个模块打包工具，但这里的模块化不仅仅是对js文件而言的，而是整个前端的打包，它可以将根据项目中的依赖将所有类型的文件打包在一起，如css文件，资源文件等。

• 它可以将项目中零散的模块都打包到一个文件中，减少了页面发送请求的次数。
• 按需加载模块，避免了内存空间的浪费
• 支持引入其他类型的文件，使整个项目都进行模块化打包

快速开始webpack

这里仅介绍webpack的基础使用

安装

webpack4之后，使用webpack需要安装两个模块

• webpack
• webpack-cli

这里推荐使用开发依赖

cd 项目路径
yarn init --yes // 快速初始化
yarn add webpack webpack-cli --dev // 安装webpack模块
           

使用webpack模块配置

webpack可以使用零配置运行，也就是说，我们什么都不用干，它内部会帮助我们进行一个默认配置的打包

1. 安装完依赖后，我们再项目中添加一个src目录，并书写一些代码和模块的导入

   

   在这里index.js文件是必须的，因为webpack默认会找src下的index文件作为打包的入口
2. 准备好文件后运行

   yarn webpack
              

3. 打包结果

   

4. 黄色框内的就是我们打包的文件，他最终打包到dist目录下的main.js

   

5. mode模式

   可以看到，打包的结果中有一个warning:

   mode option has not been set

   ，mode是webpack配置中的一个模式，有三个值

   development

   开发模式，这个模式下会加入一些对开发有益的配置进行打包，如备注提示

   production

   生产模式（默认），这个模式会加入一些对生产有益的配置进行打包，如代码压缩

   none

   原生模式，这个模式它会以最原始的webpack打包呈现

   开发环境我们都尽量使用

   development

   模式

webpack.config.js

上面说的是使用webpack默认的配置进行打包，那些下面就要说说如何通过自己配置的webpack进行打包，我们的配置都需要写在webpack.config.js文件中，这是因为运行webpack的时候他会自动去找webpack.config.js这个文件，如果找不到就会用它自己的默认配置

入口entry

webpack打包是需要一个入口文件的，默认会找

src/index.js

，我们也可以通过配置entry来定义新的入口

// webpack.config.js需要导出一个对象

module.exports = {
  entry: './src/index.js'
}
           

运行

yarn webpack

output

有入口，自然就有出口，output可以定义我们打包后文件的输出路径，默认是

dist/main.js

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js', // 打包后的文件名称
    path: path.join(__dirname, 'dist') // 输出的文件路径，绝对路径
  }
}
           

打包结果

这里需要注意的是，

path

属性是一个绝对路径，不能使用相对路径

以上就是webpack最简单的使用过程，下一章我们将会介绍

loader

及其用法