• 打包工具webpack的学习

    webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

    我们简单把它理解为一个蜘蛛网的结构，入口为一个中心点然后从四周扩散，形成一个完整的蜘蛛网。

    我们来学习webpack,需要了解其打包原理和打包流程，即我们需要学会其配置文件的配置。当然我们也不需要完全学会其底层原理，我们只需知道其简单的概念和流程即可，对我们后面框架的学习还是有帮助的。

    我们将配置文件大致分为：项目入口配置，项目出口配置，加载器配置，插件配置，开发模式配置，其他，这几个部分进行学习。

    在进行学习前，先在全局配置文件下下载webpack这个工具：

    npm install webpack webpack-cli -g

    然后再项目目录下创建一个webpack.config.js的打包配置文件；

    在项目目录下创建一个src文件夹存放项目代码；

    项目入口配置

    entry   设置我们的入口文件，可以是单入口、多入口和多入口多出口。如果我们不写webpack.config.js配置文件，系统是帮我们默认配好了一个的，就会按照默认的入口文件index.js。

    什么意思呢？

    即如果我们在src下写一个main.js作为我们的入口文件，在终端运行webpack时，会报错，因为它找不到入口文件，因为默认的入口文件名是index.js，所以我们需要修改，如果我们的入口文件就是index.js那么程序就会找到入口文件正常运行。

    报错信息：

     修改如果文件

    在webpack.config.js配置文件的export.modules导出模块中entry后写入我们修改的文件文件地址，代码：

    1. module.exports={
    2.     entry:__dirname+"/src/main.js"
    3. }

    上述是单入口的形式，有个别项目是多入口的。

    多入口

    entry后跟数组的形式，数组中依次写入需要的入口文件位置，代码：

    1. module.exports={
    2.     entry:[__dirname+"/src/main.js",__dirname+"/src/test.js"]
    3. }

    运行代码后，此刻我们可以在目录中看到变化，这个工具会自动帮我们生成一个名为dist的文件夹，其下的main.js就是我们的出口文件，里面是我们编译、压缩过后的代码，如图：

    其中console.log（666）为main.js的内容，打印777是test的内容。

    多入口 多出口 

    在entry  以对象的形式写入，属性名为运行过后的出口文件的文件名，对应的属性值为入口文件的位置。

    代码：

    1. module.exports={
    2.     // entry:[__dirname+"/src/main.js",__dirname+"/src/test.js"]
    3.     entry:{"a":__dirname+"/src/main.js",
    4.     "b":__dirname+"/src/test.js"}
    5. }

    运行后：

    对于多出口，还有一种写法是将出口的属性名和入口地址都写在对象中 ，

    如：

    1.  entry:{a:__dirname+"/src/main.js",
    2.     b:__dirname+"/src/test.js",
    3.     c:{
    4.        import:"./src/ccc.js",
    5.        filename:"ccc.js" 
    6.     }
    7. }

    此时属性名c就没有意义了，出口文件名会按照filename属性的值配置。

    项目出口配置

    output  在其后的对象中我们配置的出口文件，常见配置：

    asyncChunks:true  创建按需加载的异步 chunk;

    path  输出的目录,绝对路径,默认dist

    filename: '[name]-666-[id]bundle[hash:5].js',   输出的文件名,[hash:5]为5位哈希值,[id]为打包的chunk的id,[name]为入口的属性名,缺省则为mian,这几个一定记住 vue和react的css作用域-就是这个几个设计的，666为中间的拼接。

    library: {
                name: 'MyLibrary', //库名
                type: 'var', //配置将库暴露的方式。('var'、'module'、'assign'、'assign-properties'、'this'、'window'、'self'、'global'、'commonjs'、'commonjs2'、'commonjs-module'、'commonjs-static'、'amd'、'amd-require'、'umd'、'umd2'、'jsonp' 以及 'system')
            },

    auxiliaryComment   模块化导出技术的注释属性

    clean: true    在从新生成出口文件之前清空 output 目录；后跟对象时，其有属性dry: true时  小黑窗打印而不是删除应该移除的静态资源，为keep: /ignored\/dir保留 'ignored/dir' 下的静态资源不删除。

    代码：

    1. module.exports={
    2.   asyncChunks: true, //创建按需加载的异步 chunk。
    3. 		
    4. 		path:__dirname+"/dist2",//输出的目录,绝对路径,默认dist
    5. 		
    6. 		// filename: 'bundle.js', //输出的文件名
    7. 		filename: '[name]-666-[id]bundle[hash:5].js', //输出的文件名,[hash:5]为5位哈希值,[id]为打包的chunk的id,[name]为入口的属性名,缺省则为mian,这几个一定记住 vue和react的css作用域-就是这个几个设计的
    8. 			
    9. 		
    10. 		// library: 'hqyj',//库名
    11. 		library: {
    12. 			name: 'MyLibrary', //库名
    13. 			type: 'var', //配置将库暴露的方式。('var'、'module'、'assign'、'assign-properties'、'this'、'window'、'self'、'global'、'commonjs'、'commonjs2'、'commonjs-module'、'commonjs-static'、'amd'、'amd-require'、'umd'、'umd2'、'jsonp' 以及 'system')
    14. 		},
    15. 		// libraryTarget: 'umd',//配置如何暴露 library,优先级比library高但是:[请使用 output.library.type 代理，因为我们可能在未来放弃对 output.libraryTarget 的支持。]
    16. 		
    17. 		
    18. 		
    19. 		
    20. 		auxiliaryComment: 'Test Comment', //各种模块化导出技术的统一注释(把type设置为umd)	  
    21. 		//各种模块化导出技术的分别注释(webpack允许你的项目使用各种模块化技术 它都可以识别并打包)
    22. 		// auxiliaryComment: {
    23. 		// 	root: 'Root Comment',
    24. 		// 	commonjs: 'CommonJS Comment',
    25. 		// 	commonjs2: 'CommonJS2 Comment',
    26. 		// 	amd: 'AMD Comment',
    27. 		// },	
    28.  
    29.  
    30. 		clean: true, // 在生成文件之前清空 output 目录
    31. 		// clean: {
    32. 		//       dry: true, // 小黑窗打印而不是删除应该移除的静态资源
    33. 		//     },
    34. 		// clean: {
    35. 		// 	keep: /ignored\/dir\//, // 保留 'ignored/dir' 下的静态资源不删
    36. 		// 	// keep(asset) {
    37. 		// 	// 	return asset.includes('ignored/dir');//同上
    38. 		// 	// },
    39. 		// },		
    40. 	}
    41. }

     

    加载器配置

    webpack在打包时  会根据js文件中的引入语法 去加载其他文件  然后读取其他文件中,webpack只能识别js和json文件，因此需要加载器 loader  去按照对应的文件编码规则进行解析；不同的文件类型 就要使用不同的规则去解析  不同规则就用不同的加载器。

    常见的加载器

    css-loader&style-loader

    css-loader解析css文件

    style-loader把 css-loader 生成的内容，用 style 标签挂载到页面的 head 中

     使用之前需要先在终端中下载该加载器：

    npm install css-loader style-loader --save-dev

    webpack.config.js配置文件使用：

    1.  module:{
    2. 		   rules:[
    3. 			   {test:/\.css$/,use:["style-loader","css-loader"]}
    4. 		   ]
    5. 	   }

    /.\css$/正则表达式，$以.css结尾。

    use后跟数组，每一项从后往前写，先解析css-loader，后挂载style-loader，因为use这里是从后往前解析。

    通过这个方法，在出口js文件中，会通过一系列转换内嵌入css代码，如果我们想要单独在出口目录下生成一个css文件，我们就不用style-loader,我们需要用到一个插件——mini-css-extract-plugin

    先下载：npm i mini-css-extract-plugin --save-dev

    还需在webpack.config.js配置文件顶部引入：var MiniCssExtractPlugin=require("mini-css-extract-plugin")

    再配置plugin:

    1. plugins: [
    2. 		new MiniCssExtractPlugin({
    3. 			filename: '[hash].css' //css生成到css文件中,项目中手动以形式引入使用
    4. 		})
    5. 	]

    自此配置完成，可直接使用

    1.  module:{
    2. 		   rules:[
    3. 			   {test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]}
    4. 		   ]
    5. 	   }

     

    file-loader

    项目中引入了视频音频图片等等媒体编码的文件,可以使用file-loader将其打包

    首先下载npm i file-loader --save-dev

    使用：

    1. module: {
    2. 	rules: [
    3. 		//直接以style标签形式动态写入到页面
    4. 	    {test:/\.css$/,use:["style-loader","css-loader"]},
    5.         //项目中引入了以下结尾的文件就会启动file-loader
    6. 		{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
    7. 	]
    8. }

    ts-loader

    我们的node.js只能运行Js代码，所以需要将将 TypeScript 转为 JavaScript。

    首先下载：npm install ts-loader webpack typescript --save-dev

    然后需要在项目中新建一个tsconfig.json文件(这是ts编译需要的配置文件) ​​​​​​​

    使用：

    1. module: {
    2.  
    3. 	rules: [
    4. 			{ test: /\.ts$/, use: 'ts-loader' },
    5. 	]
    6. }

    babel-loader

     Babel 是一个 JavaScript编译器，它是一个工具链，主要的用途就是在旧的浏览器或环境中将ECMAScript 2015+ 代码转换为向后兼容的 js 代码。babel-loader就是用babel工具将ES6转成ES5的一种加载器. 在webpack打包时遇到js文件，就交给babel处理。

    下载：npm install babel-loader @babel/core @babel/preset-env webpack -D ​​​​​​​

    使用：

    1. module: {
    2. 	rules: [
    3. 			 {
    4. 			      test: /\.js$/,
    5. 			      exclude: /(node_modules|bower_components)/,//排除这里面的js文件
    6. 			      use: {
    7. 			        loader: 'babel-loader',
    8. 			        options: {
    9. 			          presets: ['@babel/preset-env'],
    10. 			          plugins: ['@babel/plugin-proposal-object-rest-spread']
    11. 			        }
    12. 			      }
    13. 			    }
    14. 	]
    15. }

     

    sass-loader

    把Sass代码转化为css代码

    下载：npm install sass-loader sass webpack --save-dev

    1.  module: {
    2.     rules: [
    3.       {
    4.         test: /\.s[ac]ss$/i,
    5.         use: [        
    6.           'style-loader',  //不用单独引入 直接运行js代码 动态写入页面    
    7.           'css-loader',
    8.           // 将 Sass 编译成 CSS
    9.           'sass-loader',
    10.         ],
    11.       },
    12.     ],
    13.   },

    在学习这么多以后，loader到底是什么？

    loader用于对模块的"源代码"进行转换，在 import或"加载"模块时预处理文件;

    webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。

    在webpack内部中，任何文件都是模块，不仅仅只是js文件

    默认情况下，在遇到import或者load加载模块的时候，webpack只支持对js和json文件打包

    像css、sass、png等这些类型的文件的时候，webpack则无能为力，这时候就需要配置对应的loader进行文件内容的解析,当webpack​​​​​​​ 碰到不识别的模块的时候，webpack 会在loader配置中查找该文件解析规则.

    插件配置

    插件plugin，前面在生成独立的css文件时已经使用到了。

    loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

    想要使用一个插件，你只需要require()它，然后把它添加到plugin数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用new操作符来创建一个插件实例。

    这里介绍两个插件：EslintWebpackPlugin和HtmlWebpackPlugin

    EslintWebpackPlugin

    我们想要使用EslintWebpackPlugin，首先了解一下eslint这个软件。

    eslint插件是一个非常强大的语言查错工具, vscode 编辑器中有提供 eslint 插件，下载插件并启用，自动就可以检测代码的语法错误，但是它只在你写代码的时候提示,我们希望打包项目的时候有相关提示,就可以配置它.

    ​​​​​​​使用：

    1、先要有eslint这个插件

    npm install eslint --save-dev

    2、下载EslintWebpackPlugin

    npm install eslint-webpack-plugin --save-dev

    1. const ESLintPlugin = require('eslint-webpack-plugin');
    2.  
    3. module.exports = {
    4.     plugins: [new ESLintPlugin(options)],
    5.   
    6. };

    option我们配置的参数：

    context:__dirname+"/src" //指定文件根目录
    extensions:String|Array[String] //指定需要检查的扩展名.不配置默认为"js"
    exclude:"node_modules" //指定需要排除的文件及目录。必须是相对于 options.context 的相对路径。
    files:String|Array[String] //指定目录、文件或 globs ，必须是相对于 options.context 的相对路径。 如果是目录则递归查找所有匹配 options.extensions 选项的文件。 

    HtmlWebpackPlugin

    HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。

    首先下载：

    npm install --save-dev html-webpack-plugin

    使用：

    1. const HtmlWebpackPlugin = require('html-webpack-plugin');
    2. module.exports = {
    3.   entry: 'index.js',
    4.   output: {
    5.     path:__dirname+'/dist',
    6.     filename: 'bundle.js',
    7.   },
    8.   plugins: [new HtmlWebpackPlugin()],
    9. };

    运行结果：该插件将为你自动生成一个HTML5 文件， 在 body 中使用 `script` 标签引入你所有 webpack 生成的bundle.js。

    这里是new HtmlWebpackPlugin()未配置option的情况，如果我们想要使用自己设置的html模板就要进行相应的配置。

    参数有很多，使用的时候根据需求查询，

    网址：https://github.com/jantimon/html-webpack-plugin#options

    开发环境

    devserver 配置本地服务器

    首先下载：npm install --save-dev webpack webpack-dev-server webpack-cli

    配置参数：

    1. module.exports = {
    2.     devServer: {
    3. 		//告诉dev-server在服务器启动后打开浏览器。将其设置为true以打开默认浏览器。但是:如果你的电脑有防火墙或者有管理员权限的限制或者电脑很卡 可能不会自定打开浏览器
    4. 		open: true, //cli中 webpack serve --open					
    5. 						
    6. 		//本地服务器监听的端口
    7. 		port: 8080,
    8. 		
    9. 		//启用热更新,直接使用webpack的热更新模块.就是改了代码自动打包后自定刷新浏览器页面:bug就是同open,记住 卡了就刷新一下不用纠结
    10. 	    hot: true,
    11. 		
    12. 		//指定要使用的主机(localhost|ipv4|ipv6)。如果你想让你的服务器可以被外部访问,像这样指定:
    13.         //让你同桌访问 然后你改项目代码 他就会刷新
    14. 		host: '192.168.2.60',
    15. 		
    16. 		//启用gzip压缩
    17. 		compress: true,
    18. 			
    19. 		//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
    20. 		proxy: {
    21. 			'/api': 'http://localhost:7001',
    22. 		},
    23. 		 // proxy: {
    24. 		 //      '/api': {
    25. 		 //        target: 'http://localhost:7001',
    26.          //        secure:true,//如果代理的target是https接口,需要配置它 
    27. 		 //        pathRewrite: { '^/api': '/chongxie' },//请求时重写pathname
    28. 		 //      },
    29. 		 //    },
    30. 	   }		
    31. 	}

     

    配置好以后小黑窗的服务启动指令: webpack server ​​​​​​​

    ​​​

  • 相关阅读:
    supOS APP开发者课程练习册
    scrapy返回400
    javaScript 语句后面加不加分号。
    git命令 本地
    mac flutter 配置
    C++&qt Day9
    文本标注工具doccano 中上传dataset无法成功
    ppt插入html（用office而不是wps）
    网络安全运维掌握这十点核心能力就够了吗？
    Linux下查找文件(日志)中的关键字
  • 原文地址：https://blog.csdn.net/m0_59345890/article/details/126565174