vue之webpack

一、介绍：

　　1. js应用的模块打包工具

二、webpack安装

　　1. 环境：node环境

　　2.  npm install webpack -g 

　　　　说明：npm install 命令；webpack是工具名，可以指定版本如：[email protected]； -g表示全局安装，如果不想全局安装，仅为某项目安装开发时依赖，可以在进入该项目目录下执行安装命令， 将-g改为--save-dev；--save表示为本项目安装；-dev表示开发时依赖，运行时不需要使用时可以添加此option

　　　　整体案例：npm install [email protected] --save-dev

　　3.  webpack --version 

　　　　说明：查看webpack安装版本，正确显示说明安装成功。注意：高版本webpack查看版本时会让安装webpack脚手架（webpack-cli）

　　4.  npm uninstall webpack -g 

　　　　说明：移除webpack工具

三、webpack打包

　　1. webpack 入口js文件 打包后的js文件名

　　　　说明：webpack是打包命令；入口文件是项目的入口，如main.js；打包后的文件名是打包成功后输出生成的文件名，如bundle.js

　　　　整体案例： webpack ./src/main.js ./dist/bundle.js 

　　　　注意：高版本需要添加-o作为option然后跟输出目录，生成的文件名为main.js;

　　　　如：在5.58.3版本时，执行命令 webpack ./src/main.js -o ./dist/bundle.js ，会在dist目录下生成bundle.js目录，在bundle.js目录中生成main.js文件

　　2. webpack

　　　　说明：在webpack进行文件配置之后，可以直接使用webpack打包，webpack会从配置中查找入口文件和出口文件进行打包；文件名称：webpack.config.js

　　　　　　配置方式：

　　　　　　绝对路径相对化：在项目目录下执行npm init命令会生成package.json文件，此时在webpack.config.js配置文件中导入path模块，此时就会从package.json或者全局中查找path包，使用包中的resolve函数拼接出path

　　　　　　导入模块： const path = require('path') 

　　　　　　拼接绝对路径： path.resolve(__dirname, 'dist') 

　　　　　　　　其中 __ditname是node中获取的当前项目的文件夹绝对路径

　　3.  npm run *** 

　　　　说明：npm run 命令可以用来执行脚本命令，在配置好映射之后便可以使用

　　　　　　建立webpack打包映射：在package.json文件中的scripts中添加命令映射：如 "build":"webpack"

　　　　　　在建立好上述映射之后，就可以使用npm run build进行打包构建，执行的就是webpack命令，使用的是配置信息

　　　　此种打包方式会优先使用本地安装的webpack

四、webpack扩充

　　1. loader安装

　　　　通过npm安装需要使用的loader；

　　2. loader配置

　　　　在webpack.confi.js中的module关键字下进行配置（去官网查找相关loader和用法。webpack.js.org）

　　3. 整体案例：一：  npm install css-loader --save-dev; npm install style-loader --save-dev; 

　　　　　　　　二：

日期：2021-10-20