Как использовать веб-пакет для повышения эффективности разработки интерфейса (1)?

Webpack
Как использовать веб-пакет для повышения эффективности разработки интерфейса (1)?

Анализ бизнес-сценариев

При активном развитии экосистем Vue и React при разработке одностраничных приложений мы, как правило, не можем обойтись без использования скаффолдинга для автоматического создания шаблонов проектов.create-react-app project vue create projectи так далее. Но во многих сценариях приложений нам часто нужно выйти за пределы «теплицы» интерфейсной среды для разработки.Обычные из них:

  • Изготовление одной страницы H5
  • Традиционная веб-разработка (сJQuery,Bootstrapв качестве представителя для адаптации к более низким версиям браузеров, таких как IE)
  • Отображение статических страниц
  • ...

точка оптимизации

Возможно, когда вы столкнетесь с описанными выше сценариями разработки, вы можете просто запустить редактор, не сказав ни слова, и, засучив рукава, «закодировать челнок».
Вы можете успокоиться и внимательно проанализировать, у нас есть следующие точки оптимизации для общего процесса:

  • Код меняется, страница обновляется автоматически (не нужно лишний раз лихорадочно долбить F5)
  • Автоматически обрабатывать оптимизацию, кэширование, упаковку и сжатие статических ресурсов (сокращать время загрузки ресурсов, уменьшать HTTP-запросы ресурсов)
  • использоватьES6,ES7,Sass,PostCSS... (какой префикс поставщика браузера, загрузка импорта, простая реализация)
  • Два набора конфигураций для разработки и производства (ответственность за разработку и производство ясна и проста в обслуживании)

решение

webpackсовременныйJavaScriptСборщик статических модулей приложения (module bundler). когдаwebpackПо мере обработки приложение рекурсивно строит граф зависимостей (dependency graph), который содержит все модули, необходимые приложению, а затем упаковывает все эти модули в один или несколькоbundle.
С точки зрения непрофессионала,webpackкак повар,HTMLявляется сырьем и图片、CSS、JSЭто приправа, нам нужно только предоставить сырье и приправы,webpackЭто поможет нам с «превосходными кулинарными навыками» приготовить вкусное блюдо, которое поможет нам построитьWebзаявление.

Первый вкус вебпака

Начнем с примера, используяwebpack4.xПостепенно создавайте внешние леса с высокой степенью повторного использования, полными функциями и понятными модулями.

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

mkdir my-webpack && cd my-webpack
npm init -y // 可以 npm i nrm 下载 nrm 使用 nrm use taobeo 切换淘宝镜像，提升下载速度，nrm ls 查看当前使用的npm源
npm i webpack webpack-cli -g // 先全局安装，为了可以使用webpack命令
npm i webpack webpack-cli -D // 再项目本地安装，因为项目所需webpack版本是固定的，而全局webpack版本会随时更新，为了防止版本冲突

Создайтеwebpack.config.js、src/index.js、dist/index.htmlКаталог показан ниже

Введите следующие коды соответственно

<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Webpack</title>
</head>

<body>
  <script src="bundle.js"></script>
</body>

</html>

// src/index.js
console.log('hello webpack!');

// webpack.config.js
const path = require('path');
const pathResolve = targetPath => path.resolve(__dirname, targetPath)

module.exports = {
  entry: { 
    index: pathResolve('src/index.js') // 入口文件，即要打包的js文件
  },
  output: {
    path: pathResolve('dist'), // 打包文件的位置
    filename: 'bundle.js' // 打包文件的名称
  },
}

Затем в текущем каталоге введите в командной строкеwebpackможно увидеть

Hash: c949bc1db5e801df578d
Version: webpack 4.28.4
Time: 377ms
Built at: 2019-01-15 20:57:39
    Asset       Size  Chunks             Chunk Names
bundle.js  959 bytes       0  [emitted]  index
Entrypoint index = bundle.js
[0] ./src/index.js 47 bytes {0} [built]

WARNING in configuration // 通过设置mode的值（'development' or 'production'）即可解除警告
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

Это показывает, что мы успешно упакованы,distпапка созданаbundle.jsдляindex.htmlиспользовать. Открытьdist/index.html, как показано на рисунке:

Нельзя не спросить, этоwebpackВсё то же самое, только поменял имя js файла (index -> bundle), но это более хлопотно, код лучше набирать пошагово. Нет, это первый шаг, а потом придется сидеть сложа руки.

Добавить загрузчик и плагин

мы обнаруживаем,dist/index.htmlрукописный<script>Внедрение скриптов действительно хлопотно, почему бы и нетwebpackАвтоматическая генерация, а затем добавление некоторых приправ (CSS, картинки), не было бы более совершенным! мы удаляемdistпапка, вsrcДобавьте понравившуюся картинку под путь.

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

npm i html-webpack-plugin style-loader css-loader url-loader file-loader -D

Измените следующие файлы

/* src/index.css */
body {
  background: #ff4040;
}

// src/index.js
import './index.css'; // 导入css文件
import icon from './leaf.png'; 导入图片url

console.log('hello webpack!');

// 创建img标签给src赋值，并插入html文档
const img = document.createElement('img');
img.setAttribute('src', icon);
document.body.appendChild(img);

// webpack.config.js
const path = require('path');
const pathResolve = (targetPath) => path.resolve(__dirname, targetPath);
const htmlWebpackPlugin = require('html-webpack-plugin'); // 导入‘html-webpack-plugin’插件
module.exports = {
  entry: {
    index: pathResolve('src/index.js'),
  },
  output: {
    path: pathResolve('dist'),
    filename: '[name].js',
  },
  module: {  // loader专注于处理制定格式的文件,来加载各种各样的资源
    rules: [
      {
        test: /\.css$/, // 正则匹配以.css结尾的文件
        use: ['style-loader', 'css-loader'], // loader从右向左执行 先使用css-loader提取css资源，然后使用style-laoder通过<style>标签插入<head>
      },
      {
        test: /\.(png|jpg|jpeg|svg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
                limit: 8192, // 小于8kb的文件则转为dataURL:Base64形式，大于8kb则交由file-loader处理，生成新图片并打包
                name: '[name].[hash:7].[ext]', // hash值对应本次build的hash值，每次打包都不相同
                outputPath: 'img', // 输出路径，即dist/img
            },
          },
        ],
      },
    ],
  },
  plugins: [ // 插件专注于处理webpack在编译过程中某个特定的任务
    new htmlWebpackPlugin({ // 该插件可以自动生成HTML文件，并导入静态资源
      filename: pathResolve('dist/index.html'), // 生成HTML文件名称
      title: 'my-webpack' // 文档名称
    }),
  ],
};

запустить в командной строкеwebpack, вы можете видеть, что он генерируется автоматическиdistпапка, открытьdistв папкеindex.html, можно увидеть:

Добавьте devServer и горячее обновление

Каждый раз, когда мы модифицируем код, нам приходится вводить команду webpack для пересборки, а это головная боль.Есть ли простой способ? Конечно, есть! Мы можем использовать webpack-dev-server для создания локального сервера, чтобы обеспечить своевременный просмотр и горячие обновления.

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

npm i webpack-dev-server -D

Измените следующие файлы

// package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  + "dev" : "webpack-dev-server --mode development",
  + "build": "webpack --mode production"
  },

// webpack.config.js
+   const webpack = require('webpack');
    module.exports = {
    +   devServer: {
            contentBase: pathResolve('dist'), // 本地服务器所加载文件的目录
            port: '8080', // 设置端口号为8080
            inline: true, // 文件修改后实时刷新（浏览器刷新）
            historyApiFallback: true, // 使用HTML5 History API时，对于任何404响应，返回index.html
            hot: true // 热更新（浏览器不刷新）
        },
        plugins: [
        +    new webpack.HotModuleReplacementPlugin(), // 热更新插件 
        +    new webpack.NamedModulesPlugin()
      ]
 }

// src/index.js
// ...
if (module.hot) {
  module.hot.accept() // 如果存在热更新，则启用
}

воплощать в жизньnpm run dev

Исправлятьsrc/index.js

// src/index.js
+ console.log('hot replacement!');

Вы можете сразу увидеть:

Очевидно, что веб-страница здесь не обновилась, но произошло горячее обновление.

Используйте Sass, postCSS, отдельный CSS

оглядыватьсяdistпод файлом и нетcssСвязанные документы,htmlНет страницы в файлеstyleЭтикетка после упаковкиcssинтегрирован вjsсередина.

Очевидно, это не то, чего мы хотим, наша следующая задача состоит в том, чтобыCSSотделить от него и попытаться использоватьSass(язык препроцессора CSS) иpostCSSчтобы добавить префикс поставщика браузера.

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

npm i mini-css-extract-plugin node-sass sass-loader postcss-loader autoprefixer -D

новыйsrc/index.scss

/* src/index.scss */
$link-color: #f1f1f1;

body {
  background: $link_color;
}

#avatar {
  width: 200px;
  height: 200px;
  background: url('./packet.png'); // 准备一张大于8kb的图片
  border-radius: 50%;
}

новыйsrc/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>my-webpack</title>
</head>

<body>
  <img id="avatar"></img>
</body>

</html>

новыйpostcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')({ // 自动管理浏览器前缀的插件
      browsers: ['last 10 versions', 'Firefox >= 20', 'Android >= 4.0', 'iOS >= 8']
    })
  ]
}

Измените следующие файлы

// src/index.js
- import './index.css';
+ import './index.scss';

// webpack.config.js
+   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    module.exports = {
        module:{
            rules:[
        +       {
                    test: /\.(sa|sc|c)ss$/,
                    use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../' // CSS中最终路径 = publicPath + background: url，设置publicPath确保图片取得到
                        }
                    },
                        'css-loader',
                        'postcss-loader',
                        'sass-loader',
                    ],
                },
            ]
        },
        plugins: [
        +    new MiniCssExtractPlugin({
                filename: 'css/[name].[contenthash:7].css', // contenthash 根据css文件内容生成hash值
            }),
            new htmlWebpackPlugin({
            -    title: 'my-webpack', 
            +    template: pathResolve('src/index.html'), // HTML模板
            }),
        ],
    },
  ],

бегатьnpm run build, можно увидеть,CSSфайлы были разделены на отдельные файлы, вheadголова сlinkметод вводится и автоматически добавляетсяwebkit moz msи другие префиксы поставщика совместимости.

Эпилог

Первое серьезное исследованиеЧто такое webpack и использование загрузчика и плагина, так что наши интерфейсные леса уже могут удовлетворить основные потребности бизнеса.
Вторая часть будет дополнительно оптимизировать наши интерфейсные леса, включая, помимо прочего,Разделение кода, сжатие, обработка кэша, несколько страниц.
Мой уровень ограничен, и я надеюсь, что все смогут указать это в области комментариев, 😃😃😃 Еще раз спасибо за чтение! ! !

обновлен Как использовать веб-пакет для повышения эффективности разработки интерфейса (2)?

Категории