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了，也欢迎大家补充