webpack入门(一)

一.介绍

• 什么是webpack

  • Webpack是一个模块打包器(bundler)。
  • 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理
  • 它将根据模块的依赖关系进行静态分析，生成对应的静态资源

• 五个核心概念

  • Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
  • Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
  • Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript）。
  • Plugins：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
  • Mode：模式，有生产模式production和开发模式development

• 理解Loader

  • Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
  • Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
  • 它本身是一个函数，接受源文件作为参数，返回转换的结果
  • loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。

• 理解Plugins

  • 插件可以完成一些loader不能完成的功能。
  • 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

• 配置文件(默认)

  • webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象

二.安装

在安装 Webpack 前，你本地环境需要支持 node.js。

由于 npm 安装速度慢，我使用了淘宝的镜像及其命令 cnpm，安装教程建议百度

使用 cnpm 安装 webpack和webpack-cli

cnpm i webpack webpack-cli -g

创建项目

接下来我们创建一个目录 app：

mkdir app

在 命令行 输入:

 npm init

初始化一下,会出现一个 package.json文件(注意:文件夹名字不能命名为 webpack)

在 app 目录下添加 src 和build文件夹，代码如下：

app/src/index.js 文件

function add(x,y) {
  return x + y;
}
console.log(add(1,2));

 index.js:webpack入口起点文件

  运行指令:

  开发环境:webpack ./src/index.js -o ./build --mode=development

  webpack会以 .src/index.js 为入口文件开始打包,打包后输出到 ./build/main.js

  整体打包环境,是开发环境

  生产环境:webpack ./src/index.js -o ./build --mode=production

  webpack会以./src/index.js 为入口文件开始打包,打包输入到 ./build/main.js

  整体打包环境,是生产环境

执行命令后自动在build文件夹下新建一个main.js文件,这就是打包后的js文件

然后在build文件夹下新建一个index.html,引入main.js文件

如果你的webpack是5以上的版本,在执行生产环境命令后,会压缩并解析简化代码,

main.js的内容会变成:

console.log(3)

三.结论

  1.webpack能处理js/json资源,不能处理css/img等其他资源

  2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~

  3.生产环境比开发环境多一个压缩js代码.