Создайте среду разработки Vue на основе Webpack4.

JavaScript Vue.js CSS Webpack
Создайте среду разработки Vue на основе Webpack4.

Прошло много времени с тех пор, как я начала вести блог. Время было разделено на части, и, накопив результаты обучения за определенный период времени, я написал этот блог.

Я и раньше писал статьи на Webpack4, но они скорее вводные, а единственная настоящая боевая статья——Создайте среду разработки React на основе Webpack, также относительно прост и не требует извлечения CSS, упаковки сторонних библиотек и других функций.Эта статья относительно глубокая. Однако из-за ограниченного уровня автора неизбежны ошибки, и вы можете их исправить.

Есть еще детские туфли, которые не начались, вы можете ссылаться на мои предыдущие статьи:

Во-первых, проект инициализации

Введите следующую команду в командной строке:

mkdir Webpack-Vue && cd Webpack-Vue && npm init -y

Затем вы можете увидеть файл, называемый по вашему текущему путиWebpack-Vue, в котором есть папка с информацией по умолчаниюpackage.jsonфайл, откройте и измените содержимое этого файла.

Затем создаем в папке проекта следующие папки:

  • dist
  • источник, источник/компоненты
  • build

В Linux вы можете ввести следующую команду для быстрого создания:

mkdir src src/components dist build -p

Среди них dist используется для хранения файлов проекта, упакованных Webpack, src используется для хранения файлов исходного кода, а build используется для хранения файлов конфигурации, связанных с упаковкой Webpack.

В src создайте файл записиindex.js.

Команда, созданная под Linux:

touch ./src/index.js

Создать в корневом каталогеindex.htmlфайл со следующим содержимым:

<!DOCTYPE html>
<html>
  <head>
    <title>Webpack Vue Demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Это будет использоваться в качестве шаблона для нашего приложения, и связанный файл js будет вставлен в этот файл при обработке плагина Webpack.

Другие файлы конфигурации добавляются в соответствии с вашими предпочтениями, такими как.gitignoreдокументы и т.д.

2. Установите веб-пакет

нужно использоватьWebpack, первым шагом, конечно же, является его установка. Установите с помощью следующей команды:

npm i webpack webpack-cli -D

Затем вы можете увидеть еще один в папке вашего проектаnode_modulesпапка, затемpackage.jsonеще один в файлеdevDependenciesАтрибуты. Он содержит имя установленной зависимости и версию зависимости, и теперь там толькоwebpackа такжеwebpack-cli.

3. Настройте самый простой Webpack

В этом разделе мы приступим к настройке проекта с самыми основными возможностями упаковки, начиная сsrc/index.jsНачните упаковывать проект.

Чтобы сделать структуру проекта более научной и разумной, мы сохранили все файлы, связанные с конфигурацией Webpack, вbuildв каталоге.

Войтиbuildпапку, а затем создайте следующие файлы:

  • webpack.base.conf.js
  • webpack.dev.conf.js
  • webpack.prod.conf.js
  • build.js

В Linux вы можете ввести следующую команду для быстрого создания:

cd build/ && touch webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js build.js

в,webpack.base.conf.jsЭто самая базовая конфигурация упаковки, используемая как в среде разработки, так и в производственной среде.webpack.dev.conf.jsЭто конфигурация, которая будет использоваться в среде разработки.webpack.prod.conf.jsЭто конфигурация для использования в производственной среде.build.jsпредставляет собой скрипт, упакованный через интерфейс Node.

Далее мы записываем самую основную информацию о конфигурации в соответствующий файл.

(1) WebPack.Base.conf.js

Сначала напишите самую основную информацию о конфигурации:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    bundle: path.resolve(__dirname, '../src/index.js')
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash].js'
  },
  module: {
    rules: [
      
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../index.html')
    })
  ]
};

(2) webpack.dev.conf.js

Также напишите самую основную информацию о конфигурации:

const merge = require('webpack-merge');
const path = require('path');
const baseConfig = require('./webpack.base.conf');
module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, '../dist'),
    open: true
  }
});

(3) webpack.prod.conf.js

В приведенной ниже конфигурации CleanWebpackPlugin написан в версии 1.x.x. После обновления до версии 2.x.x способ написания конструктора изменился. Подробнее см.:clean-webpack-plugin, благодаря копать друзей @толстый толстый толстыйнапоминание!

Продолжаем писать самую базовую конфигурацию:

const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const baseConfig = require('./webpack.base.conf');
module.exports = merge(baseConfig, {
  mode: 'production',
  devtool: 'source-map',
  module: {
    rules: []
  },
  plugins: [
    new CleanWebpackPlugin(['dist/'], {
      root: path.resolve(__dirname, '../'),
      verbose: true,
      dry: false
    })
  ]
});

Обратите внимание, что выше мы упомянули две новые зависимости, которые необходимо установить, прежде чем их можно будет использовать:

cnpm i webpack-merge clean-webpack-plugin webpack-dev-server html-webpack-plugin -D

(4) build.js

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

Затем напишите наш скрипт упаковки и вызовите Webpack через Node для упаковки.

const webpack = require('webpack');
const config = require('./webpack.prod.conf');

webpack(config, (err, stats) => {
  if (err || stats.hasErrors()) {
    // 在这里处理错误
    console.error(err);
    return;
  }
  // 处理完成
  console.log(stats.toString({
    chunks: false,  // 使构建过程更静默无输出
    colors: true    // 在控制台展示颜色
  }));
});

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

(5) npm-скрипты

Настройка сценариев npm может упростить использование команд упаковки.

существуетpackage.jsonдокументscriptsВ свойствах пропишите следующие два:

"build": "node build/build.js",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

Базовая конфигурация готова, давайте проверим эффект упаковки, вsrc/index.jsНапишите следующий код в:

console.log('index.js!');

Затем введите в командной строке:

npm run dev

На автоматически открытой веб-странице я открываю консоль, и мы видим, что выводится предложение «index.js», как и ожидалось.

Затем введите команду сборки для сборки:

npm run build

Скриншот ниже:

img

Это означает, что упаковка прошла успешно, но мы завершили только самые основные функции упаковки, и Vue еще нельзя использовать.Далее мы сделаем этот проект более мощным.

В-четвертых, представьте базовый загрузчик

Чтобы облегчить разработку, нам нужно ввести несколько загрузчиков, чтобы упростить написание и сделать наш код совместимым с большим количеством сред.

Эту часть можно написать по документации Webpack, потому что это все базовые вещи, и настроить их несложно.

(1) вавилон-загрузчик

Чтобы сделать наш код JavaScript совместимым с большим количеством сред, нам нужно использовать babel-loader.

Метод конфигурации:

Установить первымbabel-loader,babel-preset-envа такжеbabel-core. Обратите внимание, что если вашbabel-loaderЕсли это версия 7.x, вашbabel-coreДолжна быть версия 6.x, если вашbabel-loaderЕсли это версия 8.x, вашbabel-coreДолжна быть версия 7.x. Если это не так, Webpack сообщит об ошибке.

Команда установки выглядит следующим образом:

npm i babel-loader@7 babel-core babel-preset-env -D

затем вwebpack.base.conf.jsизmodule.rulesДобавьте следующие объекты в:

{
  test: /\.js$/,
  use: 'babel-loader',
  exclude: /node_modules/
}

Нам также нужно добавить файл конфигурации (.babelrc) в корневой каталог:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}

Вот что делает babel-preset-env, помогая нам настроить babel. Нам нужно только сказать ему, с чем мы хотим быть совместимыми (целевая среда выполнения), и он автоматически преобразует код в код, совместимый с соответствующей средой.

Приведенный выше код означает, что мы требуем, чтобы код был совместим с двумя последними версиями браузеров, а не с IE 8, и браузеры с долей рынка более 1% также должны его поддерживать.

Просто скажите babel-preset-env, что вам нужна совместимая среда, и она автоматически конвертируется, разве это не круто? Больше не нужно так много настраивать.

попробуем дальшеsrc/index.jsКод в переписывается как:

const x = 'index.js';

const y = (x) => {
  console.log(x);
}

y(x);

затем используйтеnpm run buildУпаковка, в упакованном коде:

var x = 'index.js';

var y = function y(x) {
  console.log(x);
};

y(x);

Указывает, что наш код был успешно преобразован.

Для сравнения, не настроенbabel, результат преобразования следующий:

const x = 'index.js';

const y = (x) => {
  console.log(x);
}

y(x);

(2) файл-загрузчик

Это используется для модуляции файлов шрифтов и файлов изображений.

Установить первымfile-loader:

npm i file-loader -D

затем вwebpack.base.conf.jsДобавьте следующую конфигурацию вmodule.rules:

{
  test: /\.(png|svg|jpg|gif)$/,
  use: [
    'file-loader'
  ]
},
{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: [
    'file-loader'
  ]
}

Разумеется, информацию о конфигурации можно упростить, а две тестовые закономерности объединить в одном месте.

Далее мы настраиваемvue-loader.

(3) vue-загрузчик

Чтобы использовать однофайловые компоненты Vue, нам нужно.vueОбработка файлов, использованиеvue-loader.

Установить первымvue-loader,css-loader,vue-style-loaderа такжеvue-template-compilerПоследнее также важно, меньше ошибок.

Заказ:

npm i vue-loader css-loader vue-style-loader vue-template-compiler -D

Затем мы настраиваемwebpack.base.conf.js, напишите следующий код в папку файлаmodule.rulesСреди свойств:

{
  test: /\.vue$/,
  loader: 'vue-loader'
},
{
  test: /\.css$/,
  use: ['vue-style-loader', 'css-loader']
}

Только такой конфигурации недостаточно, по мнениюофициальный сайт vue-loader, нам также нужно настроить плагин, а затем нам также нужно настроитьresolve.aliasПсевдоним, иначе Webpack не сможет найти модуль Vue.

Для настройки плагина сначала введите его в шапку файла:

const VueLoaderPlugin = require('vue-loader/lib/plugin');

затем вpluginsДобавьте этот объект плагина в массив:

new VueLoaderPlugin(),

Затем нам также нужно настроить псевдоним,resolve.aliasНастраивается как следующие объекты:

{
  'vue$': 'vue/dist/vue.esm.js',
  '@': path.resolve(__dirname, '../src'),
}

Это упрощает для Webpack поиск Vue. Когда мы вводим зависимости в файлы JavaScript, мы также можем легко их использовать.@заменитьsrcУстранение необходимости написать файл пути неприятностей.

Давайте добавимresolve.extensionsатрибут, так что мы можем опустить суффикс при введении зависимостей или файлов:

extensions: ['*', '.js', '.json', '.vue'],

Свойство extensions представляет собой массив. После этой конфигурации мы можем опустить суффикс при импорте файлов JavaScript, файлов json и однофайловых компонентов Vue в файлы JavaScript.

Вышеуказанные шаги очень важны, и их нельзя пропускать.

Затем мы проверяем, доступен ли однофайловый компонент Vue.

Установите Вью:

npm i vue --save

затем изменитьindex.jsСодержимое файла следующее:

import Vue from 'vue';
import App from './App';

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
});

Затем создайте каталог на том же уровнеApp.vueфайл со следующим содержимым:

<template>
  <h1>Hello World!</h1>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style>
  html, body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
  }
</style>

Команда выполненияnpm run devВы можете увидеть большой заголовок первого уровня — Hello World!

На этом этапе наш проект можно разрабатывать с использованием однофайловых компонентов Vue, но это еще не конец, нам еще предстоит выполнить некоторые задачи.

5. Оптимизируйте код CSS

Здесь мы используем плагин postcss autoprefixer для автоматического префикса нашего кода css, подходящего для разных браузеров.

Сначала установите зависимости:

npm i postcss-loader autoprefixer -D

затем изменитьmodule.rulesЭлементы конфигурации css в , после модификации выглядят следующим образом:

{
  test: /\.css$/,
  use: ['vue-style-loader', 'css-loader', 'postcss-loader']
}

Затем добавьте файл конфигурации в корневой каталог нашего проекта.postcss.config.js, содержание следующее:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

От нашего имени будет использоваться плагин autoprefixer.

После этого мы можем с удовольствием написать код, а сами можем проверить, добавляется ли префикс автоматически, что здесь повторяться не будем.

6. Включите горячее обновление

Включить горячие обновления в Webpack 4 относительно легко. Конкретные шаги следующие:

Исправлятьwebpack.dev.conf.js,существуетdevServerустановить в свойствахhotценностьtrueЭто представляет горячее обновление от имени. Но просто не хватает, вам нужно добавить плагин, чтобы продолжать модифицироватьwebpack.dev.conf.js.

Установите его свойство plugins следующим образом:

const webpack = require('webpack');
// 在文件头部引入 webpack 依赖
[
  new webpack.HotModuleReplacementPlugin()
]

Это включает горячее обновление css (поскольку vue-style-loader инкапсулирует style-loader, горячее обновление работает «из коробки»), но горячее обновление JavaScript пока недоступно, мы будем обновлять браузер каждый раз, когда мы модифицируем код, поэтому нам нужно для продолжения настройки.

Чтобы модули JavaScript также могли выполнять HMR, нам нужно сделать это в нашемВходной файл (index.js)Добавьте следующий код внизу:

if (module.hot) {
  module.hot.accept();
}

Следующим шагом является выполнение HMR.

Семь, сторонние библиотеки упакованы отдельно

Каждый раз, когда мы упаковываем проект, мы упаковываем упомянутые сторонние зависимости, такие как Vue, Vue-Router, React и т. д. Однако код этих библиотек в основном неизменен, и нам не нужно собирать их каждый раз при упаковке, поэтому нам лучше извлечь эти сторонние библиотеки и упаковать их отдельно, что поможет сократить время упаковки.

Официальный плагин — DllPlugin, но настройка этого плагина громоздка. Кто-то в интернете порекомендовал более полезный плагин -autodll-webpack-plugin, что действительно полезно.

Вот как это настроить:

Первая установка:

npm i autodll-webpack-plugin -D

затем вwebpack.base.conf.jsВведение:

const AutoDllPlugin = require('autodll-webpack-plugin');

Затем добавьте этот плагин в свойство plugins:

new AutoDllPlugin({
  inject: true, // will inject the DLL bundle to index.html
  debug: true,
  filename: '[name]_[hash].js',
  path: './dll',
  entry: {
    vendor: ['vue', 'vue-router', 'vuex']
  }
})

injectЕсли true, плагин автоматически вставит упакованные файлы сторонних библиотек в HTML.filenameимя упакованного файла.pathэто упакованный путь.entryэто вход,vendorИмя указанное вами, содержимое массива это имя пакета из сторонних библиотек, не пишите весь путь, автоматически пойдет Webpacknode_modulesнайти в.

Каждый раз при упаковке плагин будет проверять, не изменилась ли прописанная в записи сторонняя библиотека, если изменений нет, то плагин будет использовать запакованный файл в кеше, сократив время упаковки, а хеш не будет изменить в это время.

8. Извлеките общий код:

Используйте подключаемый модуль splitChucksPlugin, который поставляется с Webpack, без установки сторонних зависимостей.

Инструкции:

существуетwebpack.base.conf.jsДобавьте следующие объекты плагинов в атрибут плагинов;

new webpack.optimize.SplitChunksPlugin()

Это означает, что вы будете использовать конфигурацию извлечения по умолчанию для извлечения общего кода. Если вы не хотите использовать конфигурацию по умолчанию, передайте объект конфигурации конструктору плагина.

Конкретную конфигурацию см. в блоге Ленг Син Да Шен ——webpack4 - Руководство по использованию плагина SplitChunks, который очень четко и подробно описывает функцию элемента конфигурации.

9. Использование препроцессора стилуса

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

Метод импорта:

Сначала загрузите зависимости стилуса и стилуса-загрузчика:

npm i stylus stylus-loader -D

Затем в пункте конфигурацииmodule.rulesДобавляет объект конфигурации, который обрабатывает файлы стилуса.

Информация о конфигурации выглядит следующим образом:

{
  test: /\.styl(us)$/,
  use: ['vue-style-loader', 'css-loader', 'stylus-loader', 'postcss-loader']
}

Затем, пока вы добавляете тег стиля однофайлового компонента Vuelang='stylus', вы можете использовать стилус для написания CSS.

10. Извлечь CSS в один файл

Метод конфигурации для этой функции находится вОфициальный сайт VueLoaderОчень понятно объяснил.

используетmini-css-extract-pluginПлагины, первая установка:

npm i mini-css-extract-plugin -D

Затем импортируйте в шапку конфигурационного файла:

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

Затем, когда вы хотите извлечь CSS (например, упаковку производственной среды), вы берете всеvue-style-loaderЗаменено на MiniCssExtractPlugin.loader, что угодно ещеcss-loader,stylus-loaderПодожди и не двигайся.

Наконец, измените параметр плагинов, чтобы вставить следующие плагины:

new MiniCssExtractPlugin({
  filename: "[name].css",
  chunkFilename: "[id].css"
})

После упаковки вы обнаружите, что весь код CSS извлекается в один файл CSS.

награда

  • Конфигурация должна быть осторожной, ошибка может привести к необъяснимым ошибкам.
  • Изучая WebPack, чтобы больше практиковаться, теория света учится быть абстрактной.
  • Подробнее читайте документацию по Webpack, на самом деле многие вопросы в ней четко разъяснены, не спешите искать ответ в сети.
  • Готовые строительные леса — лучший пример, например, Vue-Cli, create-react-app. Посмотрите, как они настроены, и вы сможете кое-что узнать.

Пример кода находится в моемРепозиторий GitHub, учащиеся, которым это необходимо, могут забрать его самостоятельно.

Если есть ошибки, укажите на них!

Категории