2. webpack的安装和使用

官网:https://www.webpackjs.com

webpack简介

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,来完成构建过程

安装方式

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

使用

webpack,全局命令,npx webpack 本地命令
安装命令 npm i -D webpack weback-cli

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

通过—mode选项可以控制webpack的打包结果的运行环境(开发环境,生产环境)

webpack/npx webpack —mode=development/production 开发环境/生产环境打包
配置脚本命令

 "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --mode=development",
        "dev": "webpack --mode=production"
    },