webpack打包

今天要写的是使用webpack打包各种资源
下面是我了解的一些打包流程，欢迎大佬来补充

---

使用webpack打包样式资源

• webpack如果要编译css、less等样式文件，需要使用loader帮忙翻译
  如何打包样式文件
• 在src下分别创建index.css和index.less文件，并且在里面写一些样式
  
  
• 在src下创建一个index.js文件,将index.less和index.css文件导入进来
  
• webpack配置文件
• 因为webpack不能直接编译css、less文件，所以就需要Loader帮忙将css、less文件翻译成webpack可以认识的模块，所以必须创建webpack配置文件
• webpack配置文件：
  ①、作用：指示webpack去做什么！（当你运行webpack指令时，会加载里面的配置）
  ②、所有构建工具都是基于nodejs平台运行的，模块化默认采用CommonJs
  ③。具体配置

	//resolve用来拼接绝对路径的方法
	const {
   resolve} = require('path')
	//webpack配置，使用CommonJs暴露出去
	module.exports = {
   
	  //入口起点：./src/index.js
	  entry:'./src/index.js',
	  //输出路径，output是一个对象，打包后输出到当前文件下
	  output:{
   
	    filename:'built.js',
	    path:resolve(__dirname,'build')
	  },
	  //loader的配置
	  module:{
   
	  	//编译的规则
	    rules:[
	      //详细的loader配置
	      {
   
	      	//匹配哪些文件：匹配css文件，其他文件运行到这里跳过
	        test:/\.css$/,
	        //使用哪些loader进行处理
	        use:[
	        	//use数组中loader执行顺序：从右到左，从下到上，依次执行
	        	//'style-loader'：创建style标签，将js中的样式资源插入，添加到head中生效
	            'style-loader',
	            //‘css-loader’：将css文件变成CommonJs模块加载js中，里面内容样式字符串
	            'css-loader'
	        ]
	      },
	      {
   
	        test:/\.less$/,
	        use:[
	          'style-loader',
	          'css-loader',
	          //将less文件编译成css文件
	          'less-loader'
	        ]
	      }