webpack打包其他资源文件

Posted 2021-05-17 ~往无前

一、什么是loader？

• 从webpack本身来说，主要是用作处理我们写的js代码，并且webpack会处理js之间的依赖。
• 但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css,图片，也包括一些高级的ES6转成ES5代码，将TypesScript代码庄臣ES5代码，将scss,less，转成css，将.jsx,.vue文件转成js文件等等。
• 对于 webpack本身的能力来说，对于这些转化是不支持的。这时候我们就可以给webpack扩展对应的loader就可以了。loader让webpack能够去处理其他类型的文件，并将他们装换为有效模块，以供应用程序使用。以及添加到依赖图中。
  -loader使用
  步骤一：通过npm安装需要使用的loader
  步骤二：在webpack.config.js中的modules关键字进行配置

1.loader处理样式资源

1.1 依赖less文件

在入口文件中引入一个less文件

	import './css/index.less'

1.2 安装对应的loder

less-loader则对less文件进行加载，less是将less语法转译为css语法。

	npm install less less-loader -D

转译为css，还要使用import加载，这时候我们需要使用css-loader来加载css文件

 npm install css-loader -D

此时css的模块加载完成，最后还需要将导出的模块作为样式添加到DOM中，这时候我们就用到了style-loader

npm install style-loader -D

   //loader的配置
    module:{
        rules:[
            //详细的loader配置
            {   //表示.css结尾的文件
                test:/\\.css$/,
                //使用那些loader进行处理
                use:[
                    //user中的loader执行顺序，从右到左
                    //创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载到js中，里面内容是样式字符串
                    'css-loader',
                ]
            },
            {
                test:/\\.less$/,
                user:[
                    'style-loader',
                    'css-loader',
                    //将less文件编译成css文件
                    'less-loader'
                ]
            }
        ]
    },

1.3将css导出为一个单独文件

将css文件打包成一个单独文件，这里我们需要使用一个插件来实现：

1.安装插件：

   npm install MiniCssExtractPlugin -D

2.文件配置

 module:{
        rules:[
           { 
               test:/\\.css$/,
               use:[
                //这个loader取代style-loader,作用：提取js中的css成单独文件
                   { loader:MiniCssExtractPlugin.loader,
                     options: {
                        esModule: false,
                        //表示输出的路径
                         publicPath: "../",
                    }
                },
                 'css-loader'            
                ]
            }
        ]
    },
 //插件使用
 plugins:[
        new MiniCssExtractPlugin({
        	//输出的文件名
            filename:'css/built.css'
        })
    ],

2.loader处理图片资源

当我们在项目中导入图片资源的时候，也需要将它进行打包为模块，这里也需要使用loader来处理图片

2.1 引入依赖

import img from './image.png'
//或者是在css文件中引入
background:ulr('./image.png')

2.2 安装相应的loader

url-loader功能类似于file-loader，用于将文件转换为base64URL格式。

	npm install url-loader -D

2.3文件配置

//处理图片资源
{
	test:/\\.(png/jpg/gif)$/,
	user:[
		//使用对象
		{loader:'url-loader',
		 option:{
		 limit:8192,
		 //添加一个name属性，img表示输出的文件夹名，[name]表示文件原名，hash5表示文件名的长度 ext:表示使用图片原来的后缀名
		 name:'img/[name].[hash:5].[ext]',
		 }
		 
		}
	]
}

1.option中的limit属性限制文件大小。文件大小小于指定的大小，则进行base64编码，减少http请求数量。返回一个DataURL。此时输出的图片资源是一个base64编码的文件。
2.如果文件体积等于或大于限制，默认情况下将使用file-loader并将所有参数传递给它。此时的图片文件是一个http请求，输出一个http的访问地址。

所以这里必须要安装file-loader这个包来处理图片：

	npm install file-loader -D