webpack学习(一)-安装

webpack是一个js的 静态模块打包工具，同时也可以通过loader和插件来打包其他文件资源，如css,img等。

webpack的五个核心概念

entry

入口，指示webpack以哪个文件为入口起点开始打包

ouptut

输出，指示webpack打包后的资源(bundles)输出到哪里，以及文件命名

loader

Loader(加载器)，让webpack能够去处理非js文件，如css，img等。

plugins

plugins(插件)，可以用于执行范围更广的任务，包括打包优化、代码压缩、定义环境变量等。

mode

mode(模式)，指示webpack使用对应模式的配置

选项	描述	特点
development	会将process.env.NODE_ENV的值设置为development，启用NamedChunksPlugin和NamedModulesPlugin	能让代码本地调试运行的环境
production	会将process.env.NODE_ENV的值设为production，启用FlagDependencyUsagePlugin，FlagIncludeChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPligun，sideEffectsFlagPlugin和uglifyJsPlugiin	能让代码优化上线运行的环境

对于process不太了解的同学，process(进程)是node的一个全局变量，提供了有关当前node.js进程的信息并对其进行控制。作为全局变量，无需使用reqiure()引入。

为了确认process.env中的值，我们可以新建一个文件index.js，输入console.log(process.env)，然后在该文件夹目录下打开命令行，输入node index.js，就可以打印出process.env下的所有内容

{
  ALLUSERSPROFILE: 'C:\\ProgramData',
  APPDATA: 'C:\\Users\\cuijiahuan\\AppData\\Roaming',
  CommonProgramFiles: 'C:\\Program Files\\Common Files',
  'CommonProgramFiles(x86)': 'C:\\Program Files (x86)\\Common Files',
  CommonProgramW6432: 'C:\\Program Files\\Common Files',
  COMPUTERNAME: 'LAPTOP-BN9P3F4O',
  ComSpec: 'C:\\Windows\\system32\\cmd.exe',
  DriverData: 'C:\\Windows\\System32\\Drivers\\DriverData',
  FPS_BROWSER_APP_PROFILE_STRING: 'Internet Explorer',
  FPS_BROWSER_USER_PROFILE_STRING: 'Default',
  HOMEDRIVE: 'C:',
  HOMEPATH: '\\Users\\cuijiahuan',
  LOCALAPPDATA: 'C:\\Users\\cuijiahuan\\AppData\\Local',
  LOGONSERVER: '\\\\LAPTOP-BN9P3F4O',
  MYSQL_HOME: 'C:\\Program Files\\MySQL\\MySQL Server 8.0',
  NUMBER_OF_PROCESSORS: '8',
  OneDrive: 'C:\\Users\\cuijiahuan\\OneDrive',
  ORIGINAL_XDG_CURRENT_DESKTOP: 'undefined',
  OS: 'Windows_NT',
  Path: 'C:\\Windows\\system32;C:\\Windows;C:\\Windows\\System32\\Wbem;C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\;C:\\Windows\\System32\\OpenSSH\\;C:\\Program Files\\nodejs\\;C:\\Program Files\\Git\\cmd;C:\\Program Files\\Intel\\WiFi\\bin\\;C:\\Program Files\\Common Files\\Intel\\WirelessCommon\\;C:\\Program Files\\MySQL\\MySQL Server 8.0\\bin;C:\\Users\\cuijiahuan\\AppData\\Local\\Microsoft\\WindowsApps;C:\\Users\\cuijiahuan\\AppData\\Roaming\\npm;C:\\Users\\cuijiahuan\\AppData\\Local\\Programs\\Microsoft VS Code\\bin;C:\\Users\\cuijiahuan\\AppData\\Local\\GitHubDesktop\\bin;C:\\Program Files\\Bandizip\\',    
  PATHEXT: '.COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC;.CPL',
  PROCESSOR_ARCHITECTURE: 'AMD64',
  PROCESSOR_IDENTIFIER: 'Intel64 Family 6 Model 142 Stepping 12, GenuineIntel',
  PROCESSOR_LEVEL: '6',
  PROCESSOR_REVISION: '8e0c',
  ProgramData: 'C:\\ProgramData',
  ProgramFiles: 'C:\\Program Files',
  'ProgramFiles(x86)': 'C:\\Program Files (x86)',
  ProgramW6432: 'C:\\Program Files',
  PSModulePath: 'C:\\Users\\cuijiahuan\\Documents\\WindowsPowerShell\\Modules;C:\\Program Files\\WindowsPowerShell\\Modules;C:\\Windows\\system32\\WindowsPowerShell\\v1.0\\Modules',
  PUBLIC: 'C:\\Users\\Public',
  SESSIONNAME: 'Console',
  SystemDrive: 'C:',
  SystemRoot: 'C:\\Windows',
  TEMP: 'C:\\Users\\CUIJIA~1\\AppData\\Local\\Temp',
  TMP: 'C:\\Users\\CUIJIA~1\\AppData\\Local\\Temp',
  USERDOMAIN: 'LAPTOP-BN9P3F4O',
  USERDOMAIN_ROAMINGPROFILE: 'LAPTOP-BN9P3F4O',
  USERNAME: 'cuijiahuan',
  USERPROFILE: 'C:\\Users\\cuijiahuan',
  windir: 'C:\\Windows',
  TERM_PROGRAM: 'vscode',
  TERM_PROGRAM_VERSION: '1.48.2',
  LANG: 'zh_CN.UTF-8',
  COLORTERM: 'truecolor',
  VSCODE_GIT_IPC_HANDLE: '\\\\.\\pipe\\vscode-git-578b53cf8a-sock',
  GIT_ASKPASS: 'c:\\Users\\cuijiahuan\\AppData\\Local\\Programs\\Microsoft VS Code\\resources\\app\\extensions\\git\\dist\\askpass.sh',
  VSCODE_GIT_ASKPASS_NODE: 'C:\\Users\\cuijiahuan\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe',
  VSCODE_GIT_ASKPASS_MAIN: 'c:\\Users\\cuijiahuan\\AppData\\Local\\Programs\\Microsoft VS Code\\resources\\app\\extensions\\git\\dist\\askpass-main.js'
}

可以发现NODE_ENV在process.env中是不存在的，它其实是我们自定义的变量，在webpack中用来判断是生产环境还是开发环境。

安装webpack

【默认已经安装了node.js】安装时先全局安装，然后在对应的项目目录下本地安装

npm install webpack webpack-cli     // 全局安装

npm install webpack webpack-cli -D      // 本地安装

安装完成之后，可以使用webpack -v来查询版本号，如果可以查到，就证明webpack安装成功。

运行

安装完成之后，我们可以在项目中创建webpack.config.js文件来定义配置信息，框架如下

## 项目目录
01webpack安装
    -build
    -src
        --index.js
        --index.html
    --webpack.config.js

## webpack.config.js代码
const { resolve } = require('path');
module.exports = {
    //入口文件
    entry: './src/index.js',
    //输出
    output: {
        filename: 'build.js',
        path: resolve(__dirname, 'build')
    },
    //loader加载器
    module: {
        rules: []
    },
    //插件
    plugins: [],
    //打包模式，开发/生产
    mode: 'development'
}

以上是webpack配置信息的一个框架，后续对文件资源进行处理时会相应增加打包流程代码