webpack——五个核心概念、基本使用、打包

webpack

webpack是一种前端资源构件工具，一个静态模块打包器（module bundler）。将浏览器不能识别的语法编译成浏览器可以识别的语法

在webpack看来，前端的多有资源文件（js/json/css/img/less）都会作为模块处理，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）

webpack五个核心概念

1.Entry

​ 入口（Entry）指示webpack以哪个文件作为入口起点开始打包，分析构建内部关系依赖图

2.Output

​ 输出（Output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名

3.Loader

Loader（配置项为module）让webpack能够去处理那些非javascript文件（webpack自身只理解javascript）

4.Plugins

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

5.Mode

​ 模式（Mode）指示webpack使用相应模式的配置

选项	描述	特点
development	将process.env.NODE_ENV的值设为development，启用NamedChunksPlugin和NamedModulesPlugin	能让代码本地调试运行的环境
production	将process.env.NODE_ENV的值设为production，…	能让代码优化上线运行的环境

初体验

安装：

先初始化
npm init -y			//出现package.json
再全局安装webpack
npm i webpack webpack-cli
将webpack添加到开发依赖里面（-D）
npm i webpack webpack-cli -D

创建src文件夹（src：存放项目的源代码），在src文件夹里面创建index.js文件（入口文件，webpack入口（打包）起点文件），

创建build（dist，自定义的目录名）文件夹（存放代码经过webpack打包后，存放（输出到）的目录）

运行指令：

1.开发环境：

webpack ./src/index.js -o ./build/build.js --mode=development
或者
webpack ./src/index.js -o ./build --mode=development

webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/build.js。整体打包环境是开发环境
2.生产环境：

webpack ./src/index.js -o ./build/build.js --mode=production
或者在输出的文件目录不指定文件名，打包后会自动生成一个main.js
webpack ./src/index.js -o ./build --mode=production

webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/build.js。整体打包环境是生产环境

结论

1.webpack可以处理js/json文件，不能识别css/img等其他资源

2.生产环境比开发环境多一个压缩（简化）js代码的效果

3.生产环境和开发环境可以将ES6模块化编译成浏览器能识别的模块化

入口文件index.js

// 入口文件
function add(a, b) {
    return a + b;
}
console.log(add(5, 6));

开发环境打包结果

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/
(() => { // webpackBootstrap
    /******/
    var __webpack_modules__ = ({
        // 说明打包的入口文件
        /***/
        "./src/index.js":
        /*!**********************!*\
          !*** ./src/index.js ***!
          \**********************/
        /***/
            (() => {
            // eval里面就是打包的内容
            eval("// 入口文件\r\n/* \r\n1.运行指令：\r\n开发环境：webpack ./src/index.js -o ./build/build.js --mode=development\r\nwebpack会以./src/index.js为入口文件开始打包，打包后输出到./build/build.js。整体打包环境时开发环境\r\n生产环境：\r\n*/\r\n\r\nfunction add(a, b) {\r\n    return a + b;\r\n}\r\nconsole.log(add(5 + 6));\n\n//# sourceURL=webpack://webpack02/./src/index.js?");

            /***/
        })

        /******/
    });
    /************************************************************************/
    /******/
    /******/ // startup
    /******/ // Load entry module and return exports
    /******/ // This entry module can't be inlined because the eval devtool is used.
    /******/
    var __webpack_exports__ = {};
    /******/
    __webpack_modules__["./src/index.js"]();
    /******/
    /******/
})();

生产环境打包结果

// webpack5编译优化了，会解析简化代码，直接运行代码得结果
console.log(11);