webpack打包后的文件夹是空的_webpack01-环境参数、webpack是什么、5个核心概念、打包css资源、打包less资源、打包html文件、打包图片资源、打包其他资源、devServer...

D环境参数：

node：10版本以上(10.4.0)  这里有个坑：10.4.0版本才开始支持BigInt对象

webpack：4.26版本以上(4.44.1)

webpack是什么：

webpack是一种前端资源构建工具，一个静态模块打包器(module bundler)

在webpack看来，前端的所有资源文件(js、json、css、img、less……)都可以作为模块处理

它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)

webpack的五个核心概念：

entry：入口指示　　webpack以哪个文件为入口起点开始打包，分析构建内部依赖图

output：输出指示　　webpack打包后的资源 bundles输出到哪里去，以及如何命名

loader：让webpack能够去处理那些非JavaScript文件(webpack自身只理解JavaScript)

plugins：插件可以用于执行范围更广的任务。插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量等

mode：指示webpack使用响应模式的配置

选项

描述

特点

development

将process.env.NODE_ENV的值设置为development

启用NamedChunksPlugin和NamedModulesPlugin

能让代码本地调试运行的环境

production

将process.env.NODE_ENV的值设置为production

启用FlagDependencyUsagePlugin、

FlagIncludedChunksPlugin、

ModuleConcatenationPlugin、

NoEmitOnErrorsPlugin、

OccurrenceOrderPlugin、

SideEffectsFlagPlugin、

UglifyJsPlugin

能让代码优化上线运行的环境

webpack实践一下：

这里装全局webpack和webpack-cli的时候，不加版本号时安装的webpack版本是5.4.0，webpack-cli版本是4.2.0。后续会有一些版本冲突，这里安装的时候加上版本号：

npm i webpack@4.41.6 webpack-cli@3.3.11 -g

npm i webpack@4.41.6 webpack-cli@3.3.11 -D

运行指令：

1、开发环境：webpack ./src/index.js -o ./build --mode=development

以 ./src/index.js 文件为入口文件开始打包，打包后输出到 ./build 文件夹下新建 main.js文件，整体打包环境是开发环境

2、生产环境：webpack ./src/index.js -o ./build --mode=production

以 ./src/index.js 文件为入口文件开始打包，打包后输出到 .