учебник по быстрому запуску веб-пакета

Webpack

1. Знакомство с вебпаком.

1. Узнайте о Webpack

  • что такое вебпакзз
    • Webpack — это сборщик модулей.
    • С точки зрения Webpack все файлы ресурсов (js/json/css/img/less/...) на внешнем интерфейсе будут обрабатываться как модули.
    • Он будет выполнять статический анализ на основе зависимостей модулей и генерировать соответствующие статические ресурсы.
  • Понимание загрузчиков
    • Сам Webpack может загружать только модули JS/JSON, если вы хотите загружать другие типы файлов (модулей), вам нужно использовать соответствующий загрузчик для конвертации/загрузки
    • Сами загрузчики — это модули JavaScript, которые запускаются в среде node.js.
    • Это сама функция, которая принимает исходный файл в качестве параметра и возвращает результат преобразования.
    • Загрузчики обычно называются xxx-loader, где xxx представляет функцию преобразования, которую должен выполнять этот загрузчик, например json-loader.
  • конфигурационный файл (по умолчанию)
    • webpack.config.js : это модуль узла, который возвращает объект информации о конфигурации в формате json.
  • плагин
    • Плагины могут выполнять некоторые функции, недоступные загрузчику.
    • Использование плагинов обычно указывается в опции plugins информации о конфигурации webpack.
    • CleanWebpackPlugin: автоматически очищать указанные ресурсы папки.
    • HtmlWebpackPlugin: автоматически генерировать HTML-файлы и
    • UglifyJSPlugin: сжатие js-файлов

2. Учебные документы:

3. Запустите проект

  • Инициализируйте проект:
    • Создать файл package.json
    {
  "name": "webpack_test",
  "version": "1.0.0"
}
  • Установить веб-пакет
  • npm install webpack -g //установить глобально
- npm install webpack --save-dev  //局部安装

4. Скомпилируйте и упакуйте приложение

  • Создать запись src/js/ : entry.js
  • document.write("entry.js is work");
  • Создайте главную страницу: dist/index.html
    <script type="text/javascript" src="bundle.js"></script>
  • скомпилировать js
    • webpack src/js/entry.js dist/bundle.js
  • Просмотр производительности страницы

5. Добавьте файлы js/json

  • Создайте второй js: src/js/math.js
    export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}
  • Создайте файл json: src/json/data.json
    {
  "name": "Tom",
  "age": 12
}
  • Обновите запись js: entry.js
    import {cube} from './math'
import data from '../json/data.json'
//注意data会自动被转换为原生的js对象或者数组
document.write("entry.js is work <br/>");
document.write(cube(2) + '<br/>');
document.write(JSON.stringify(data) + '<br/>')
  • Скомпилируйте js:
    webpack src/js/entry.js dist/bundle.js
  • Просмотр производительности страницы

6. Используйте файл конфигурации веб-пакета

  • Создайте webpack.config.js
    const path = require('path'); //path内置的模块，用来设置路径。

module.exports = {
  entry: './src/js/entry.js',   // 入口文件
  output: {                     // 输出配置
    filename: 'bundle.js',      // 输出文件名
    path: path.resolve(__dirname, 'dist')   //输出文件路径配置
  }
};
  • Настройте команду npm: package.json
    "scripts": {
  "build": "webpack"
},
  • Пакетные приложения
    npm run build

7. Упакуйте css и файлы изображений

  • Установить загрузчик стилей
 npm install css-loader style-loader --save-dev
 npm install file-loader url-loader --save-dev
 补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
  • настроить загрузчик
    module: {
  rules: [
    {
      test: /.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    },
    {
      test: /.(png|jpg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192      
          }
        }
      ]
    }
  ]
}
  • Добавьте 2 изображения в приложение:
    • Миниатюра: img/logo.png
    • Большое изображение: img/big.jpg
  • Создайте файл стиля: src/css/test.css
    body {
  background: url('../img/logo.jpg')
}
  • Обновите запись js: entry.js
    • import '../css/test.css'
  • добавить стиль css
       #box1{
    width: 300px;
    height: 300px;
    background-image: url("../image/logo.jpg");
  }
  #box2{
    width: 300px;
    height: 300px;
    background-image: url("../image/big.jpg");
  }
  • index.html добавить элементы
      <div id="box1"></div>
  <div id="box2"></div>
  • Выполните команду упаковки:
    npm run build
  • найдена проблема:
    • Большое изображение нельзя упаковать в файл entry.js, а index.html отсутствует в созданном каталоге ресурсов.
    • Изображение загрузки страницы будет искаться в каталоге, где оно находится, поэтому путь к большому изображению не может быть найден, когда страница загружает изображение.
    • Решение:
    • Используйте publicPath : 'dist/js/' //Установите путь для предоставления ресурсов для index.html. После установки все ресурсы будут найдены в текущем каталоге.
    • Помещение index.html в dist/js/ также решает эту проблему.

8. Автоматическая компиляция и упаковка

  • Используйте webpack для разработки серверных инструментов: webpack-dev-server
  • скачать
    • npm install --save-dev webpack-dev-server
  • конфигурация веб-пакета
     devServer: {
   contentBase: './dist'
 },
  • конфигурация пакета
    • "start": "webpack-dev-server --open"
  • Скомпилируйте и упакуйте приложение и запустите
    • npm start

9. Используйте плагин веб-пакета

  • Часто используемые плагины
    • Используйте html-webpack-plugin для создания страниц, которые импортируют скрипты на основе шаблона html.
    • Очистите папку dist с помощью clean-webpack-plugin.
    • Используйте uglifyjs-webpack-plugin для сжатия упакованных файлов js.
  • скачать
    npm install --save-dev  html-webpack-plugin clean-webpack-plugin
  • конфигурация веб-пакета
       const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
   const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除之前打包的文件   
   plugins: [
     new HtmlWebpackPlugin({template: './index.html'}),
     new CleanWebpackPlugin(['dist']),
   ]
  • Создать страницу: index.html
       <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>webpack test</title>
   </head>
   <body>
   <div id="app"></div>
   <!--打包文件将自动通过script标签注入到此处-->
   </body>
   </html>
  • Упакуйте и запустите проект
    npm run build
npm start

2. Конфигурация файла webpack.config.js.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除之前打包的文件

module.exports = {
  entry: './src/js/entry.js',
  output: {
    filename: 'bundle.js',
    // publicPath : 'dist/js/',
    path: path.resolve(__dirname, 'dist/js')
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './index.html'}),
    new CleanWebpackPlugin(['dist']),
  ]
};
Категории