Быстрый старт Простое использование Webpack

предисловие

Привет всем, я Сяолан, на этот раз я расскажу вам то, что я узнал раньшеwebpackСводка по обучению как им пользоваться, надеюсь помочь нуждающимся друзьям, в школе много чего есть, поэтому статьи в золоте давно не находил. Я собираюсь в отпуск, продолжаю усердно учиться, пролистайте до станции B видео Линь Сансиня, он сам пишет статьи, а затем делится ими с другими. Это способ быстро научиться. Я думаю, что это также очень полезно для меня Правильно, вы будете впечатлены, когда поделитесь этим

Введение в вебпак:

Webpack — одно из основных решений для фронтенд-инжиниринга.

Основная функция: он обеспечивает удобную модульную поддержку разработки интерфейса, а также мощные функции, такие как сжатие и обфускация кода, обработка, совместимость с JavaScript на стороне браузера и оптимизация производительности.

выгода: пусть программист сосредоточится на реализации конкретных функций, что повысит эффективность фронтенд-разработки и ремонтопригодность проекта. Примечание. В настоящее время интерфейсные проекты, такие как Vue и React, в основном основаны на веб-пакетах для инженерной разработки.

Предварительная подготовка

Структура проекта следующая:

project_name
|—— src
|    |—— index.js
|—— index.html
|—— package.json 
|—— webpack.config.js
|—— babel.config.js

Установить

Установите в проект webpack + webpack-cli, используйте-Dэквивалентно--save-dev

-Dнаписать вpackage.jsonсерединаdevDependenciesЧтобы добавить, это означает, что мы используем его только на этапе разработки

-Sэквивалентно--save написать вdependenciesОбъект, представляющий как среду разработки, так и производственное использование

Если предмет неpackage.jsonиспользоватьnpm init -yБыстрая настройка

npm install webpack@5.42.1 webpack-cli@4.9.0 -D

 "devDependencies": {
    "webpack": "^5.42.1",
    "webpack-cli": "^4.9.0"
 }

Настроить команды запуска

существуетpackage.jsonнастроитьscripts

"scripts": {
    "dev": "webpack",
},

В командной строке мы используемnpm run devначатьwebpackЗаказ

основное использование

Создайте файл webpack.config.js

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

Режим настройки

module.exports = {
  mode: 'development',
}

modeЕсть два необязательных значения, а именно:

development

среда разработки

Для упакованных файлов не будет выполняться сжатие кода и оптимизация производительности.

Быстрая упаковка, подходящая для использования на этапе разработки

production

Производственная среда

Сжатие кода и оптимизация производительности будут выполняться для упакованных файлов.

Скорость упаковки очень низкая, и она подходит только для использования на стадии выпуска проекта.

Настроить вход и выход

Соглашение по умолчанию в webpack 4.x и 5.x:

Файл записи по умолчаниюsrc -> index.js
Выходной файл по умолчаниюdist -> main.js

мы можемwebpack.config.jsна заказ

entry: Упакованный вход

output: упакованный экспорт

Мы можем установить его следующим образом

module.exports = {
  entry: './src/index.js', //打包入口文件路径
  output: './dist/mian.js', //输出文件路径
}

Лучше писать так, используяpathмодуль для сращивания путей

const path = require('path')
module.exports = {
  mode: 'development',
  entry: path.join(__dirname, './src/index.js'), //打包入口文件路径
  output: {
    path: path.join(__dirname, './dist'), //输出文件路径
    filename: 'js/bundle.js', //把生成的bundle.js放在dist/js/bundle.js下面
  },
}

webpack-dev-сервер прост в использовании

Когда исходный код изменен,webpackОн автоматически упакован и построит проект, поэтому вам не нужно идти к нему каждый разnpm run devохватывать

webpack-dev-serverСервер разработки, предоставляющий горячие обновления

Установить

npm install webpack-dev-server@3.11.2 -D

После установки вы можетеwebpack serveзапускать

настроить

Удобствоwebpack-dev-serverначало, в котором мы находимсяpackage.jsonизscriptsдобавить новую команду

"scripts": {
    "serve": "webpack serve",
},

существуетwebpack.config.jsнастроить порт,devServerЕсть много настраиваемых параметров, здесь я настрою порт

module.exports = {
  devServer: {
    port: 8080,
  },
}

devServer.compress, включает сжатие gzip.

devServer.contentBase, который сообщает серверу, где обслуживать контент. Требуется только в том случае, если вы хотите обслуживать статические файлы.

devServer.host указывает хост. Используйте 0.0.0.0, чтобы сделать его доступным в локальной сети.

devServer.hot, включает функцию горячей замены модулей webpack.

devServer.hotOnly — разрешить ли откат к обновлению веб-страницы в случае сбоя сборки.

devServer.inline, переключатель режимов. По умолчанию используется встроенный режим, используйте false для переключения в режим iframe.

devServer.open, использовать ли браузер для открытия домашней страницы после запуска webpack-dev-server.

devServer.overlay, разрешить ли полноэкранному оверлею отображать ошибки компиляции. Не разрешено по умолчанию

devServer.port, номер порта прослушивания. По умолчанию 8080.

devServer.proxy, прокси, больше подходит для отдельного API серверной разработки.

devServer.publicPath устанавливает выходной каталог упакованных файлов в памяти. Отличается от output.publicPath.

использовать после модификацииnpm run serveУпаковка проекта

После упаковки запустите упаковку в реальном времениhttpсервер, предлагая нам доступhttp://localhost:8080/, вы можете ознакомиться с эффектом нашей страницы после посещения

Упакованный файл

Файлы, созданные при упаковке, сохраняются в памяти, поскольку память работает быстрее, а производительность упаковки в реальном времени повышается, поэтому приведенные выше настройкиoutputВыходной путь предназначен дляНе установленоwebpack-dev-serverГоворящий

Как получить доступ к нашим упакованнымbundel.jsНу, потому чтоwebpack-dev-serverОн открывает сервер,/является корневым каталогом проекта, мы напрямуюАдресная строкаможет получить доступbundle.js

плагин плагин

Установив и настроив сторонние плагины, вы можете расширитьwebpackсделай его сильнее

html-webpack-plugin

Этот плагин мы будем часто использовать для этого, общественностьcss,jsФайл вставляется в html, что позволяет уменьшить количество запросов и добиться эффекта оптимизации, который можно настроить через этот плагинindex.htmlсодержание страницы.

Плагин HTML генерируетindex.htmlстраница, автоматически внедряемая с упакованнымbundle.jsдокумент

Установить

npm install html-webpack-plugin@5.3.2 -D

настроить

существуетwebpack.config.jsизpluginsнастроить

var HtmlWebpackPlugin = require('html-webpack-plugin') //1.先导入
const path = require('path')
module.exports = {
  //...
  //在插件中使用 HtmlWebpackPlugin
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), //原文件存放路径
      filename: path.join(__dirname, './dist/index.html'), //输出文件路径
    }),
  ],
}

HtmlWebpackPluginЕсть много необязательных параметров, я скажу следующие три часто используемых

title: заголовок сгенерированного html-документа. Настройте этот элемент, он не заменит содержимое титровального элемента в указанном файле шаблона.

template: расположение локального файла шаблона, поддерживающего загрузчики (такие как handlebars, ejs, undersore, html и т. д.)

filename: Имя файла выходного файла, по умолчаниюindex.html, которое является именем файла, если оно не настроено; кроме того, вы можете указать расположение каталога для выходного файла (например, './dist/index.html')

использовать

Команда выполненияnpm run devВы можете видеть, что упаковка завершена

при использованииnpm run serveЭтих двух не будет, но оба находятся в памяти, мы можем использовать адресную строку для просмотра

clean-webpack-plugin

Автоматически очищать старые файлы в каталоге dist, когда

Установить

npm install clean-webpack-plugin@3.0.0 -D

настроить

существуетwebpack.config.jsизpluginsнастроить

const { ClenWebpackPlugin } = require('clean-webpack-plugin') //引入
module.exports = {
  //...
  plugins: [
    new ClenWebpackPlugin(), //挂载的创建插件实例
  ],
}

погрузчик погрузчик

Нет.jsсуффиксный модульwebpackНе могу справиться с этим по умолчанию, только понятьJavaScriptа такжеJSONфайл, который нужно вызватьloaderЗагрузчик может быть упакован нормально

loaderРоль грузчика:экспортируется как функцияJavaScriptмодуль. Например:

css-loader упаковывает связанные файлы .css

пакеты less-loader .less связанные файлы

babel-loader объединяет расширенный синтаксис js, который не может обработать webpack

Процесс вызова загрузчика

пакет css

Установить

npm i style-loader@3.0.0 css-loader@5.2.6 -D

настроить

в,testУказывает соответствующий тип файла (используя обычный),useУказывает на соответствующий вызываемыйloaderУведомление:

useуказан в массивеloaderпорядок фиксированный
loaderПорядок, в котором звонок: от правого левого

существуетwebpack.config.jsизmoduleнастроить

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
}

пакет меньше

Установить

npm i less-loader@10.0.1 less@4.1.1 -D

настроить

существуетwebpack.config.jsизmoduleнастроить

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader','less-loader],
      },
    ],
  },
}

Другие процессы упаковки css также устанавливают указанный загрузчик.

пакетный файл

loaderЗа исключением упаковкиcss, мы используемfile-loader url-loaderтоже правильноurlСсылочное изображение обрабатывается

Установить

npm i url-loader@4.1.1 file-loader@6.2.0 -D

настроить

существуетwebpack.config.jsизmoduleнастроить

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.jpg|png|gif$/,
        use: {
            loader: 'url-loader',
           	options: {
                limit: 77777,
                outputPath: 'image',
            }
        }
      },
    ],
  },
}

optionsдаloaderввод параметра:

limitОн используется для указания размера изображения в байтах. Только изображения размером ≤ ограничения будут преобразованы в изображения в формате base64.

outputPath: Да, указанная папка храненияdist/imageГенерировать файлы изображений равномерно в каталог изображений

babel-loader прост в использовании

посредствомbabel-loaderРасширенный синтаксис в упаковке js

Установить

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

настроить

существуетwebpack.config.jsизmoduleнастроить

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
    ],
  },
}

Уведомление: не забудьте использоватьexcludeисключать/node_modules/модуль ниже

В корневом каталоге проекта создайтеbabel.config.jsфайл для настройки

утверждениеbabelДоступные плагины

module.exports = {
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
}

Релиз пакета

Файлы, упакованные в среде разработки, не будут подвергаться сжатию кода и оптимизации производительности и будут храниться в памяти, поэтому они будут упакованы и выпущены в производственной среде.

существуетpackage.jsonизscriptsновое в

"scripts": {
    "build": "webpack --mode production",
},

использовать послеnpm run buildНепосредственно упакованы и выпущены, и это--modelдаproductionОт имени производственной среды для упакованных файлов будет выполнено сжатие кода и оптимизация производительности. покрыто здесьwebpack.config.jsсерединаmodelОпции

webpack создает проект Vue

На самом деле все используютvue-cliа такжеvue uiпостроенvueпроектwebpackЭто все настроено для нас.Здесь я расскажу, как это использовать.webpackСоздайтеvueпроект.

Инициализировать каталог проекта

Инициализировать после создания папки проектаpackage.json

npm init -y

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

index.js: входной файл

index.html: шаблон файла записи

babel.config.js: файл конфигурации babel (сначала создается, а потом говорит)

Структура проекта следующая:

project_name
|—— src
|    |—— index.js
|    |—— App.vue 
|—— index.html
|—— package.json 
|—— webpack.config.js
|—— babel.config.js

Установите и настройте веб-пакет, связанный с

Установитьwebpack webpack-cli webpack-dev-serverполагаться

npm install webpack@5.42.1 webpack-cli@4.9.0 webpack-dev-server@3.11.2 -D

настроитьpackage.json

"scripts": {
    "dev": "webpack",
    "serve": "webpack-dev-server --open --hot",
    "build": "webpack --mode=development --progress --hide-modules",
},

настроитьwebpack.config.js

const path = require('path')

module.exports = {
  mode: 'development',
  entry: path.join(__dirname, './src/index.js'), //打包入口文件路径
  output: {
    path: path.join(__dirname, './dist'), //输出文件路径
    filename: 'js/bundle.js', //把生成的bundle.js放在dist/js/bundle.js下面
  },
  devServer: {
    contentBase: path.join(__dirname, './dist'),
    port: 8080, //启动端口
  },
}

Конфигурация установки`Vue`Связанный

Установитьvueтребуемые зависимостиvue-loader vue-template-compiler

npm install vue-loader vue-template-compiler -D

Если предмет неvueне забудьте надетьvue

npm install vue

настроитьwebpack.config.js

Примечание для импортаVueLoaderPlugin

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
 //...
 module: {
      rules: [
      // ... 其它规则
      {
          test: /\.vue$/,
          loader: 'vue-loader'
      }
      ]
  },
  plugins: [
      new VueLoaderPlugin()
  ]
}

Установить плагин

html-webpack-pluginа такжеclean-webpack-pluginПлагины, оба из которых мы представили выше

Установить

npm install html-webpack-plugin@5.3.2 clean-webpack-plugin@3.0.0 -D

настроитьwebpack.config.js

//...
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    //...
	plugins: [
		new HtmlWebpackPlugin({
     		template:'./index.html',
		}),
        new CleanWebpackPlugin(),
	],
 };

Установить загрузчик

style-loader,css-loader,file-loader url-loaderПодождите, мы рассмотрели это выше, если это необходимоsass,lessЗагрузчик можно установить сам, вот я установилsass

npm install style-loader@3.0.0 css-loader@5.2.6 url-loader@4.1.1 file-loader@6.2.0 sass-loader node-sass -D

настроитьwebpack.config.js

sassположитьnode_modulesисключать

//...

module.exports = {
	//...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
           {
            test: /\.jpg|png|gif$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 77777,
                    outputPath: 'image',
                	}
                }
             },
            {   
              test: /\.sass$/,   
              use:['vue-style-loader', 
                 'css-loader', 'sass-loader' 
              ],   
              include: path.resolve(__dirname + '/src/'),    
              exclude: /node_modules/ 
            },
        ]
    }
}

установить вавилон

Здесь я устанавливаю несколько часто используемых

npm install  babel-loader @babel/core @babel/cli @babel/preset-env -D
npm install  @babel/runtime @babel/plugin-transform-runtime -D
npm install  @babel/plugin-transform-arrow-functions -D

настроитьwebpack.config.js

то же, что и вышеnode_modulesисключать

//...

module.exports = {
	//...
    module: {
        rules: [
            //...
            {
                test: /\.js$/,
                use: [
                    'babel-loader'
                ],
                exclude: /node_modules/
            },
        ]
    }
}

настроитьbabel.config.js

module.exports = function (api) {
    api.cache(true);
  
    const presets = [
        '@babel/preset-env',
    ];
    const plugins = [
        '@babel/plugin-transform-arrow-functions',
        '@babel/plugin-transform-runtime'
    ];
  
    return {
      presets,
      plugins
    };
  }

Наконец мы можем пройтиnpm run serveначатьvueпроект

Прошлые основные моменты:

Быстро начните работу с Electron и получите собственное настольное приложение

Еще не Vue3? Заметка, чтобы взять вас быстро

Еще не ТС? Быстрый старт с TypeScript

Быстрый старт Vuex для рукописного ввода Easy Vuex

От понимания к глубокому виртуальному DOM и реализации алгоритма сравнения

Написание простого ответа vue поможет вам понять принцип ответа.

От использования до самостоятельной реализации простого Vue Router — просто взгляните на это

Необходимые базовые знания о фронтенд-интервью, хотя и немногочисленные, но вы не можете не знать

Предварительная подготовка

Установить

Настроить команды запуска

основное использование

Создайте файл webpack.config.js

Режим настройки

Настроить вход и выход

webpack-dev-сервер прост в использовании

Установить

настроить

Упакованный файл

плагин плагин

html-webpack-plugin

Установить

настроить

использовать

clean-webpack-plugin

Установить

настроить

погрузчик погрузчик

Процесс вызова загрузчика

пакет css

Установить

настроить

пакет меньше

Установить

настроить

пакетный файл

Установить

настроить

babel-loader прост в использовании

Установить

настроить

Релиз пакета

webpack создает проект Vue

Инициализировать каталог проекта

Установите и настройте веб-пакет, связанный с

Конфигурация установкиVueСвязанный

Установить плагин

Установить загрузчик

установить вавилон

Прошлые основные моменты:

Конфигурация установки`Vue`Связанный