webpack的基本使用(五)---webpack中的加载器

在实际开发中,webpack值打包以.js结尾的文件,其他的文件webpack默认不处理,webpack处理其他的文件就使用Loader加载器才可以正常的打包了,否则就会报错了
loader加载器包含：
1).less-loader
2).sass-loader
3).url-loader:打包处理css中与url路径有关的文件
4).babel-loader:处理高级js语法的加载器
5).postcss-loader
6).css-loader,style-loader

1.打包处理CSS文件

 ##打包处理CSS文件
       1.安装包
       npm install style-loader css-loader -D
       2.配置规则
       在webpack.config.js中的export中添加数组rules数组
       module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            }
        ]
    }
}
  *注意:use数组中的loader数组的顺序是固定的,调用loader的顺序是从后往前调用的*

2.打包处理less文件

 ##打包处理less文件
   1.安装包
   npm install less-loader less -D
   2.配置规则
   在webpack.config.js中的export中添加数组rules数组
   module.exports = {
......
plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.less$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader','less-loader']
            }
        ]
    }
}
  3.在index.js中导入即可,然后启动项目即可

3.打包处理scss文件

##打包处理less文件
   1.安装包
 npm install sass-loader node-sass -D
   2.配置规则
   在webpack.config.js中的export中添加数组rules数组
   module.exports = {
......
plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.less$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader','less-loader','sass-loader']
            }
        ]
    }
}
  3.在index.js中导入即可,然后启动项目即可

4.安装post-css自动添加css的兼容性前缀

  #1).安装包
	    npm install postcss-loader autoprefixer -D
	2).在项目根目录创建并配置postcss.config.js文件
	const autoprefixer = require("autoprefixer");
	module.exports = {
	    plugins:[ autoprefixer ]
	}
	3).配置规则：更改webpack.config.js的module中的rules数组
	module.exports = {
	    ......
	    plugins:[ htmlPlugin ],
	    module : {
	        rules:[
	            {
	                //test设置需要匹配的文件类型，支持正则
	                test:/\.css$/,
	                //use表示该文件类型需要调用的loader
	                use:['style-loader','css-loader','postcss-loader']
	            },
	            {
	                test:/\.less$/,
	                use:['style-loader','css-loader','less-loader']
	            },
	            {
	                test:/\.scss$/,
	                use:['style-loader','css-loader','sass-loader']
	            }
	        ]
	    }
	}

5.打包样式表中的图片以及字体文件

   #① 运行 npm i url-loader file-loader -D 命令
	② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
		module: {
		rules: [
		{
		test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
		use: 'url-loader?limit=16940'
		}
		]
		}
	其中 ? 之后的是 loader 的参数项。
	limit 用来指定图片的大小，单位是字节(byte),只有小于 limit 大小的图片，才会被转为 base64 图片

6…打包js文件中的高级语法

 #A.安装babel转换器
npm install babel-loader @babel/core @babel/runtime -D
   B.安装babel语法插件包
    npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在项目根目录创建并配置babel.config.js文件
    
    module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }
D.配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            },{
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}

7.配置vue加载器

#     1.安装vue加载器
      npm install vue-loader vue-template-compiler -D
      2.在webpack.config.js中修改添加以下内容
   		    const VueLoaderPlugin = require("vue-loader/lib/plugin");
		    const vuePlugin = new VueLoaderPlugin();
		    module.exports = {
		        ......
		        plugins:[ htmlPlugin, vuePlugin  ],
		        module : {
		            rules:[
		                ...//其他规则
		                { 
		                    test:/\.vue$/,
		                    loader:"vue-loader",
		                        }
		        ]
		    }
		}
     3.在index,js中导入"import App from  './src/component/App.vue'"        
     4.在终端运行npm run dev

8.在webpack中使用vue

	#1.安装vue
	  npm install vue -S
	  2.在 src -> index.js 入口文件中，通过 import Vue from 'vue' 来导入 vue 构造函数
	  3.创建 vue 的实例对象，并指定要控制的 el 区域
	  4.通过 render 函数渲染 App 根组件

代码如下:

			// 1. 导入 Vue 构造函数
			import Vue from 'vue'
			// 2. 导入 App 根组件
			import App from './components/App.vue'
			const vm = new Vue({
			// 3. 指定 vm 实例要控制的页面区域
			el: '#app',
			// 4. 通过 render 函数，把指定的组件渲染到 el 区域中
			render: h => h(App)
})

8. webpack 打包发布

 #1.在package.文件中
 在"scripts": {
 ......
   "build":"webpack -p"
 }
 2.然后删除dist目录下的东西
 3.执行命令npm run build 生成新的dist目录(dist目录下面的index.html 就可以直接访问首页)