webpack

一.webpac介绍

它是一个前端资源加载/打包工具，将根据模块的依赖关系进行静态分析，并依据规则生成对应的静态资源，常用的打包工具（glup,webpack,rollup）

二.webpack安装

在安装webpack之前，先要确保系统是否安装好了node，因为在安装webpack中我们需要用到工具npm，这时我们只需要安装好node就好了，因为node中会自带npm

1. 检查是否安装好了npm，如果没有安装可以去node官网进行下载安装。如图所示已经安装好了npm
   

2. 安装webpack，打开cmd输入npm install -g webpack

3. 打开cmd输入webpack -v,如果显示需要安装webpack cli，我们就需要再手动安装一遍，语法如下npm install --save-dev webpack-cli -g

4. 检查是否安装成功，安装成功如下

三.创建项目

1. 创建项目，配置webpack.config.js（一定要在项目根目录取这个名），配置好在cmd中输入webpack,会自动成dist文件，在index.html文件中直接引入dist文件夹里的js就可以啦（main.js一定要导入yuan.js文件）

2.在webpack.config.js中在配置一个监听事件watch：true，这时候我们再更改js文件不需要再输入webpack，具体其他配置可以看webpack官网

四.安装loader加载器

1.因为在webpack中有些js高级语法是无法编译的，这时候需要安装louder加载器，安装指令如下

五.安装依赖

在项目中先安装类似jquery这样的第三方库，并在使用时，通过require引入安装的库文件，才能使用
后面加dev的话是开发时的依赖包（devDependences），否则是运行程序是的依赖包
sudo npm install jquery --save-dev（macos,mac系统要在前面加个sudo速度）
npm install jquery --save-dev （window）

五.服务端环境安装

通过安装webpack-dev-server模块，可以将项目打包到服务端，并可以指定端口，同时，还可以配置启动命令
npm install webpack-dev-serve --save-dev

使用npm管理项目中的依赖包；运行npm install webpack webpack-cli --save-dev本地安装webpack。