webpack安装与使用-0基础可学

前端工程化的具体解决方案 基于node.js的打包工具

1.webpack基本使用

1.1 安装

项目准备：

1.新建项目空白目录，运行命令，初始化包管理配置文件package.json

//文件夹名纯英文，否则报错

//运行后出现package.json文件，用于计入以后导入的所有包

 nmp init -y

2.新建src源代码目录

//放源代码

3.新建src->index.html首页和index.js脚本文件

4.初始化页面基本结构

//编写index.html

5.运行命令，安装jQuery

//-s是--save的简写

//S指的是此包信息放在package.json的dependencies结点下

//dependencies项目在开发阶段和产品上线部署阶段都要使用

npm install jquery -S

6.ES6导入jQuery，实现项目

webpack准备：

1.安装webpack

//@用于指定固定版本号

//-D是--save-dev的简写

//D指得是此包信息放在package.json的devDependencies结点下

//devDependencies项目只在开发阶段使用

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

2.项目根目录创建名为webpack.config.js的webpack配置文件

//move用来指定构建模式,可选值有两个development和production

//development开发模式

//production生产模式

module.exports={
	mode:'development'
}

3.在package.json的scripts节点下，新增dev脚本

//脚本名字不固定，后面必须是字符串

//scripts内可运行，可以通过npm run dev执行其内脚本

"scripts":{
	"dev":"webpack"
}

4.在终端输入命令，启动webpack进行项目的打包构建

//自动生成dist文件夹，其下有main.js

//main.js根据index.html生成，不仅包括index.js的代码还包括jQuery的代码

npm run dev

index.html中导入index.js有兼容性问题，改为导入../dist/main.js则没有兼容性问题

1.2 webpack.config.js

webpack的配置文件 支持使用node.js语法进行webpack个性配置

webpack在真正打包构建之前先读取这个配置文件，从而根据给定的配置进行项目打包

1.3 修改打包入口

webpack4.x和5.x版本默认：

打包入口文件：src->index.js

输出文件路径：dist->main.js

在webpack.config.js自定义打包：entry节点指定打包入口，output指定打包出口

//__dirname当前文件的存放路径