第一次写博客，有点小小的兴奋，也有一点点的慌张～～～

我是一个小白，仅记录自己的学习过程，内容仅供参考，如果有问题的地方，还希望各位大牛多多指教，我菜，菜是原罪，但是我可以学～～

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


																

最新文章
	

    
						
  1. Python之反射，正则
		
    2. 
						
  2. scp命令[转]
		
    3. 
						
  3. 斜堆(一)之 C语言的实现
		
    4. 
						
  4. 【HTML5】表单属性
		
    5. 
						
  5. 中小型数据库 RMAN CATALOG 备份恢复方案(二)
		
    6. 
						
  6. 批处理at命令--一切尽在计划中
		
    7. 
						
  7. GoogleCode新手教程
		
    8. 
						
  8. java中只能有一个实例的类的创建
		
    9. 
						
  9. [leetcode-565-Array Nesting]
		
    10. 
						
  10. [2012-08-06]awk多文件合并并按文件名分段
		
    11. 
						
  11. 【Codeforces Round】 #432 (Div. 2) 题解
		
    12. 
						
  12. 创建ResultUtils类
		
    13. 
						
  13. parseInt和map方法使用案例分析
		
    14. 
						
  14. CSDN沙龙记录
		
    15. 
						
  15. PHP中使用Elasticsearch
		
    16. 
						
  16. CodeForces - 893D 贪心
		
    17. 
						
  17. matplotlib 学习总结
		
    18. 
						
  18. C++11--20分钟了解C++11 (上)
		
    19. 
						
  19. JSON学习笔记-3
		
    20. 
						
  20. BZOJ2034 【2009国家集训队】最大收益
		
    21. 
		

	


热门文章
	

    
									
  1. C++ 回调函数简单示例
			
    2. 
						
  2. CentOS6与CentOS7的网络区别
			
    3. 
						
  3. 依据gff切fa并翻译为蛋白质
			
    4. 
						
  4. swift中的category,扩展
			
    5. 
						
  5. E. Tree Painting（树形换根dp）
			
    6. 
						
  6. python面试--转载
			
    7. 
						
  7. s检验|k-S检验|适应性检验|独立性检验|Cintinuity correction |Fisher‘s Exact Test|Likelihood Ratio|Person Chi-Square|φ系数|Cramer’s V|列联系数
			
    8. 
						
  8. Java 的 LinkedList 的底层数据结构
			
    9. 
						
  9. 关于分频器的FPGA实现整理思路
			
    10. 
						
  10. 吴裕雄--天生自然python学习笔记：Python3 OS 文件/目录方法
			
    11.