Создание проекта веб-пакета с нуля

1. Новый проект

Создайте новую пустую папку для создания проекта и используйте команду npm init для создания файла package.json.
После ввода этой команды терминал запросит у вас ряд сведений, таких как имя проекта, описание проекта, автор и т. д. Вы также можете использовать команду npm init -y для одновременного создания файла package.json, чтобы терминал не будет задавать вам вопросы.

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

При установке webapck также устанавливается webpack-cli, потому что модуль webpack разделяет некоторые функции на модуль webpack-cli после версии webpack4.x, поэтому необходимо установить оба.Метод установки следующий:

npm install webpack webpack-cli --global    //这是安装全局webpack及webpack-cli模块
npm install webpack webpack-cli --save-dev  //这是安装本地项目模块

3. Создайте новый каталог файлов

Создайте две новые папки в папке корневого каталога, а именно папку src и папку dist, а затем создайте еще три файла: На этом этапе структура проекта выглядит следующим образом.

index.html -- положить в папку dist;
hello.js -- положить в папку src;
index.js -- положить в папку src;

3.1 Напишите html-код в index.html, его функция состоит в том, чтобы ввести наш упакованный файл js:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Webpack Project</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
    <!--这是打包之后的js文件，我们暂时命名为bundle.js-->
  </body>
</html>

3.2. Добавьте этот модуль (hello.js) в index.js:

let div = document.createElement('div')
div.innerHTML = 'welcome to my github !'
document.querySelector('#root').appendChild(div)

Когда мы упаковываем, нам нужно только упаковать модуль index.js в bundle.js.

3.4, простейшая упаковка webpack

// 在终端中使用如下命令进行打包：
webpack src/index.js --output dist/bundle.js

Вышеприведенное эквивалентно упаковке файла index.js в папке src в файл bundle.js в файле dist, а затем генерируется файл bundle.js для ссылки на файл index.html. Теперь откройте index.html, чтобы увидеть нашу страницу.

4. Настройте webpack.config.js

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

const path = require('path') // 处理绝对路径
module.exports = {
  entry: path.join(__dirname, '/src/index.js'), // 入口文件
  output: {
    path: path.join(__dirname, '/dist'), //打包后的文件存放的地方
    filename: 'bundle.js' //打包后输出文件的文件名
  }
}

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

5. Создайте локальный сервер

Теперь мы просматриваем страницу, открывая локальный файл, который все еще кажется немного низким. Все скаффолдинги, такие как vue и react, работают на локальном сервере. Так что делаем дальнейшую оптимизацию.

5.1 webpack-dev-server настроить локальный сервер

Webpack предоставляет необязательный локальный сервер разработки. Этот локальный сервер построен на node.js. Это отдельный компонент, который необходимо установить отдельно в качестве зависимости проекта перед настройкой его в webpack: npm i webpack-dev-server -D

Вот некоторые параметры конфигурации для devServer:

contentBase : установить каталог файла, читаемого сервером, в настоящее время мы устанавливаем его как «./dist»
порт: установите номер порта, если он не указан, по умолчанию 8080.
inline : установите значение true, чтобы автоматически обновлять страницу при изменении исходного файла.
historyApiFallback: установите значение true, все переходы будут указывать на index.html.

Теперь мы добавляем эти конфигурации в файл webpack.config.js следующим образом:

// webpack.config.js
const path = require('path')
module.exports = {
  entry: path.join(__dirname, '/src/index.js'), // 入口文件
  output: {
    path: path.join(__dirname, '/dist'), //打包后的文件存放的地方
    filename: 'bundle.js' //打包后输出文件的文件名
  },
  devServer: {
    contentBase: './dist', // 本地服务器所加载文件的目录
    port: '8088', // 设置端口号为8088
    inline: true, // 文件修改后实时刷新
    historyApiFallback: true //不跳转
  }
}

5.2 Добавьте команды запуска и упаковки в файл package.json.

Файл package.json изменен следующим образом.

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

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

npm run dev запускает локальный сервер, webpack-dev-server — это команда для запуска сервера, а --open используется для автоматического открытия браузера после запуска сервера.
npm run build выполняет команду упаковки

На данный момент нам просто нужно ввести npm run dev для запускаПросмотрите страницу по адресу http://localhost:8088/.

6. Настроить общий загрузчик

Загрузчики позволяют веб-пакету обрабатывать файлы, отличные от JavaScript (сам веб-пакет понимает только JavaScript). Загрузчики могут преобразовывать все типы файлов в действительные модули, которые может обрабатывать веб-пакет, а затем вы можете воспользоваться возможностями упаковки веб-пакета и обработать их.

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

test: регулярное выражение для соответствия расширению файлов, обрабатываемых загрузчиками (обязательно)
loader: имя загрузчика (обязательно)
include/exclude: вручную добавлять файлы (папки), которые должны быть обработаны, или экранировать файлы (папки), которые не нужно обрабатывать (необязательно);
options: предоставить дополнительные параметры настройки для загрузчиков (необязательно)

Настроить css-загрузчик и sass-загрузчик

Если мы хотим загрузить файл css, нам нужно установить и настроить style-loader и css-loader.
Если мы хотим использовать sass, нам нужно настроить sass-loader и node-sass.

css-loader: загружать файлы .css
style-loader: используйте тег style для внедрения внутренних стилей css-loader в наши HTML-страницы.

const path = require('path')
module.exports = {
  entry: path.join(__dirname, '/src/index.js'), // 入口文件
  output: {
    path: path.join(__dirname, '/dist'), //打包后的文件存放的地方
    filename: 'bundle.js' //打包后输出文件的文件名
  },
  devServer: {
    contentBase: './dist', // 本地服务器所加载文件的目录
    port: '8088', // 设置端口号为8088
    inline: true, // 文件修改后实时刷新
    historyApiFallback: true //不跳转
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 正则匹配以.css结尾的文件
        use: ['style-loader', 'css-loader']
      {
        test: /\.(scss|sass)$/, // 正则匹配以.scss和.sass结尾的文件
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
}

Настроить Babel-загрузчик

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

Позволяет использовать последний код JavaScript (ES6, ES7...);
Позволяет использовать языки, которые были расширены на основе JavaScript, например JSX React;

module: {
  ...
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src')]
    }
  ]
}

обрабатывать изображения

При обработке ресурсов изображения обычно используются два загрузчика файлов: загрузчик файлов и загрузчик URL. При использовании загрузчика URL для загрузки изображения, если изображение меньше верхнего предела, преобразуйте изображение в строку base64, в противном случае используйте загрузчик файлов для загрузки изображения.

module: {
  ...
  rules: [
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    }
  ]
}

7. Настройте общие плагины

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

7.1 Автоматически генерировать HTML-файлы (HtmlWebpackPlugin)

Теперь мы все используем файл index.html, созданный в начале, а затем вручную импортируем bundle.js.Если в будущем мы импортируем более одного файла js, нам придется изменить имя файла js в index.html, поэтому может index будет автоматически генерироваться?.html и автоматически ссылаться на упакованный js?
Плагин HtmlWebpackPlugin используется для решения этой проблемы:

Установите плагин npm i html-webpack-plugin -D
Очистите папку dist
Создайте новый index.html в корневом каталоге, содержимое такое же, как и в исходном html, но файл js не импортируется.
В webpack.config.js мы представили плагин HtmlWebpackPlugin.

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    }
  })
]

На этом этапе мы используем сборку npm run для упаковки, вы обнаружите, что папка dist и файл html будут созданы автоматически.

7.2 Очистите папку /dist (CleanWebpackPlugin)

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

установить npm i clean-webpack-plugin -D
Настройте webpack.config.js

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    }
  }),
  new CleanWebpackPlugin(['dist'])
]

7.3. Горячее обновление (HotModuleReplacementPlugin)

Мы хотим автоматически обновлять страницу после модификации кода, для чего требуется плагин HotModuleReplacementPlugin (HMR)

Добавьте параметр hot: true в элемент конфигурации devServer.
Поскольку HotModuleReplacementPlugin поставляется с модулем веб-пакета, его можно использовать непосредственно в элементе конфигурации плагинов после введения веб-пакета.

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    }
  }),
  new CleanWebpackPlugin(['dist'])
  new webpack.HotModuleReplacementPlugin()
]

7.4. Добавьте префикс css

Обычно, когда мы пишем css, к некоторым свойствам нужно добавить префикс вручную, например, -webkit-border-radius: 10px;, в webpack мы можем позволить ему добавить его автоматически

установить автопрефиксер npm i postcss-loader -D
Создайте новый файл postcss.config.js в корневом каталоге проекта.

module.exports = {
  plugins: [
    require('autoprefixer') // 引用autoprefixer模块
  ]
}
module.exports = {
   ...
  module: {
    rules: [
      {
        test: /\.css$/, // 正则匹配以.css结尾的文件
        use: [
          { loader: 'style-loader' }, // 这里采用的是对象配置loader的写法
          { loader: 'css-loader' },
          { loader: 'postcss-loader' } // 使用postcss-loader
        ]
      }
       ...
    ]
  }
   ...
}

7.5, разделение css ExtractTextPlugin

Превратите css в сгенерированный файл, а не встроенный. Основная цель этого плагина — извлечь стиль css и предотвратить нарушение загрузки стиля страницы, вызванное упаковкой стиля в js.

установить npm я извлечь-текст-webpack-plugin@next -D
Включите и используйте плагин в файле webpack.common.js:

const ExtractTextPlugin = require('extract-text-webpack-plugin') //引入分离插件
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 正则匹配以.css结尾的文件
        use: ExtractTextPlugin.extract({
          // 相当于回滚，经postcss-loader和css-loader处理过的css最终再经过style-loader处理
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('css/index.css') // 将css分离到/dist文件夹下的css文件夹中的index.css
  ]
}

На этом этапе после запуска сборки npm run вы обнаружите, что в папке /dist есть дополнительные папки /css и файлы index.css.

7.6 Удалите избыточный CSS

Иногда мы пишем слишком много CSS, и мы можем неосознанно писать и повторять некоторые стили, что приводит к избыточному коду.Следующие методы могут быть оптимизированы

установить npm i purecss-webpack pure-css glob -D
Внедрить плагин clean-webpack-plugin и glob и использовать

const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件
const glob = require('glob') // 引入glob模块,用于扫描全部html文件中所引用的css

plugins: [
  new PurifyCssWebpack({
    paths: glob.sync(path.join(__dirname, 'src/*.html')) // 同步扫描所有html文件中所引用的css
  })
]

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

Обобщить несколько методов оптимизации упаковки веб-пакетов.

Обобщить методы оптимизации производительности внешнего интерфейса.

Создайте шаблон разработки vue-cli для мобильных устройств H5.

Прочитайте всю внешнюю маршрутизацию, внутреннюю маршрутизацию, одностраничное приложение, многостраничное приложение в одной статье.

Суммируйте объем JS, этот указатель и стрелки из вопроса интервью

О питах нескольких мобильных софт-клавиатур и их решениях

Говоря об анти-тряске и троттлинге JavaScript

Обобщить несколько методов дедупликации массива

Говоря о глубоком копировании и мелком копировании JavaScript