webpack-webpack中的loaders

1.loader是什么呢?

    loader 可以用于对模块的源代码进行转换,我们可以将css、less、sass等也看成是一个模块,我们是通过import来加载这个模块的。在加载这个模块时,webpack其实并不知道如何对其进行加载,我们必须制定对应的loader来完成这个功能。

2.npm install html-webpack-plugin -D中有哪些loaders呢?分别有什么作用?

css-loader:负责加载css文件,将.css文件进行解析。安装:npm install css-loader -D

style-loader:插入style的操作。安装:npm install style-loader -D

less-loader:自动使用less工具转换less到css。安装:npm install less-loader -D

postcss-loader:PostCSS是一个通过JavaScript来转换样式的工具,这个工具可以帮助我们进行一些CSS的转换和适配,比如自动添加浏览器前缀、css样式的重置。安装:npm install postcss-loader -D

file-loader:file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源,并且会将它放到我们输出的文件夹中。安装:npm install file-loader -D

url-loader:url-loader和file-loader的工作方式是相似的,但是可以将较小的文件,转成base64的URI。 安装:npm install url-loader -D

3.什么是Plugin?

Plugin可以用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等。

4.webpack中有哪些plugin?分别有什么作用?

CleanWebpackPlugin:我们在之前的演练中,每次修改了一些配置,重新打包时,都需要手动删除dist文件夹,CleanWebpackPlugin可以帮助我们在每次打包时,自动删除原有的dist文件夹。安装:npm install clean-webpack-plugin -D

HtmlWebpackPlugin:我们之前的配置中,打包的dist文件夹中是没有index.html文件,这是不规范的。在进行项目部署的时,必然也是需要有对应的入口文件index.html,所以我们也需要对index.html进行打包处理。安装:npm install html-webpack-plugin -D

DefinePlugin:DefinePlugin允许在编译时创建配置的全局常量,是一个webpack内置的插件(不需要单独安装)。

CopyWebpackPlugin:在vue的打包过程中,如果我们将一些文件放到public的目录下,那么这个目录会被复制到dist文件夹中,这个复制的功能,我们可以使用CopyWebpackPlugin来完成。安装:npm install copy-webpack-plugin -D

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容