引入：

webpack官网：webpack.docschina.org/

定义：

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

webpack打包工具的核心概念：

入口(entry)

打包项目的入口文件配置,就是上面那个蜘蛛网的起点
输出(output)

打包完成以后的项目文件输出到哪里
loader

打包的时候,解析某些类型的文件需要按照语法去解析编码,不同类型的文件需求不同的加载器
插件(plugin)

具有某类功能的工具
模式(mode)

可以在配置文件中设定开发模式,用于未来开发脚手架的配置
浏览器兼容性(browser compatibility)

低版本浏览器不能用
环境(environment)

Webpack 5 运行于 Node.js v10.13.0+ 的版本。

项目依赖于开发依赖的区别：

项目依赖:在pakage.json中写入dependencies,打包后的项目中会包含这些模块的代码

npm i 模块1,模块2,模块3 --save

npm i 模块1,模块2,模块3 (npm 版本>5.6)

npm i 模块1,模块2,模块3 -S

开发依赖 : 在pakage.json中写入devDependencies 打包后的项目中不会包含这些模块的代码

npm i 模块1,模块2,模块3 --save-dev

npm i 模块1,模块2,模块3 -D

webpack环境安装

1.`npm install webpack webpack-cli -g`不指定版本,默认下载最新版本,全局安装以后直接使用

2.`mkdir webpack-demo` 创建项目文件夹,随意名字同js变量名规则

3.`cd webpack-demo` 进入项目文件夹

4.`npm init -y` 生成项目配置文件：package.json文件

5.创建一个src文件，放我们写程序的源代码

此时，cmd.exe中报错，是因为webpack默认入口是index.js （可以在入口配置中修改默认入口文件）

当我们将mian.js文件改为index.js文件，再再小黑窗中敲下webpack打包，就发现它没有报错，并且，在webpack-demo文件夹中自动帮我们生成了一个dist文件夹（这就是生产代码，也就是打包好的代码）

6.创建一个webpack.config.js的打包配置文件

代码：

module.exports={	 
        项目入口配置,
        项目出口配置,
        加载器配置,
        插件配置,
        开发模式配置,
        其他
   }

webpack.config.js文件中配置

1.项目入口配置：

注意：入口中的出口配置优先级高于出口中的出口路径配置

// 第一种：入口
entry:__dirname+"/src/mian.js",//默认是__dirname+"/src/index.js"

// 第二种：入口
context:__dirname+"/src",//basepath
entry:"./main.js"

// 第三种：多入口
context:__dirname+"/src",//basepath
entry:["./test1.js","/mian.js"]
//有两个入口，一个是src下的mian.js文件，另一个是src下的test.js文件
// 虽然有两个入口，但是项目出口配置中默认出口只有一个：打包生成的dist文件夹中的main.js文件

// 第四种：多入口，多出口
entry:{
    a:__dirname+"/src/main.js",//属性名可以随便写，但是路径一定要对
    test1:__dirname+"/src/test1.js"
}
//两个入口文件：main.js文件、test1.js文件
//在小黑窗内输入打包指令webpack，dist文件夹中会自动生成两个出口文件：
//a.js文件、test1.js文件

 // 第五种 多入口，多出口
entry:{
    a:__dirname+"/src/main.js",//入口：main.js文件，出口文件：a.js文件
    test1:__dirname+"/src/test1.js",//入口：test1.js文件，出口文件：test1.js文件
    test2:{
        import:__dirname+"/src/test2.js",//入口为test2.js文件
        filename:"xxx.js"//给出口文件命名：xxx.js文件，如果不设置filename，出口文件默认为test2.js文件
    }
}

2.项目出口配置：

      // webpack在路径中提供的关键字[name]属性名   [hash]哈希值   [hash:6]6位哈希值  [id]打包的模块id，默认从0开始

output: {
	asyncChunks: true, //创建按需加载的异步 chunk。
	
	path:__dirname+"/dist2",//输出的目录,绝对路径,默认dist
	
	// filename: 'bundle.js', //输出的文件名
	filename: '[name]-666-[id]bundle[hash:5].js', //输出的文件名,[hash:5]为5位哈希值,[id]为打包的chunk的id,[name]为入口的属性名,缺省则为mian,这几个一定记住 vue和react的css作用域-就是这个几个设计的
		
	// 设置库名：

    // 第一种：只设置库名
	// library: 'lib',//库名
    // 第二种：给库名设置样式
	library: {
		name: 'MyLibrary', //库名
		type: 'window', //配置将库暴露的方式。('var'、'module'、'assign'、'assign-properties'、'this'、'window'、'self'、'global'、'commonjs'、'commonjs2'、'commonjs-module'、'commonjs-static'、'amd'、'amd-require'、'umd'、'umd2'、'jsonp' 以及 'system')
	},
	// libraryTarget: 'umd',//配置如何暴露 library,优先级比library高但是:[请使用 output.library.type 代理，因为我们可能在未来放弃对 output.libraryTarget 的支持。]
	
	
	
	//第一种
	auxiliaryComment: 'Test Comment', //各种模块化导出技术的统一注释(把type设置为umd)	  
	// 各种模块化导出技术的分别注释(webpack允许你的项目使用各种模块化技术 它都可以识别并打包)
            
            //第二种
	//  auxiliaryComment: {
	// 	root: 'Root Comment',
	// 	commonjs: 'CommonJS Comment',
	// 	commonjs2: 'CommonJS2 Comment',
	// 	amd: 'AMD Comment',
	// },		


    // 清除之前的出口文件

    // 第一种：删除文件
	clean: true, // 在生成文件之前清空 output 目录（就是将以前打包的删除掉，重新生成一个出口文件）

    // 第二种：在小黑窗中显示应该删除的文件
	// clean: {
	//       dry: true, // 小黑窗打印应该移除的静态资源（但不是删除）
	//     },

    // 第三种：保留指定的文件，将其他文件删除掉
	// clean: {
	// 	keep: /ignored\/dir\//, // 保留 'ignored/dir' 下的静态资源不删(ignored/dir也就是文件)
	// 	// keep(asset) {
	// 	// 	return asset.includes('ignored/dir');//同上
	// 	// },
	// },		
}

清除生产代码中的文件的第三种方法：保留生产代码文件夹中的index.html文件

设置库名：MyLibrary，type：“var”，我们会发现出口文件中声明了一个全局变量MyLibrary

补充：引用axios：

第一种方法：在源代码处引用：

但是我们会发现，webpack打包后的生产代码里面有很多代码，但是我们源代码中只有几行引入代码，并没有写这么多代码，这是因为打包中将axios引用（也就是我们下载的node_modules）也打包给了生产代码，导致生产代码太多，用户加载我们的网站时，需加载的代码太多，服务器加载就会很慢，用户体验感也会不好。

第二种方法：在生产代码中自己创建的index.html中引用axios

毕竟很多公司都有可能使用axios做网络请求，就会在浏览器中下载这份关于axios的js文件，用户在使用axios做网络请求就会很快，因为用户曾经加载过这份文件，浏览器会保留这份js文件，就不用在去做网络请求，直接在本地加载这份js文件，就行了。（CDN公共库：内容分发网络，特点：就近加载，就是你在成都，它就使用成都的服务器进行网络加载）就是一些大多数公司使用的框架，我们就可以直接在生产代码中引用就好了，这样用户加载我们的网页就会很快，因为用户使用其它网站时，大量的公共库都被加载过，浏览器也下载了这些公共库的js文件，再加载就是在本地加载，就会很快，所以，直接在html文件中引用就行。（这也是可以作为优化的一个答案）

3.加载器配置：

webpack在打包时，会根据js文件中的引入语法，去加载其他文件，然后读取其他文件中，webpack只能识别js和json文件，遇到其他文件，就会识别不了，打包时（注意：打包并不会运行代码，只是在解析代码），小黑窗就会报错。

但是，有时候，我们需要用其他类型的文件来存放代码，因为我们希望做到模块化，使程序高内聚,低耦合

所以，加载器就出现了，Loader：去按照对应的文件编码规则进行解析，不同的文件类型，就要使用不同的规则去解析，不同规则就用不同的加载器，需要加载什么文件，就需要先去下载相应的文件模块

css-loader&style-loader

css文件，先将css文件引入入口js文件中：

第一种方法：会将css代码转换为js代码放在生产代码js文件中

然后在webpack.config.js文件中：

module:{
    rules:[
        {test:/\.css$/,use:["style-loader","css-loader"]}
        // use数组的加载是从后到前加载的（也就是先加载css-loader，再加载style-loader）
        // 先去解析css文件，再去将css中样式渲染到页面中
        // 使用什么文件，就用什么文件后缀
        // 注意：需要下载use使用的模块
        // 并且注意css-loader：将css文件解析成js代码，并不负责渲染到网页
        // 负责渲染到页面的是style-loader：创建style标签，然后挂载到页面
        // 原理：是使用fs模块，去读取文件，再用字符串转换出来
    ]
}

再在小黑窗内敲下：

1.npm i css-loader --save-dev下载css-loader模块去将css文件转换为js代码。

2.npm i style-loader --save-dev下载style-loader模块创建style标签，然后挂载到网页。再打包。

我们就会发现在生产代码dist2中，没有css文件，因为打包工具将它转换为了js文件。

第二种方法：

以外部文件形式生成css资源（这个就会在生产文件夹中重新弄一个css文件来存放源代码中引用的css文件）

1.在webpack.config.js文件中需要引入mini-css-extract-plugin这个模块

2.在cmd.exe中敲下：npm i mini-css-extract-plugin --save-dev

3.

注意：这种方法必须做下面的这个插件配置，不然会报错。

file-loader

当项目中引入了常见类型(好多类型, 比如视频音频图片等等媒体编码)的文件,可以使用file-loader将其打包

1.npm i file-loader --save-dev

2.

 //main.js文件:
import "./index.css"
import myaxios from "./myaxios.js"
import myaxios2 from "./myaxios2.js"
import img1 from "./1.png"
import vd1 from "./1.mp4"
console.log(myaxios,myaxios2)
var a=100;
window.onload=function(){
var touxiang=document.createElement("img")
touxiang.src=img1
document.body.appendChild(touxiang)

var v=document.createElement("video")
v.src=vd1
v.controls=true
document.body.appendChild(v)		
 }

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

ts-loader

将 TypeScript 转为 JavaScript

1.npm install ts-loader webpack typescript --save-dev

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

  //main.js文件:
 import "./index.css"
 import myaxios from "./myaxios.js"
 import myaxios2 from "./myaxios2.js"
 import img1 from "./1.png"
 import vd1 from "./1.mp4"
 import test from "./test.ts" 
 console.log(myaxios,myaxios2)
 var a=100;
 console.log(test(),111)
 window.onload=function(){
var touxiang=document.createElement("img")
touxiang.src=img1
document.body.appendChild(touxiang)

var v=document.createElement("video")
v.src=vd1
v.controls=true
document.body.appendChild(v)		
}


//webpack.config.js文件:
 module: {
	rules: [
		//直接以style标签形式动态写入到页面
		// {test:/\.css$/,use:["style-loader","css-loader"]},
		{
			test: /\.css$/,
			//css生成到css文件中,项目中以<link>形式引入使用
			use: [MiniCssExtractPlugin.loader, 'css-loader']
		},
		{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
		{ test: /\.ts$/, use: 'ts-loader' },
	]
},

babel-loader

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

1.npm install babel-loader @babel/core @babel/preset-env webpack -D

2.

 //webpack.config.js文件
 module: {
	rules: [
		//直接以style标签形式动态写入到页面
		// {test:/\.css$/,use:["style-loader","css-loader"]},
		{
			test: /\.css$/,
			//css生成到css文件中,项目中以<link>形式引入使用
			use: [MiniCssExtractPlugin.loader, 'css-loader']
		},
		{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
		{ test: /\.ts$/, use: 'ts-loader' },
		//exclude:/node_module/ 意思是下载的模块不转码,其他js文件转码
		 {
		      test: /\.js$/,
		      exclude: /(node_modules|bower_components)/,
		      use: {
		        loader: 'babel-loader',
		        options: {
		          presets: ['@babel/preset-env'],
		          plugins: ['@babel/plugin-proposal-object-rest-spread']
		        }
		      }
		    }
	]
},

总结:babel-loader 很慢！解决办法：要排除 node_modules，参考文档中的 loaders 配置的 exclude 选项。

sass-loader

把Sass代码转化为css代码

1.npm install sass-loader sass webpack --save-dev

2.

  //mian.js文件:
 import './style.scss';

 //style.scss文件:
  $color1: red;
.box {
 color: $color1;
}

//webpack.config.js文件:
 module: {
rules: [
  {
    test: /\.s[ac]ss$/i,
    use: [        
      'style-loader',  //不用单独引入 直接运行js代码 动态写入页面    
      'css-loader',
      // 将 Sass 编译成 CSS
      'sass-loader',
    ],
  },
],
},

4.插件plugin：

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

可以这样理解: loader的关注点在某种类型的文件编码解析上,插件plugin是关注某一个功能点:比如托管服务器,错误语法检测,挂载打包代码到模板文件等等.

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

EslintWebpackPlugin

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

eslint-webpack-plugin插件就是使用 eslint 来查找和修复 JavaScript 代码中的问题。

eslint-webpack-plugin 3.0 仅支持 webpack 5。

1.环境准备:

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

如果未安装 eslint >= 7 ，你还需先通过 npm 安装：

npm install eslint --save-dev

2.引入插件

3.配置插件（其实，我们不使用这个插件，webpack也会去查错，也许是es5自己有这个功能）

// 插件配置,
  plugins: [
	new MiniCssExtractPlugin({
		filename: '[hash].css' //在生产代码中的文件名
        //css生成到css文件中,项目中手动以<link>形式引入使用
	}),
    new ESLintPlugin({
        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。

1.环境安装：npm install --save-dev html-webpack-plugin

2.引入html-webpack-plugin插件

3.插件配置：

     new HtmlWebpackPlugin({
        title: "ly-app", //html的标题默认为"Webpack App",
		filename: "index.html", //模板html打包后生成的文件名,放在output.path里面,默认"index.html"
		template: __dirname + "/public/index.html", //模板html文件的路径,
		inject: "body", //'head' || 'body' 打包后的bundle挂载到模板html的位置:'body' 放置在body元素的底部。'head'将把脚本放在head元素中。,
		publicPath: "./", //The publicPath used for script and link tags,
		// favicon:__dirname + "/public/favicon.ico", //打包前前前小图标的路径,默认为:"",
		//"洗澡":压缩项配置
		// minify:true,
		minify: {
			collapseWhitespace: true, //是否压缩HTML:空格回车
			keepClosingSlash: true,//在单元素上保留末尾的斜杠
			removeComments: true, //是否清除HTML注释  
			removeRedundantAttributes: true,
			removeScriptTypeAttributes: true, //是否删除script的type属性(这个属性对于现代浏览器没啥用)
			removeStyleLinkTypeAttributes: true, //是否删除< style>和< link>的type="text/css"  
			minifyJS: false, //是否压缩页内JS  ,
			minifyCSS: true //是否压缩页内CSS  
		},
		cache:true,//仅当文件被更改时才重新打包,否则使用上一次打包时缓存起来的,默认true
    })
    //该插件将为你生成一个HTML5 文件， 在 body 中使用 `script` 标签引入你所有 webpack 生成的bundle.js。 
    //但是每次生成的模板都是新的

5.开发环境devServer配置

我们在开发项目时(development|dev), 常常需要一个本地服务器托管本地资源,比如你们用的vscode的右键open in server 的插件.我们可以在webpack集成的打包环境中配置本地服务器

1.安装:npm install --save-dev webpack webpack-dev-server webpack-cli

2.开发模式配置：

      // 开发模式配置,
mode:"none",//在小黑窗内不显示警告信息
devServer: {
	//告诉dev-server在服务器启动后打开浏览器。将其设置为true以打开默认浏览器。但是:如果你的电脑有防火墙或者有管理员权限的限制或者电脑很卡 可能不会自定打开浏览器
	open: true, //cli中 webpack serve --open					
					
	//本地服务器监听的端口
	port: 8080,
	
	//启用热更新,直接使用webpack的热更新模块.就是改了代码自动打包后自定刷新浏览器页面:bug就是同open,记住 卡了就刷新一下不用纠结
    hot: true,
	
	//指定要使用的主机(localhost|ipv4|ipv6)。如果你想让你的服务器可以被外部访问,像这样指定:
    //让你同桌访问 然后你改项目代码 他就会刷新
	host: '192.168.6.60',
	
	//启用gzip压缩
	compress: true,
		
	//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
	proxy: {
		'/api': 'http://localhost:7001',
	},
	 // proxy: {
	 //      '/api': {
	 //        target: 'http://localhost:7001',
     //        secure:true,//如果代理的target是https接口,需要配置它 
	 //        pathRewrite: { '^/api': '/chongxie' },//请求时重写pathname
	 //      },
	 //    },
   }

3.启动指令：webpack server

注意：热更新最大的特点就是打包后的文件是放在了内存中，而不是刻录在磁盘中，就不是很卡。

打包文件的指令有哪些？

1.需要每次自己更新：webpack

2.热更新（代码改变就更新，打包在内存中）：webpack server

3.cli指令，在小黑窗中直接带参数，可以进行打包配置（检测到代码改变就更新，但是是打包在磁盘中，就会很卡）：webpack --watch

全部代码：

  // 引入mini-css-extract-plugin模块
var MiniCssExtractPlugin=require("mini-css-extract-plugin")
 // 引入eslint-webpack-plugin插件
const ESLintPlugin = require('eslint-webpack-plugin');
// 引入html-webpack-plugin插件
const HtmlWebpackPlugin=require("html-webpack-plugin")
 module.exports={	 
  // 项目入口配置,

// 第一种
// entry:__dirname+"/src/mian.js",//默认是__dirname+"/src/index.js"

// 第二种
context:__dirname+"/src",//basepath
entry:"./main.js",

// 第三种
// context:__dirname+"/src",//basepath
// entry:["./test1.js","/mian.js"]
//有两个入口，一个是src下的mian.js文件，另一个是src下的test.js文件
// 虽然有两个入口，但是项目出口配置中默认出口只有一个：打包生成的dist文件夹中的main.js文件

// 第四种
// entry:{
//     a:__dirname+"/src/main.js",//属性名可以随便写，但是路径一定要对
//     test1:__dirname+"/src/test1.js"
// },
//两个入口文件：main.js文件、test1.js文件
//在小黑窗内输入打包指令webpack，dist文件夹中会自动生成两个出口文件：
//a.js文件、test1.js文件

// 第五种 多入口，多出口
// entry:{
//     a:__dirname+"/src/main.js",//入口：main.js文件，出口文件：a.js文件
//     test1:__dirname+"/src/test1.js",//入口：test1.js文件，出口文件：test1.js文件
//     test2:{
//         import:__dirname+"/src/test2.js",//入口为test2.js文件
//         filename:"xxx.js"//给出口文件命名：xxx.js文件，如果不设置filename，出口文件默认为test2.js文件
//     }
// }


// webpack在路径中提供的关键字[name]属性名   [hash]哈希值   [hash:6]6位哈希值








// 项目出口配置,


// webpack在路径中提供的关键字[name]属性名   [hash]哈希值   [hash:6]6位哈希值  [id]打包的模块id，默认从0开始

output: {
	asyncChunks: true, //创建按需加载的异步 chunk。
	
	path:__dirname+"/dist2",//输出的目录,绝对路径,默认dist
	
	// filename: 'bundle.js', //输出的文件名
	filename: '[name]-666-[id]bundle[hash:5].js', //输出的文件名,[hash:5]为5位哈希值,[id]为打包的chunk的id,[name]为入口的属性名,缺省则为mian,这几个一定记住 vue和react的css作用域-就是这个几个设计的
		
	// 设置库名：

    // 第一种：只设置库名
	// library: 'lib',//库名
    // 第二种：给库名设置样式
	library: {
		name: 'MyLibrary', //库名
		type: 'window', //配置将库暴露的方式。('var'、'module'、'assign'、'assign-properties'、'this'、'window'、'self'、'global'、'commonjs'、'commonjs2'、'commonjs-module'、'commonjs-static'、'amd'、'amd-require'、'umd'、'umd2'、'jsonp' 以及 'system')
	},
	// libraryTarget: 'umd',//配置如何暴露 library,优先级比library高但是:[请使用 output.library.type 代理，因为我们可能在未来放弃对 output.libraryTarget 的支持。]
	
	
	
	
	auxiliaryComment: 'Test Comment', //各种模块化导出技术的统一注释(把type设置为umd)	  
	//各种模块化导出技术的分别注释(webpack允许你的项目使用各种模块化技术 它都可以识别并打包)
	// auxiliaryComment: {
	// 	root: 'Root Comment',
	// 	commonjs: 'CommonJS Comment',
	// 	commonjs2: 'CommonJS2 Comment',
	// 	amd: 'AMD Comment',
	// },	


    // 清除之前的出口文件

    // 第一种：删除文件
	clean: true, // 在生成文件之前清空 output 目录（就是将以前打包的删除掉，重新生成一个出口文件）

    // 第二种：在小黑窗中显示应该删除的文件
	// clean: {
	//       dry: true, // 小黑窗打印应该移除的静态资源（但不是删除）
	//     },

    // 第三种：保留指定的文件，将其他文件删除掉
	// clean: {
	// 	keep: /index.html/, // 保留 'ignored/dir' 下的静态资源不删(ignored/dir也就是文件)
	// 	// keep(asset) {
	// 	// 	return asset.includes('ignored/dir');//同上
	// 	// },
	// },		
},




// 加载器配置,
// webpack在打包时，会根据js文件中的引入语法，去加载其他文件，然后读取其他文件中，webpack只能识别js和json文件，遇到其他文件，就会识别不了，打包时（注意：打包并不会运行代码，只是在解析代码），小黑窗就会报错。
// 但是，有时候，我们需要用其他类型的文件来存放代码，因为我们希望做到模块化 ，使程序高内聚,低耦合
// 所以，加载器就出现了，Loader：去按照对应的文件编码规则进行解析
// 不同的文件类型，就要使用不同的规则去解析，不同规则就用不同的加载器
module:{
    rules:[
        // 第一种方法：会将css代码转换为js代码放在生产代码js文件中 
        // {test:/\.css$/,use:["style-loader","css-loader"]}
        // use数组的加载是从后到前加载的（也就是先加载css-loader，再加载style-loader）
        // 先去解析css文件，再去将css中样式渲染到页面中
        // 使用什么文件，就用什么文件后缀
        // 注意：需要下载use使用的模块
        // 并且注意css-loader：将css文件解析成js代码，并不负责渲染到网页
        // 负责渲染到页面的是style-loader：创建style标签，然后挂载到页面
        // 原理：是使用fs模块，去读取文件，再用字符串转换出来

        // 第二种方法：以外部文件形式生成css资源
        {test:/\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]}
    ]
},



// 插件配置,
plugins: [
	new MiniCssExtractPlugin({
		filename: '[hash].css' //在生产代码中的文件名
        //css生成到css文件中,项目中手动以<link>形式引入使用
	}),
    // new ESLintPlugin({
    //     context:__dirname+"/src", //指定文件根目录
    // extensions:["js","css"] ,//指定需要检查的扩展名.不配置默认为"js"
    // exclude:"node_modules" ,//指定需要排除的文件及目录。必须是相对于 options.context 的相对路径。
    
    // }),
    new HtmlWebpackPlugin({
        title: "ly-app", //html的标题默认为"Webpack App",
		filename: "index.html", //模板html打包后生成的文件名,放在output.path里面,默认"index.html"
		template: __dirname + "/public/index.html", //模板html文件的路径,
		inject: "body", //'head' || 'body' 打包后的bundle挂载到模板html的位置:'body' 放置在body元素的底部。'head'将把脚本放在head元素中。,
		publicPath: "./", //The publicPath used for script and link tags,
		// favicon:__dirname + "/public/favicon.ico", //打包前前前小图标的路径,默认为:"",
		//"洗澡":压缩项配置
		// minify:true,
		minify: {
			collapseWhitespace: true, //是否压缩HTML:空格回车
			keepClosingSlash: true,//在单元素上保留末尾的斜杠
			removeComments: true, //是否清除HTML注释  
			removeRedundantAttributes: true,
			removeScriptTypeAttributes: true, //是否删除script的type属性(这个属性对于现代浏览器没啥用)
			removeStyleLinkTypeAttributes: true, //是否删除< style>和< link>的type="text/css"  
			minifyJS: false, //是否压缩页内JS  ,
			minifyCSS: true //是否压缩页内CSS  
		},
		cache:true,//仅当文件被更改时才重新打包,否则使用上一次打包时缓存起来的,默认true
    })
    //该插件将为你生成一个HTML5 文件， 在 body 中使用 `script` 标签引入你所有 webpack 生成的bundle.js。 
    //但是每次生成的模板都是新的 


],
// 开发模式配置,
mode:"none",//在小黑窗内不显示警告信息
devServer: {
	//告诉dev-server在服务器启动后打开浏览器。将其设置为true以打开默认浏览器。但是:如果你的电脑有防火墙或者有管理员权限的限制或者电脑很卡 可能不会自定打开浏览器
	open: true, //cli中 webpack serve --open					
					
	//本地服务器监听的端口
	port: 8080,
	
	//启用热更新,直接使用webpack的热更新模块.就是改了代码自动打包后自定刷新浏览器页面:bug就是同open,记住 卡了就刷新一下不用纠结
    hot: true,
	
	//指定要使用的主机(localhost|ipv4|ipv6)。如果你想让你的服务器可以被外部访问,像这样指定:
    //让你同桌访问 然后你改项目代码 他就会刷新
	host: '192.168.6.60',
	
	//启用gzip压缩
	compress: true,
		
	//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
	proxy: {
		'/api': 'http://localhost:7001',
	},
	 // proxy: {
	 //      '/api': {
	 //        target: 'http://localhost:7001',
     //        secure:true,//如果代理的target是https接口,需要配置它 
	 //        pathRewrite: { '^/api': '/chongxie' },//请求时重写pathname
	 //      },
	 //    },
   }
// 其他
}

webpack打包工具——环境安装

引入：

定义：