【webpack核心】- 2、webpack特点 、安装 及 零配置使用

webpack官网：https://www.webpackjs.com/
目前的最新版本：webpack4

1、 webpack简介

webpack是基于模块化的打包（构建）工具，它把一切（js文件，图片，sass等）视为模块

它通过一个开发时态的入口模块为起点，分析出所有的依赖关系，然后经过一系列的过程（压缩、合并），最终生成运行时态的文件。

2、webpack的特点：

• 为前端工程化而生：webpack致力于解决前端工程化，特别是浏览器端工程化中遇到的问题，让开发者集中注意力编写业务代码，而把工程化过程中的问题全部交给webpack来处理
• 简单易用：支持零配置，可以不用写任何一行额外的代码就使用webpack
• 强大的生态：webpack是非常灵活、可以扩展的，webpack本身的功能并不多，但它提供了一些可以扩展其功能的机制，使得一些第三方库可以融于到webpack中
• 基于nodejs：由于webpack在构建的过程中需要读取文件，因此它是运行在node环境中的
• 基于模块化：webpack在构建过程中要分析依赖关系，方式是通过模块化导入语句进行分析的，它支持各种模块化标准，包括但不限于CommonJS、ES6 Module

3、webpack的安装

webpack通过npm安装，它提供了两个包：

• webpack：核心包包含了webpack构建过程中要用到的所有api
• webpack-cli：提供一个简单的cli命令，它调用了webpack核心包的api，来完成构建过程

安装方式：

• 全局安装：可以全局使用webpack命令，但是无法为不同项目对应不同的webpack版本
• 本地安装：推荐，每个项目都使用自己的webpack版本进行构建

npm i webpack webpack-cli -D
#安装开发依赖 -D

npm i jquery
#安装生产依赖 （什么都不用加）

• -D 开发依赖 ---- 直接运行打包后的文件，不再需要webpack了，所以webpack是开发依赖 ，D 是development，最后安装记录在package.json里的devDependencies中

• 生产依赖(普通依赖) ---- 参与最终运行的是生产依赖，不参与最终运行的是开发依赖，最后安装记录在package.json里的dependencies中

4、简单使用

webpack
npx webpack
npx webpack --mode=development
npx webpack --mode=production

webpack命令要在工程根目录下运行，就是src目录的上级目录，以便去找到src下的main.js

默认情况下，webpack会以./src/index.js作为入口文件分析依赖关系，打包到./dist/main.js文件中

5、package.json里配置脚本

 "scripts": {
     "build": "webpack --mode=production",    
     "dev": "webpack --mode=development"
 },

• 通过--mode选项可以控制webpack的打包结果的运行环境,
• npm run dev 打包后的dist文件夹的代码本地开发环境上运行，
• npm run build 打包后的dist文件夹的代码在 生产/测试 服务器上运行，

6、webpack处理后，npm包支持在浏览器使用

import $ from "jquery"
console.log($);

1. import $ from "jquery"这个是不参与最终运行的，是交给webpack 来分析依赖关系用的
2. 虽然jQuery 是commonjs 导出的，但是webpack处理后，可以用es6模块标准引入，有了webpack 就不用担心模块化的兼容性问题了
3. from “jquery” jquery前没有./ 或…/，webpack就会去node_modules找对应的依赖文件，然后分析jquery的依赖，然后打包结果放到./dist/main.js里,