webpack简介

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
简单来说就是把多个同类型的文件打包成一个文件！
webpack是基于nodejs的，所以要使用webpack，需要安装nodejs。

webpack的准备

安装nodejs：首先去nodejs官网下载好最新的nodejs安装包，一路默认回车带闪电就可以了，linux和mac请参照菜鸟教程上的步骤；
安装完成后使用node -v 和 npm -v 查看版本号以确定是否安装成功。
确认nodejs安装成功后使用npm i -g webpack 将webpack存储在全局环境安装webpack，一般来说使用时还会让你安装webpack-cli依赖，如果下载安装缓慢可以使用淘宝提供的镜像网站安装cnpm也是可以的！
在项目环境中使用webpack：npm i --save webpack 将webpack保存到自己的项目，–save可以用-s代替，如果是–dev代表这个包仅在本地测试中使用，不会写入package.json中，上线时不会根据package.json下载–dev安装的包！

使用webpack

根目录创建配置文件：webpack.config.js;
配置入口出口：

const path = require('path');

module.exports = {
  entry: './src/app.js', //项目入口，根据入口文件查询依赖关系
  output: {
    path: path.resolve(__dirname, 'dist'),//文件放在当前目录下的dist文件下
    filename: 'my-first-webpack.bundle.js'//由webpack打包后生成的文件名称
  }
};

简单例子

创建一个项目，cd到项目的根目录下，npm init 初始化npm仓库，会让你设置很多信息，根据需要设置就是，可以一路回车然后自己在package.json里更改配置信息，npm i -s webpack 安装webpack包；
如上配置webpack.config.js。
直接控制台webpack 便会根据配置信息里的文件压缩打包到你设置好的目录下的对应文件里；
然后它可能会提示你设置当前打包模式：

Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

development代表开发者模式，打包的文件还具备可读性，production代表出厂模式，所有代码都会被压缩成一行了；

原来的app.js

原来的app.js内容

app.js采用 development 模式

在这里插入图片描述

app.js 采用production 模式

production模式

设置压缩打包模式

const path = require('path');

module.exports = {
    mode:'development',//此处设置压缩模式
    entry: './src/app.js', //项目入口，根据入口文件查询依赖关系
    output: {
        path: path.resolve(__dirname, 'dist'),//文件放在当前目录下的dist文件下
        filename: 'my-first-webpack.bundle.js'//由webpack打包后生成的文件名称
    }
};

或者在使用命令时：'webpack -p’也可；

注意系统环境变量配置

不管是安装node还是webpack的全局包，都是要配置系统环境变量的，右键我的电脑->高级设置->环境变量->系统环境变量->path一项添加 node的目录和全局包(比如我的是：C:\Node\Node_global,这个node_global是配置node全局环境变量时设置的)的目录;

Webpack的开始--安装和使用