[Рука за руку с webpack] Первый шаг — стать старшим фронтенд-инженером.

"Однажды, - сказал лидер, - чтобы судить о том, хорош интерфейс или нет, вам нужно только посмотреть, может ли он соответствовать веб-пакету. Тогда...

Одиночная операция свирепа, как тигр, но "иногда нельзя довольствоваться рейтингом" ----- Купил в прошлом году

Прошлое и настоящее упаковочных инструментов

webpack, как следует из названия, это инструмент для упаковки (упаковки) веб-приложений. Например, что делать, если вам нужно взять с собой в поездку всевозможные вещи? С этим справится рюкзак. Все вещи упакованы в рюкзак и Будь то зарядное устройство или внешний аккумулятор, Durex или Okamoto, все за один шаг...

Ранние веб-приложения были относительно однообразными, а веб-страницы, как правило, состояли из трех частей (html, css, js) в одном шаттле.Концепция упаковки заключалась не более чем в сжатии изображений, а различные js-файлы объединялись в один файл для решить количество ресурсов, загружаемых на одну страницу. Было слишком много проблем, влияющих на опыт. В то время отличными инструментами упаковки были grunt, gulp и т. д. Но с появлением отличных веб-фреймворков, таких как react и vue, мышление о разработке компонентов было перенесено в область внешнего интерфейса, и зависимости в веб-приложениях также имели тенденцию к диверсификации, изображениям, шрифтам, транскодированию js, предварительной обработке стилей и другим требованиям.Простое соединение файлов немного слабое.

Это время, вам нужен профессиональный инструмент, то естьwebpack

Строительство окружающей среды

Просто говорите и не практикуйте поддельную ручку, сначала мы устанавливаемnodejs, если возможно, рекомендуется использовать последнюю версию.Пожалуйста, обратитесь к конкретному методу установкиэта статьяНе говорите об этом слишком подробно. Eslint также рекомендует настроить следующее. Способность eslint + vscode к самовосстановлению кода — это так здорово.

Установить веб-пакет локально (проект)

После инициализации проекта запустите его прямо из командной строки.npm i webpack@3.10.0 -DУстановите webpack. Внимательные студенты могут обнаружить, что webpack не является самой высокой версией webpack 4.X на сегодняшний день. Причина очень проста. Потому что версия 4.x webpack I

Конечно, я также считаю, что вебпак 3.x всем понятен, а 4.x будет сделан за считанные минуты.

Выполнить первый пакет

Первым шагом Great Wall является инициализация структуры проекта Структура каталогов этого проекта показана ниже.кодовый адрес

в,.eslintignore .eslintrc.jsдля конфигурационного файла eslint,.gitignoreНастроить файлы для Gitpackage.json package-lock.jsonэто файл конфигурации npm

Сначала мы создаем файл js для обработкиindex.jsи напишите содержание

console.log('我是高级前端工程师~')

Во-вторых, создайте файл конфигурации веб-пакета в корневом каталоге проекта с именем файлаwebpack.config.jsи напишите содержание

module.exports = {
  // 这里是打包的入口文件相对路径
  entry: './index.js',
  output: {
    // 打包结果存放的位置, 必须用绝对路径
    path: '/Users/quanquanluo/workSpace/quanquan/blog-repo/webpack-show/dist',
    // 打包结果文件名称
    filename: 'bundle.js',
  },
};

Теперь, когда вещи и рюкзаки готовы, приступаем к выполнению операции упаковки../node_modules/.bin/webpack(webpack автоматически находит файл конфигурации в каталоге проекта), в это время каталог dist добавляется в корневой каталог проекта, а файл bundle.js создается в каталоге dist.Содержимое файла выглядит следующим образом: следует:

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

console.log('我是高级前端工程师~');


/***/ })
/******/ ]);

Есть ли библии?

После небольшой доработки получается следующее

(function(modules) {
 	function __webpack_require__(moduleId) {
 		modules[moduleId]();
 	}
 	return __webpack_require__(0);
})([
    (function() {
        console.log('我是高级前端工程师~');
    })
]);

Гораздо элегантнее Процесс упаковки на самом деле оборачивает модуль анонимной самовыполняющейся функцией.

первый упакованныйкодовый адрес.Конечно, как красивый фронтенд инженер, это нельзя терпеть/Users/quanquanluo/workSpace/quanquan/blog-repo/webpack-show/distТакой длинный код, немного модифицированныйwebpack.config.jsследующим образом

// 引用 node 原生 path 模块处理绝对路径
const path = require('path');

module.exports = {
  // 这里是打包的入口文件相对路径
  entry: './index.js',
  output: {
    // 打包结果存放的位置, 必须用绝对路劲
    path: path.resolve(__dirname, 'dist'),
    // 打包结果文件名称
    filename: 'bundle.js',
  },
};

скорректированныйкодовый адрес, выглядит удобнее...

Проверьте упакованный файл

Наконец, мы выполняемnode dist/bundle.js, успешно напечатано в командной строке我是高级前端工程师~Упаковка удалась, поздравляю всех, кто сделал разрез高级前端工程师

Однако выполнять непосредственно в каталоге проектаnode index.js

А?Только исполняй прямо,так что я долго занят,поэтому снимаю штаны и пукаю...Хахахаха,конечно нет,со следующего шага мы начнем дорогу к настоящему старшему фронту -end инженер. Продвигаем вебпак вместе