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

webpack简介

webpack是基于模块化的打包（构建）工具，它把一切视为模块
它通过一个开发时态的入口模块为起点，分析出所有的依赖关系，然后经过一系列的过程（压缩、合并），最终生成运行时态的文件。

webpack的特点：

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

  • 基于模块化：webpack在构建过程中要分析依赖关系，方式是通过模块化导入语句进行分析的，它支持各种模块化标准，包括但不限于CommonJS、ES6 Module

    webpack的安装

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

  • webpack：核心包，包含了webpack构建过程中要用到的所有api

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

安装方式：

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

安装命令：

  1. npm i -D webpack webpack -cli

使用

  1. npx webpack

默认情况下，webpack会以./src/index.js作为入口文件分析依赖关系，打包到./dist/main.js文件中
通过—mode选项可以控制webpack的打包结果的运行环境
例子1：

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

有警告怎么做：

npx webpack --mode=development  //形式好调整
npx webpack --mode=production    //默认，服务器运行

浏览器使用：

  <script src="./main.js"></script>

打包过程：

c.js:
console.log("es6 module c")
import $ from "jquery"      //输出第三方库,不会参与最终运行，会交给webpack打包
console.log($);
export default "c";