webpack-入门介绍

一、webpack介绍

1、什么是webpack

  • webpack是一个模块打包器。
  • webpack包括:入口、输出、loader、插件等。
  • 在webpack看来,前端的所有资源文件(js/json/css/img/less...)都会作为模块处理。
  • webpack将根据模块的依赖关系进行静态分析,生成对应的静态资源。

2、什么是loader

  • webpack本身只能加载js和json,其他类型的文件都需要安装相应的loader来加载。
  • loader本身也是运行在node.js环境中javascript模块
  • loader本身是一个函数,接受源文件作为参数,返回转换的结果
  • loader一般以xxxx-loader方式命名,xxx代表了这个loader要做的转换功能,比如css-loader

3、配置文件

  • webpack.config.js 是一个node模块,返回一个json格式的配置信息对象

4、插件

  • 插件可以完成一些loader不能完成的功能
  • 插件的使用一般是在webpack的配置信息plugins选项中指定
  • CleanWebpackPlugin:自动清除指定文件夹资源
  • HtmlWebpackPlugin:自动生成html文件
  • UglifyJSPlugin:压缩js文件

二、安装webapck

cnpm install webpack -g  //  全局安装
cnpm install webpack --save-dev  //  局部安装

 

posted @ 2021-10-11 14:04  AnnLing  阅读(70)  评论(0编辑  收藏  举报