Webpack 3 Sass cssnano Autoprefixer Workflow II

Это продолжение базового рабочего процесса препроцессора Webpack 3 Sass, о котором я писал здесь, включает в себя обработку относительных URL-адресов в Sass для таких вещей, как шрифты и изображения. Популярная карусель Кена Уилера Slick содержит эти типы ресурсов в своем Sass, так что давайте воспользуемся ими в этом упражнении.

Начиная

Обязательное условие: Node.js с npm.

Перейдите к корню проекта в вашем CLI, таком как Терминал, Cygwin или PowerShell.

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

npm init

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

Создайте файл index.html в корне проекта с неупорядоченным списком изображений-заполнителей. Включите ссылку dist/style.css в заголовок документа и ссылку dist/app.js перед закрывающим тегом body. Добавьте атрибут класса с ползунком значения в элемент неупорядоченного списка. Это отличает его от выбора с помощью нашего скрипта и кода стиля: <ul class="slider">

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>Document</title>
    <link rel="stylesheet" media="all" href="dist/style.css">
</head>
<body>
    <ul class="slider">
        <li>
            <h3>Slide 1</h3>
            <img src="https://placehold.it/800x600" />
        </li>
        <li>
            <h3>Slide 2</h3>
            <img src="https://placehold.it/800x600" />
        </li>
        <li>
            <h3>Slide 3</h3>
            <img src="https://placehold.it/800x600" />
        </li>
        <li>
            <h3>Slide 4</h3>
            <img src="https://placehold.it/800x600" />
        </li>
        <li>
            <h3>Slide 5</h3>
            <img src="https://placehold.it/800x600" />
        </li>
    </ul>
    <script async src="dist/app.js"></script>
</body>
</html>

Используя Emmet, который встроен в VS Code, вы можете создать содержимое index.html, введя восклицательный знак в первой строке, а затем нажав клавишу табуляции.

ловкий

Установите jQuery и карусель Slick, используя npm.

npm install --save jquery slick-carousel

В папке src/js создайте файл index.js JavaScript, чтобы импортировать входной файл Sass и карусельные модули jQuery и Slick.

index.js

import style from '../sass/main.scss'
import $ from 'jquery'
import 'slick-carousel'

$('ul.slider').slick({
    dots: true
});

Прежде чем мы сможем создать этот JavaScript, необходимо определить конфигурацию Webpack и скрипт npm.

Вебпак и Бабель

Установить Вебпак

npm install --save-dev webpack

Создайте файл webpack.config.js в корне проекта, чтобы транспилировать наш JavaScript ES6 в ES5 для браузера с помощью babel.

webpack.config.js

const path = require('path')
const webpack = require('webpack')

module.exports = {
context: path.resolve(__dirname, './src'),
  entry: {
    app: './js/index.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: '[name].js'
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }
    ]
  },
  devtool: '#eval-source-map'
}

Установить Вавилон

npm install --save-dev babel-core babel-loader babel-preset-env

Создайте файл конфигурации .babelrc в корне проекта.

.babelrc

{
  "presets": ["env"]
}

Вот как проект структурирован до сих пор.

Строить

Установите cross-dev для согласованной переменной NODE_ENV при запуске сценариев NPM в Windows и OS X.

npm install --save-dev cross-env

Определите команды разработки и сборки для npm-run-script в package.json.

package.json

...

  ],
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --watch --progress --colors",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

В нижней части конфигурации веб-пакета добавьте соответствующие сценарии разработки и сборки npm, используя настройки NODE_ENV.

webpack.config.js

...

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Обратите внимание, что многоточие … в приведенном выше фрагменте кода не является частью фактического кода и используется только для обозначения кода, который пропускается и не применим к примеру. Имейте это в виду, когда встретите многоточие в оставшихся фрагментах. Чтобы просмотреть весь файл, изучите исходный код.

Использование псевдонима npm-run-scripts npm run для выполнения сборки.

npm run build

Для разработки используйте npm run dev для отслеживания изменений и постепенной сборки при сохранении изменений.

Теперь у вас должна быть новая папка dist в корне проекта, в которой выводится пакет Webpack.

Следующая страница охватывает:

установка загрузчиков Webpack для обработки Sass
установка плагина Extract Text для вывода файла style.css
установка плагина Autoprefixer PostCSS
создание и импорт файлов Sass
повторная сборка и проверка вывода приложения

Первоначально опубликовано на сайте jimfrenette.com 28 января 2018 г.

Webpack 3 Sass cssnano Autoprefixer Workflow II

Начиная

ловкий

Вебпак и Бабель

Строить

Вопросы по теме