一、webpack是什么
webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ,文档地址是https://webpack.github.io/docs,官网对webpack的定义是MODULE BUNDLER,他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。
二、webpack使用
1、生成package.json文件
先装好node和npm,因为webpack是一个基于node的项目。然后首先我们需要在根目录下生成package.json文件,需要进入项目文件内根目录下执行如下命令:npm init -y
2、 安装webpack,webpack-cli
在c盘下会生成node_modules文件夹中会包含webpack,此时此刻我们可以使用webpack命令了;
在常规项目中把webpack依赖加入到package.json
npm install webpack webpack-cli -D
3、 loader
loader使用过程:
步骤一:通过npm安装需要使用的loader
步骤二:在webpack.config.js中的modules关键字进行配置。
注:大部分loader我们都可以在webpack的官网中找到,并且学习对应的用法
4、1 webpack常用loader
5、创建webpack配置文件,让webpack构建更强大
在使用配置文件时,webpack的工作过程:
1.首先,webpack发现我们没用通过命令告诉它 要打包的文件路径 和 打包好的输出文件路径
2.webpack会去根目录下寻找一个webpack.config.js 的 配置文件
3,当找到配置文件后,webpack会去解析执行这个配置文件,当解析执行完这个配置文件,可以得到配置文件中导出的配置对象。
4.当webpack得到配置对象,就得到了配置对象中指定的入口和出口,然后进行打包构建。