开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 必背-9.webpack -> 正文阅读

[JavaScript知识库]必背-9.webpack

文章目录

必背-9.webpack

必背-9.webpack

webpack是什么

webpack(web应用打包工具)是自动打包部署工具
优点：
- 可以把css、js按照依赖关系，打包合并成一个（压缩）
- Eslint词法检测(检测语法是否符合规则)
- 小图转为base64格式编码
- 想用webpack必须要安装nodejs，webpack的安装和使用，是基于npm包管理器来完成的
缺点：webpack打包(可以看成一个平台)，需要下载各种插件，插件越多，打包速度会变慢

模块化开发

什么是模块化，模块化的发展史？

模块化开发：B.js文件里面使用了A.js的方法，则说明B.js需要依赖于A.js才能完成功能，存在依赖关系

单例设计模式：最早的模块化，但是对引入文件的顺序要求严格:比如B.js依赖于A.js,则必须先引入A.js再引入B.js
- 缺点：虽然解决了模块化开发，防止了全局变量污染，但是依赖关系把数据处理变得异常恶心

AMD[require.js]：AMD思想是在单例模式的基础上，实现了对依赖的管控。

应用:grunt/glup/fis都是基于AMD思想实现的
管控模式(缺点):依赖前置，在具体开发模块代码之前，先把需要的依赖处理好，再开始开发

用法：使用define导出，使用require导入。

//使用之前需要导入require.min.js包
//A.js
    //用define定义导出的对象，变量名是A，导入的时候用A
    //如果这个模块不需要导入其他模块，可以直接写函数
let A=define(function(){
    let sum=function sum(...parmas){
        return parmas.reduce((res,item)=>res+item);
    }
    return {sum};
})

//B.js
    //当需要导入其他模块时，
        //第一个参数传想要导入的模块名数组
        //第二个参数是当前模块的函数代码
let B=define(["A"],function(A){
    const average=function average(...parmas){
        parmas.sort((a,b)=>a-b).pop();
        parmas.shift();
        return A.sum(...parmas)/parmas.length;
    };
    return  {average} ;
})

//main.js
    //配置依赖模块的导入公共路径
require.config({
    baseUrl: "./lib"
})
//require用于导入，
    //第一个参数是要导入的模块，不分先后顺序
    //第二个参数是本身的函数
require(["A", "B"], function (A, B) {
    console.log(A.sum(1, 23, 2, 4, 53, 8));
    console.log(B.average(1, 23, 2, 4, 53, 8));
})
//最后只需要在html文件中带入main文件即可

Common.js:应用在服务器端[node]的模块化

缺点：不能在服务器端使用
应用：node/webpack支持CommonJS规范

用法：导出用module.exports,导入模块用require

导出：可以导出函数或对象

    // 直接导入一个函数
    module.exports= function sum(...params){

        return params.reduce((result,item,index)=>{
            return result+item;
        })
    }
    //导出一个对象
    module.exports={
        sum
    }

导入：导入目标路径必须以./开头，文件后缀可以省略

    //如果目标模块导出的是一个函数，则可以直接导入那个函数
    let suma=require("./B.js");//xxx.js后缀可以省略
    //如果目标模块导出的是一个对象，则可以直接导入这个对象
    let B=require("./B");//xxx.js后缀可以省略
	let {suma,sumb}=require("./B");//可以对B直接解构赋值

CMD[sea.js]:应用在浏览器端的模块化，旨在让Common.js能够在浏览器运行，但后期被webpack干掉了

ES6Module:ES6新增的模块化，主要应用在浏览器端的模块化

**优点：**我们以后在浏览器端模块化开发时，都会用ES6Module开发
注意点：我们在html文件中导入模块时必须声明==type="module":==<script type="module" src="./A.js"></script>

**用法：**用export/export default导出模块，用import导入模块,一个模块可以导入无数次

export default导出，import导入：export default只能用一次

//A.js

	let numa="111";
	//export default 写法
    	// export default:导出模块中的一个默认值:(可以是任何类型数据)每个模块只能用一次
    	//模块导出的实际是一个Module对象，我们export default的值，会存在Module对象中的default属性
    	export default numa;

//B.js
    //导入时文件路径必须由./开头，且不能省略文件后缀.js

	//导入A模块export default的值
    	//导入A.js中export default导出的默认值，且把值赋给num
    	//我们这样的写法，A模块导出的Module对象，会把它的default属性值赋值给num

   	 	import num from "./A.js";
       //因为我们接收的不是module对象而是default的值，所以不能直接解构赋值，需要再通过num结构赋值
        let {na,nb}=num;

export 导出，import导入：export能用无数次

//A.js
    let numb="222";
    let numc="333";
    let obj1={name:"sjh",age:18}
	//export 写法
    	//方式一：导出一个变量，需要在export后定义赋值，不能在外面定义再只传变量名
   	 	export let nume="444";
    	//方式二：通过花括号的，可以同时导出多个已经定义的变量
        //这种导出方式实质上是给Module对象赋值，将numb/numc/obj1赋值给Module，变为Module的私有对象
   		 export {numb,numc,obj1};
//B.js
	 //将A模块导出的整个Module对象导入，拿到对象后就能通过A.xxx调用其内部的属性了    
    	import * as A from "./A.js";
        	console.log(A.numb);//"222"
    	//因为导入的是一个Module对象，所以我们可以对这个对象进行解构赋值，获取其中的属性，因为default是一个内置私有属性，所以不能导出defalut
        import { numb,numc,obj1 } from "./A.js";
        	console.log(numb);//"222"

webpack使用

为什么使用webpack？

webpack主要构成是什么？

webpack是一个基于nodejs实现的平台
存在入口和出口：
- ==入口：==从哪个文件开始打包编译
- ==出口：==打包的文件放到哪里
mode：模式，存在生产环境(production)和开发环境(development)
- 生产环境：production，自动压缩
- 开发环境：development，不压缩
loader：加载器，编译用的，（webpack只能识别Es5的js文件）
- 如果是es6的js文件、css、图片等文件，则无法识别，我们需要安装插件使它能自动编译成webpack能识别的代码格式
plugins：插件，打包压缩文件
优化项…

webpack支持什么格式的规范？

webpack即支持ES6Module，又支持CommonJS规范，而且两个规范可以混用

wepack如何使用？

我们需要把配置写在项目的==webpack.config.js==文件中，可配置：entry/output/mode/loader/plugins/优化项...
执行webpack命令，配置好的内容会进行一系列的处理：文件编译、打包(合并)、压缩…

webpack的安装方式？

方式一：将webpack安装到全局
- $ npm i webpack webpack-cli -g / npm i webpack@5.49.0 webpack-cli@4.7.2 -g
- 优点：所有的项目不用再单独安装webpack包，都能在文件夹下的命令行窗口使用webpack命令执行打包
- 缺点：所有项目使用的webpack版本一样，容易引起版本冲突
方式二：想给哪个文件夹打包，就给哪个文件夹安装webpack
- $ npm i webpack webpack-cli// npm i webpack@5.49.0 webpack-cli@4.7.2
- 优点：每个项目都有自己的webpack版本号，互不影响，也是我们做项目的时候真正用的安装方式
- 缺点：不能在自己的命令行窗口，用webpack命令执行打包,如果想用，有两种方式：
  - 如果wepack版本在5.2以上:使用npx webpack不用配置命令就可以打包
  - 也可以在package.json中的"scripts"属性下配置"xxx":"webpack","xxx"是自定义名,然后在命令窗口中执行npm run xxx来实现打包

webpack的默认打包？

wepack有默认的打包路径：我们不需要配置webpack.config.js，就可以打包
- 默认入口是：文件夹/src/index.js
- 默认出口是：文件夹/dist/main.js(如果没有，会自动生成)

webpack的打包命令？

使用全局的webpack：直接在命令行窗口执行webpack
使用自己项目中的webpack：
- 需要在package.json中的"scripts"属性下配置"xxx":"webpack","xxx"是自定义名,然后在命令窗口中执行npm run xxx来实现打包；
- 或者版本在5.2以上，直接使用npx webpack打包

执行webpack打包命令触发的查找机制？

机制：当我们运行 npm run serve，会把webpack命令执行
- @1 首先到项目的node_modules中的.bin的目录中查找
- @2找到webpack这个文件，按照这个文件开始执行打包编译
  
  本地项目中可以使用的命令，都按照这个文件开始执行打包编译

webpack使用步骤

webpack在项目中配置的步骤？

第一步：删除全局的webpack:npm uninstall webpack webpack-cli -g
第二步：安装局部的webpack:npm i webpack webpack-cli --save-dev
第三步：检查项目目录中是否存在src路径，src中是否存在index.js目录
第四步：在package.json中的"scripts"属性下配置"xxx":"webpack","xxx"是自定义名,然后在命令窗口中执行npm run xxx来实现打包【使用默认打包方式:默认打包index.js ,默认生成在:dist/main.js】
第五步：配置webpack.config.js,实现自定义的控制webpack打包配置

webpack配置文件

wepack的配置文件？

webpack的配置文件有三种形式：
- webpack.config.js:wepack默认寻找的配置文件,但是我们一般会把它拆分为两个模式文件:production和development
  - 脚本命令:"dev":"webpack --config webpack.min.js"可简写为:"dev":"webpack"
- webpack.config.production.js:专门执行webpack生产环境的配置文件
  - 脚本命令:"build":"webpack --config webpack.config.production.js"
- webpack.config.development.js:专门执行webpack开发环境的配置文件
  - 脚本命令:"build":"webpack --config webpack.config.development.js"

如何在一个webpack.config.js 文件下实现执行不同的环境(生产或开发)？

我们在项目开发一般创建开发环境配置文件与生产环境配置文件两个配置文件，但是如何实现两个环境放在同一个配置文件中，且能根据命令分环境执行命令内容呢？
第一步：需要引入cross-env依赖:npm i cross-env --save-dev
第二步：通过配置package.json的scrpit脚本命令,实现执行不同的环境
- "D":"cross-env Node_ENV=development webpack"：执行开发环境
- "P":"cross-env Node_ENV=producton webpack"：执行生产环境
第三步：在webpack中声明一个变量let NODE_ENV=process.env.NODE_ENV||'development'
- process.env.NODE_ENV:是通过脚本命令中的cross-env xxx传过来的值，如果传过来的值是undefined，则默认赋值development环境
- mode:NODE_ENV:环境根据变量来决定
- filename:NODE_ENV==='development'?"bundle.[hash].js":"bundle.[hash].min.js"
  - 开发环境下生成未压缩文件，生产环境生成压缩文件
第四步：运行：
- npm run D:执行开发环境
- npm run P:执行生产环境
- npm run dev:因为没有传NODE_ENV变量值，所以默认执行开发环境

wepack.config.js配置项

webpack在node环境下执行，所以对于模块化的导入和导出，需要遵循node.js规范

生产者模式

//webpack在node环境下执行，所以对于模块化的导入和导出，需要遵循node.js规范

//获取nodejs自带的path模块
let path=require("path");

//使用common.js规范导出配置模块
module.exports({
    //mode：模式，有两种:"production"(生产者模式，默认压缩)，"development"(开发者环境，不会压缩)
    //使用：生产者模式(自动压缩)
    mode:"production",
    // entry:[string]编译入口：需要打包的js文件开始路径
    entry:"./src/aaa.js",
    // output:[object]编译出口：打完的包存放的指定路径，以及生成的文件名
    output:{
        //filename:[string],生成的包的文件名
        filename:"bundle.[hash].min.js",//[hash]:当我们的文件打包时新的包没有变化，则使用旧的包(协商缓存)，如果有变化了(才会生成新的包)
        //输出的包的路径
        path:path.resolve(__dirname,"dist")//__dirname:当前文件所在的文件夹路径，与dist拼接生成=>wbk/dist路径，也是最终存放包文件的路径
    }
})

开发者模式


//使用common.js规范导出配置模块
module.exports({
    //mode：模式，有两种:"production"(生产者模式，默认压缩)，"development"(开发者环境，不会压缩)
    //使用：开发者模式(不压缩)
    mode:"development",
    // entry:[string]编译入口：需要打包的js文件开始路径
    entry:"./src/aaa.js",
    // output:[object]编译出口：打完的包存放的指定路径，以及生成的文件名
    output:{
        //filename:[string],生成的包的文件名，不需要加min，因为
        filename:"bundle.[hash].js",//[hash]:当我们的文件打包时新的包没有变化，则使用旧的包(协商缓存)，如果有变化了(才会生成新的包)
        //输出的包的路径
        path:path.resolve(__dirname,"dist")//__dirname:当前文件所在的文件夹路径，与dist拼接生成=>wbk/dist路径，也是最终存放包文件的路径
    }
})