webpack教程

** 为什么要使用webpack **

在一开始打包我们通过研究如何引入 js 代码，提出了我们传统的直接通过 script 标签，来去加载全部的 js 代码问题，于是我们提出了将全部的 js 代码，都打包到一个 js 文件的方案，
但是这种方案会存在作用域,文件大小,可读性,可维护性方面的问题 ，在解决作用域的时候，我们给出了应用立即调用函数的表达式，就是IIFE的方式,可这种方式存在大量的无用代码，文件体积太大,导致了构建和加载效率的问题，
所以不得不对代码进行拆分，对于代码拆分,我们利用node.js 基于 common.js的模块化，采用这种方案，无法在浏览器运行，于是我们又采用了传统的borwserify以及require.js的方案,让类似commonjs的模块在浏览器里运行，
只是使用起来不如commmon.js简洁,随后我们就使用了esmodule来直接做模块管理，但是这种方式在浏览器中支持不太完整，因此，我们提出了webpack这样的工具。

webpack的优点

优点：
1、 支持 esmodule 和 common.js 的两种打包 js 的方案
2、 可以扩展支持其他的一些静态资源
缺点：???

** 起步 **
1、安装webpack 不推荐
npm install webpack webpack-cil --global
2、
3、卸载全局webpack
npm uninstall -g webpack-cli
4、初始化配置
npm init -y 在根目录下配置pack.json文件

	{
		"name":"felixcourses",
		"version":"1.0.0",
		"description":"",
		"main":"index.js",
		//调试
		"script":{
				"test":"echo\"Error:no test specified\"&& exit 1 "
		},
		"keywords":[],
		"author":"",
		"license":"ISC"
	}

5、控制台cd 进入src目录，执行webpack打包webpack报错可以使用npx webpack

6、在setup文件下会多出打包过后的dist文件

7、 查看打包过程终端执行webpack --stats detailed 或者webpack --stats detailed

8、查看webpack配置项npx webpack --help

9、 配置webpack 配置项根目录下创建webpack.config.js
webpack会自动读取webpack.config.js。
名称是固定的，如有更改webpack查询不到

	_dirname:指我们当前webpack所在的路径
	entry：'',设置入口文件	
	production：生产环境
	mode：配置环境
	output：{//出口文件
		filename：'',//指定输出文件名
		path:path.resolve(__dirname,'./dist'),//文件输出路径必须绝对路径
	} 

10、自动引入资源,插件
entry：俗称入口，
output：俗称出口，
loaders：加载器
webpack就是一条生产线，要经过一些流程才可将 ENTRY源文件转换成输出的结果OUTPUT。
entry的js文件依赖于哈可以依赖其他的两个模块，其中被依赖的模块，也有可能依赖于别的js模块，并且这些被依赖的模块也可能会引用css文件，这个css引入需要使用webpack loaders，webpack会把这些过程记录下来，交给webpack编译器，编译器经过加工生成目标文件，如 ：css 和 js 文件，但是在编译的过程中编译器会借助一些依赖来帮助webpack执行一些也定的任务，如：打包优化，资源管理，图片懒加载等等。
当然这些工具就是我们所谓的plugins 怕隔银丝插件

Community：社区插件，
Webpack：内置插件，
Webpack Contrib：第三方插件

** 使用 Community 中的 htmlWebpackPlugin插件**
安装：npm i -D html-webpack-plugin

//在webpack.config.js中配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'./dist'),
        clear:true
    },
    mode:'none',
    plugins:[
        new HtmlWebpackPlugin()
    ]
}

我们可以看到 const HtmlWebpackPlugin = require(‘html-webpack-plugin’) 中的 HtmlWebpackPlugin 为大写开头 说明他是一个构造函数，所以我们 在 plugins 里边new 一下，然后我们再去执行 npx webpack打包 ，我们会发现dist 文件中的index.html 的head上边多了一个<script defer src="bundle.js"></script>，说明插件帮我们自动引入了
配置关联index.html，option选项
template：模板，指定为我们当前的目录下的html文件
filename：输出的文件名称，可自定义
inject：定义打包后自动生成的script标签在什么位置，
inject的两个参数 head 和 body
head：<script defer src="bundle.js"></script> 在meth标签中添加，
body：在 body 中插入

	new HtmlWebpackPlugin(
            {
                template:'./index.html', 
                filename:'app.html',
                inject:'body'
            }
        )

当我们打包过后会有一个问题，我们发现在同级目录下的上次打包idnex.html文件还在，这时候我们可通过给output添加clean属性，来解决每次打包把上次残留的打包html文件以最新的html文件替换掉。
clean开启新替换旧的出口文件

	    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'./dist'),
        clean:true
    },

** 配置开发环境 **

	mode：为环境变量
	module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'./dist'),
        clear:true
    },
    mode:'develpoment',
    plugins:[
        new HtmlWebpackPlugin()
    ]
}

** 使用 socre map 定位报错位置 **
当webpack 打包源代码时，可能会很难追踪到error（错误）和warning（警告）在源代码中的原始位置。例如，如果将三个源文件（a.js，b.js和c.js）打包到一个bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会直接指向到 bundle.js。你可能需要准确地知道错误来自于哪个源文件，所以这种提示这通常不会提供太多帮助。
devtool是配置sourcemap的。
为了更容易地追踪error和warning，JavaScript提供了 source maps 功能，可以将编译后的代码映射回原始源代 码。如果一个错误来自于Ajs，source map 就会明确的告诉你。

	module.exports = {
    	entry:'./src/index.js',
    	output:{
       		 filename:'bundle.js',
       		 path:path.resolve(__dirname,'./dist'),
       		 clear:true
    	},
    	mode:'develpoment',
    	devtool:'inline-source-map',
    	plugins:[
        	new HtmlWebpackPlugin()
   		]

** 使用 devServer 插件用于实时监听数据变化并刷新页面 **
安装:npm i -D webpack-dev-server
** 配置wabpack.config.js文件 **
static热加载指向那个文件夹，
vue中指向src
启动热模块加载更新视图：npx webpack-dev-server
提示热模块加载已启动了：[webpack-dev-server] Hot Module Replacement enabled.
实时更新已生效：[webpack-dev-server] Live Reloading enabled.
特点：devserver没有输出任何的物理文件，而是把他们打包输出的文件的放在了内存中

   const path = require('path')
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   	module.exports = {
  			 entry:'./src/index.js',
   		output:{
   	        filename:'bundle.js',
       		path:path.resolve(__dirname,'./dist'),
       		clean:true,
   		},
   mode:'development',
   devtool:'inline-source-map',
   plugins:[
       new HtmlWebpackPlugin(
           {
               template:'./index.html',
               filename:'app.html',
               inject:'body'
           },

       )
   ],
   devServer: {
       static:'./dist'
   },
}

** asset资源模块 **

• Resource资源模块
  resource模块资源类型可以发送一个单独的文件并导出Url，
  *Inline
  用于导出资源的dataURL,所谓的dataURL就是base64编码的链接
• asset/source
  用于导出资源的源代码，所谓的源代码就是txt类型的代码
• 公用

	{
      	test:/\.jpg$/,
      	type:'asset',
      	
      	paraer:{
         	dataCondition:{
            	maxSize:4*1024
         	}
      	}
  	}

** loader模块**

• 在Webpack中，loader的执行顺序是从右向左执行的。
• 至于为什么是从右到左执行而不是从左到右？
• 因为webpack选择了compose这样的函数式编程方式，而 gulp 却选择应用从左到右的pipe 管道式编程。
  1、使用loaer模块加载css模块
  下载命令： npm i style-loader - D和 npm i css-loader -D
  2、使用 style-loader 和 css-loader

	rules:[
		{
			test:/\.css/,
			use:['style-loader','css-loader']
		}
	]

3、细节： 我们要先通过css-loader让打包识别到css文件，再通过style-loader 把css文件放置在页面上
** less-loader **
下载：npm i less-loader -D 和 npm i less -D
简写：npm i less-loader less -D
我的没法简写下载下边的我都一直用全写了

	{
			test:/\.(css|less)/,
			use:['style-loader','css-loader','less-loader']
		}

细节：可能会报错，重新加载一下就行了

** sass于上方操作一致 **

** 抽离压缩css**
1、借助插件:npm i mini-css-extract-plugin -D和npm i css-minimizer-webpack-plugin -D
注：这个插件是基于webpack5构建的，必须要在webpack5的环境下才可以使用，插件版本需要2.42的！

	const path = require('path')
	const HtmlWebpackPlugin = require('html-webpack-plugin')
	const MinCssExtractPlugin = require('mini-css-extract-plugin')
	const CssMinimizerPlugini = require(' css-minimizer-webpack-plugin')
		module.exports = {
   			 entry:'./src/index.js',
    		output:{
		        filename:'bundle.js',
        		path:path.resolve(__dirname,'./dist'),
        		clean:true,
    		},
    mode:'production',
    devtool:'inline-source-map',
    plugins:[
        new HtmlWebpackPlugin(
            {
                template:'./index.html',
                filename:'app.html',
                inject:'body'
            }
        ),
          new MinCssExtractPlugin (
          	{
          		 filename:'style/[contenthash].css',
          		 
          	}
          )
)
        
    ],
    devServer: {
        static:'./dist'
    },
    rules:[
		{
			test:/\.css/,
			use:['MinCssExtractPlugin -loader','css-loader','less-loader']
		}
	],
	optimizations:{
		minimzer:[
			new CssMinimizerPlugini ()
		]
	}
}