webpack基本使用（一）

第一次写博客，有点小小的兴奋，也有一点点的慌张～～～
我是一个小白，仅记录自己的学习过程，内容仅供参考。
1.最基本的：如何使用webpack
#npm/yarn install/add webpack

webpack默认的config文件名字必须是webpack.config.js,如果需要使用其他的名字，
在执行打包的时候，必须嗷这样来使用npm run --config webpacj.other.config.js。
有点长，不如配个脚本舒舒服服的，在package.json中的scripts中配置:
"build": "webpack --config webpack.other.config.js"，然后执行一下npm run build,瞅瞅～～

2. 基本config

let path = require("path"); // 这个东西是webpack的核心，不需要安装，直接用就行了哟
module.exports = {
	// webpack打包时的环境，开发或者生产环境，由你选择，但是呢，我们一般会配置一个基本的webpack.config.js,里面配置一些公共的配置，然后另外新建两个webpack的配置文件，一个用于开发，一个用于生产环境，这样子我们在打包的时候，就省去了我们自己去修改mode了呀，毕竟代码能做的事情，我们这辈子都不可能手动去做哈
	mode: "production/development",
	// webpack没有打包html这个说法吧，所以说这个入口是js文件嗷！！
	entry: "./src/index.js", // webpack执行打包时的入口
	// 补充一哈，如果是多个入口打包的话，就是介个样子来写的哟,具体的用法，后面再更新嗷，不然都没有写的了～
	// entry: {
	// "home": "./src/home/index.js", 
	// "main": "./src/main/index.js"
	// },
	devServer: {}, // 这个应该很熟悉哦，代理，简直用的巴巴适适的嘛
	output: { // 跟入口文件对应起来的，有入口，肯定有出口的
		/* 这个地方，一定要注意，必须是绝对路径（要画重点，就像是没到节假日你的
		女朋友给你划重点的那样），但是在实际开发的过程中，这个
		路径我们根本没发写成绝对路径呀～难呐。因此，需要使用到
		webpack本身的一个核心模块path，这个模块会调用一个resolve
		方法，直接将相对路径就解析成了绝对路径。怎么样～是不是贼溜鼻的
		*/
		// zzff,这个大家可能不知道是什么，但是dist大家肯定熟悉吧，没错，这个就是我们在打包的时候生成的目录的名字
		path: path.resolve(__dirname, "zzff"),
		/* 入口打包出来之后，新生产的文件的名字，如果想要将生成的
		 index.js这个文件放在zzff目录下的某个文件夹下面呢，就只
		 需要这样写就行了:  filename: "js/index.js"
		*/
		filename: "index.js",
		/* 打包的所有文件，只要设计到引用的，例如：src="css/index.css",都会在路径的最前面加上www.zzff.cn，src就变成了	src="www.zzff.cn/css/index.js"
		是不是这个路径看着有种怪怪的感觉，有那就对了，一般呢，很少在这个地方配置域名的，一般都是./或者../,嘿嘿嘿～～～继续往下看^_^
		*/
		publicPath: "www.zzff.cn"	
	},
	// 这个很重要的，要划重点哦，
	// webpack的插件集合（我是这个样称呼它的），是一个数组，存放的是webpack需要使用的插件
	// 既然是插件，说明肯定不是webpack自带的，需要我们安装哈，使用到的插件安装会在底部统一例举
	plugins: [
		// 插件一半都是这么用的，要new它，当然各位朋友也可以用它来new个女/男朋友，哈哈哈～(^-^)
		new HtmlWebpackPlugin({ // html插件，打包之后在zzff目录下面会创建一个以html结尾的文件
		template: "./src/index.html", // 相当于entry，一个入口文件，这个必须要有的哦
		filename: "index.html/zf.html", // 熟吧，打包生成后的html文件的名字
		minify: { // 压缩html的一些config
			removeComments: true, // 清除html中的注释，默认为false
			collapseWhitespace: true, /* 清除html中的空格、换行符，相当于把html的内容全部打包成一行了，画面太美
			简直不敢想象。默认为false（这个配置我刚开始的时候使用
			是正常的，写文章复现的时候就不行了，知道的朋友麻烦给我
			说一下是怎么会事呢，灰常感谢）
			*/
			minifyCSS: true, // 压缩html页面中的css样式，有时候我们可能会将样式写在html中的style标签里面，这个时候就需要我们去进行压缩
			// 还有很多属性，就不一个一个例举了，毕竟百度才是万能的嘛
		} 
		hash: true, // 这个东西加上，在打包的时候，会在打包文件的后面随机生成一串哈希戳哦
		}),
		new MiniCssExtractPlugin({ // 抽离html中的css代码
			filename: ".css/index.css" //抽离出来的css代码放置在css文件夹下面的index.css文件中
			/* 	想了半天，难怪当初看的时候就只写了一个属性，这个要配合到loader来使用，贼舒服
			*/
		}),
		// webpack的插件太多佬，就不一一写了，以后遇上了再记录一下就OK了，也欢迎大家补充👏
	],
	module: {
		// 配置这些规则，是为了将webpack无法解析的模块转换成可以解析的模块
		// 这个也就是loader哦，loader全部都需要安装
		// loader的执行顺序： 从右向左 从下向上
		rules: [
			{test: /\.css$/, use: [
				// css-loader 负责解析css文件中的一些特殊语法，例：@import xxx 引入其他的css文件
            	// style-loader 负责把css文件插入到head标签中
            	MiniCssExtractPlugin.loader, // 表示将html中的css全部抽离出来，放置到index.css文件
                    //中，然后link标签自动将index.css文件引入到html中
                    'css-loader',

                    // 注意位置一定不能错，需要在处理css-loader之前执行
                    // postcss-loader 在打包过程中会自动给style中的属性带上浏览器的
                    // 前缀⭐️ 如果直接运行的话会报错，需要给postcss在根目录下添加一个
                    // 配置名为postcss.config.js的文件，具体配置信息请看post.config.js配置文件

                    // 如果需要将scss转换成css并插入到html中的话，还需要安装 node-sass sass-loader这两个包
                    'postcss-loader',
                ]
            },
            {test: /\.js$/, use: [
                    // 校验eslint规范
                    // 安装 npm i eslint eslint-loader -D
                    // 配置eslint规则可以在eslint的官网中的 演示->eslint demo -> 点击 rules configuration -> 选择需要的配置 -> Download .eslintrc.json file with this configuration(默认
                    //  下载的是eslintrc.json,需要自己手动在文件名前加一个.,文件名变成.eslintrc.json -> 然后放置到项目的root目录下，与src同级)
                    {
                        loader: 'eslint-loader',
                        options: {
                            enforce: 'pre', // 该属性表示让eslint强制在js文件打包之前执行
                            // enforce: 'post', // post属性表示eslint校验强制在js文件打包之后执行
                        }
                    }
                ],
            },
            // ES6转ES5的loader npm i label-loader @babel/core @babel/preset-env
            // @babel/core是babel的核心包,提供转换源代码的API
            // @babel/preset-env 这是一个插件'库', 该模块将高级的js语法转换成较低级的语法
            // 如果使用的ES7的语法，则还需要安装@babel/plugin-proposal-class-properties这个插件
            {test: /\.js$/,
             exclude: /node_modules/, // 匹配js文件，但是不匹配node_modules中的js文件
             include: path.resolve(__dirname, 'src'), // 只匹配src目录下的js文件 
             use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [ // js插件 库 集合
                                '@babel/preset-env', // 该插件库用来将ES6转换成ES5
                            ],
                            // @log
                            // class log{} @+函数名 类的装饰器（具体使用方法请自行百度），在编译时可以将class语法糖编译成我们熟悉的js语法
                            // 如果要使用类的装饰器，还需要安装对应的插件，详情见babel官网
                            plugins: [
                                // loose: true 表示宽松模式
                                ["@babel/plugin-proposal-decorators", { "legacy": true }], //类的装饰器使用的插件，注意：顺序不能放错
                                
                                // 该插件的作用是解析类的属性，比如使用到ES7的class语法糖
                                ["@babel/plugin-proposal-class-properties", { "loose" : true }], //类的装饰器使用的插件，注意：顺序不能放错
                                
                                // @babel/plugin-transform-runtime安装该插件是将压缩后的js文件中的相同的代码抽离出来,实例上的方法默认是不会解析的
                                // 如果是一些更高级的写法则无法解析，需要安装@babel/polyfill补丁模块，这个补丁模块需要引用到代码里面，所以不能只在dev环境中使用（不加-D）
                                [
                                    "@babel/plugin-transform-runtime",
                                    // { // 需要去搜这些是干嘛用的
                                    //   "absoluteRuntime": false,
                                    //   "corejs": false,
                                    //   "helpers": true,
                                    //   "regenerator": true,
                                    //   "useESModules": false,
                                    //   "version": "7.0.0-beta.0"
                                    // }
                                  ]
                            ]
                        }
                    }
                ]
            },

            // 图片打包file-loader
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    // file-loader是打包图片的loader，在js文件中引入的图片是图片的地址，打包之后在zzff(dist)目录下是找不到对应路径的
                    // 此时需要使用file-loader这个loader来进行处理，将图片的路径转成哈希编码，然后会对路径自动进行解析
                    // file-loader打包的是js，css文件中的图片的路径，但是不会打包html中img引入放入图片的路径，需要使用html-withimg-loader来打包html中的img路径
                    // url-loader 做一个限制，当图片小于64k的时候，会用base64打包图片，转成base64码 如果大于，则会默认使用file-loader打包图片，打包出来的是一个真实的图片
                    // loader: 'file-loader',
                    loader: 'file-loader',
                    options:{
                        // limit: 200 * 1024, // 表示当图片小于200*1024的时候，全部转成base64，如果大于，则默认会使用file-loader打包一个真实的图片
                        esModule:false,
                        outputPath: '/img/', // 表示将图片打包到zzff/img目录下
                        publicPath: 'http://www.zzff.cn' // 表示只给所有的图片位置加上该公共路径
                    } 
                }
            },
            // 打包html页面中的图片路径
            {
                test: /\.(html|html)$/,
                use: "html-withimg-loader"
            }
		]
	},
}

emmmmmm~~写不动了，后面整理一下在写，脑壳有点晕了😷

整理一下需要安装的插件(需要使用require引入)
npm install html-webpack-plugin -D
npm install Mini-css-extract-plugin -D
babel插件，不需要使用require引入，直接在rules中使用即可
npm install @babel/core @babel/preset-env style-loader css-loader eslint eslint-loader postcss-loader scss-loader @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime file-loader url-loader html-withimg-loader
// 可能存在遗漏的插件，报错的时候自行百度安装

第一篇博客终于诞生了，虽然很烂，总的来说是一个好的开始的，如果写的有问题的地方还请各位大佬多多指教～～～～