На основе упаковки многостраничных приложений в веб-пакете с размышлениями о фронтенд-инжиниринге.

Webpack

предисловие

существуетVue,ReactЭпоха популярности в сочетании с различными фреймворками脚手架, надо сказать, сейчасФронтенд-инжинирингНе меньше, чем любое конечное развитие

Благодаря постоянному совершенствованию интеграции различных строительных лесов весь проект теперь может быть разработан практически с нулевой конфигурацией, широко известной как傻瓜式开发

Наш код глуп?

Не делайте!!

Глупее становятся люди, которые разрабатывают код

Строительные леса не отвечают всем потребностям развития

Например, когда нам нужно разработать официальный веб-сайт компании, учитывая SEO веб-сайта, нам все равно может понадобиться использовать нативную разработку js.Режим разработки примерно следующий:

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

Хотя можно использоватьрендеринг на стороне сервера, а такжепредварительный рендерингоптимизировать этот метод разработки, то есть добитьсяFront-end и back-end раздельная разработка, с учетом сайтаSEO, но вы все равно можете столкнуться с некоторыми проблемами

  1. В силу исторических причин свергнуть и переделать не реально
  2. Рендеринг на стороне сервера увеличивает затраты на разработку технологий
  3. По крайней мере, сервер должен построить среду узла
  4. ...

В это время, возможно, нам придется вернуться к режиму развития древних времен.

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

то есть использоватьwebpackУпаковка многостраничных приложений позволяет нам легко разрабатывать одностраничные приложения и удовлетворять потребности в разработке проектов.

Самое главное - почеркwebpackКонфигурация может дать вам более глубокое понимание интерфейсной разработки,让开发代码的人越来越聪明,让代码变得越来越傻

рабочий процесс webpack (на местном языке)

Абстрактно, этоМинутаа такжеа также

  • При разработке делайте код более'близкий к людям'

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

  • После упаковки дайте код больше«Профессиональный компьютер»

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

Имея в виду эту идею, мы можем начать строитьwbpackохватывать

Структура каталогов проекта

Структура файла проекта в среде разработки

После упаковки мы хотим, чтобы структура проекта была достаточно чистой.

многостраничная конфигурация webpack

  1. Предупреждение о множественном коде!
  2. Полный исходный код был выпущенgithub, с полными комментариями, добро пожаловать прямо на gaihub, чтобы увидеть исходный код
  3. Если полезно, добро пожаловать в звезду, большое спасибо

Демонстрация эффекта

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

  • Среда сборки

Входная конфигурация

Чтобы позволить нам быстро увидеть эффект страницы, мы сначала записываем запись в два файла, чтобы указать, что пакет является многостраничным (позже он будет изменен на автоматическое чтение)

  • entry

module.exports = {
  entry: {
    index: path.join(__dirname, "../src/pages/index/index.js"),
    user: path.join(__dirname, "../src/pages/user/user.js"),
  }
 }

Экспорт конфигурации

  • output
 output: {
    path: path.resolve(__dirname, "../dist"), // 打包路径
    filename: assetsPath("js/[name]_[hash:7].js"), // 文件名称
    publicPath: "./",
  },
  • использоватьhtml-webpack-plugin, динамически генерировать соответствующий шаблон

Точно так же здесь мы сначала записываем в index и user два шаблона страниц.

const hwp = [
  new HtmlWebpackPlugin({
    filename: "index.html",
    template: resoveDev("/index/index.html"),
    title: "首页",
    chunks: ["index", "common"],
    minify: {
      removeComments: false,
      collapseWhitespace: false,
      removeAttributeQuotes: false,
      //压缩html中的js
      minifyJS: false,
      //压缩html中的css
      minifyCSS: false,
    },
  }),
  new HtmlWebpackPlugin({
    filename: "user.html",
    template: resoveDev("/user/user.html"),
    title: "我的",
    chunks: ["user", "common"],
    minify: {
      removeComments: false,
      collapseWhitespace: false,
      removeAttributeQuotes: false,
      //压缩html中的js
      minifyJS: false,
      //压缩html中的css
      minifyCSS: false,
    },
  }),
];
// 在插件中使用
plugins:[...hwp]

css обработка

webpackне поддерживает обработку, кромеjsЛюбой файл, кромеloaderиметь дело с

...
module:{
	rules:[
       {
        test: /\.less$/,
        use: [
          {
            options: {
              publicPath: "../../", // 配置css里面的路径
            },
          },
          "css-loader",
          "less-loader",
        ],
      },
    ]
}
...

webpackПо умолчанию это будетcssтакже упакован вjsВнутри нам также нужно использоватьmini-css-extract-pluginПучокcssИзвлечь в отдельные файлы

...
module:{
	rules:[
       {
        test: /\.less$/,
        use: [
         loader: MiniCssExtractPlugin.loader,
          {
            options: {
              publicPath: "../../", // 配置css里面的路径
            },
          },
          "css-loader",
          "less-loader",
        ],
      },
    ]
}
...

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins:[new MiniCssExtractPlugin()]

Обработка изображения

использование обработки изображенийurl-loader

module:{
  rules:[
      {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: "url-loader",
          options: {
            limit: 1000, // 1kb一下的图片变成base64格式
            name: "[name]_[hash:7].[ext]", // 给图片添加hash
            outputPath: "./static/images", // 图片输出路径
          },
        },
  ]
}

Здесь следует отметить, чтоurl-loaderможет только справитьсяcssКартинки в файле, нам также нужно использоватьhtml-loaderиметь дело сhtmlфотографии внутри, ноhtml-loaderа такжеhtml-webpack-pluginесть конфликт, поэтому мы не можемwebpackвнутренняя сторонаhtml-loaderможно настроить только при использованииhtmlКомпромисс при использовании изображений в

 <img src=" <%= require('@/assets/images/logo.png' )%>" alt="" />

а такжеhtml-loaderВажным использованием html является то, что он может реализовать модульность html.

<body>
	<!-- 加载公用html -->
  	<%= require('html-loader!../common/header.html') %>
</body>

Различие между средами разработки и производственной средой

Мы используем три файла для настройкиwebpack

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

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config config/webpack.dev.config.js --open",
    "builds": "webpack  --config  config/webpack.pro.config.js",
  }

существуетwebpack.dev.config.jsа такжеwebpack.pro.config.jsобъединить

// base 为基础文件  pro 为生成环境配置
merge(base, pro)

Последующая оптимизация

Первая версия, которой мы следуемКод запускается первымВ принципе, оптимизация вебпака не производилась, и следующая версия будет обновлена

    1. По соглашению маршруты генерируются автоматически
    1. js,cssизtree-shakingоптимизация
    1. eslint+prettierКонфигурация
    1. Это инструмент командной строки, который разделен на терминал ПК и мобильный терминал.Вы можете выбрать сами при использовании командной строки для создания проекта.

наконец

Не забудьте поставить лайк 😉

Категории