История Webpack 4 и как его правильно настроить [Обновлено]

Webpack

Специальное напоминание: нет правильного пути. #простовебпаквещи

Оригинал:Woohoo.Instagram.com/afraid/BH PO4PQ от…

Этот пост в блоге последний раз обновлялся 28 декабря 2018 г. для Webpack v4.28.0.

Обновление от 23 июня 2018 г.: я получил много комментариев о том, как заставить его работать и как его улучшить. Спасибо за ваш отзыв! Я постарался учесть каждый комментарий! В какой-то момент я также решил создать проект шаблона Webpack на Github, где вы можете использовать Git для извлечения последних файлов конфигурации Webpack. Спасибо за поддержку! Связь:GitHub.com/ругаюсь, пусть он/я…

Обновление: эта статья является частью серии статей о структурировании Webpack и React.js. Прочтите раздел о настройке среды разработки React здесь:

Спасибо за отличный отзыв о моих уроках. Я с гордостью могу сказать, что на днях Webpack порекомендовал это руководство в Твиттере, и некоторые участники уже поддержали его!

Спасибо!

В Интернете есть миллионы руководств, поэтому вы, вероятно, видели тысячи способов настройки файлов Webpack, и все они являются рабочими примерами. Почему это происходит? Сам Webpack развивается очень быстро, и многие загрузчики и плагины должны не отставать. Это одна из основных причин, по которой эти файлы конфигурации такие разные: использование разных комбинаций версий одного и того же инструмента может работать, а может и не работать.

Скажу лишь одно, вот мое искреннее мнение: многие люди уже жалуются на Webpack и его неуклюжесть, и во многом это правда. Я должен сказать, что в соответствии с моим использованиемГлоток и ворчаниеопыта, вы также столкнетесь с ошибкой того же типа, что означает, что при использованииnpm-модулинекоторые версии неизбежно будут несовместимы.

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

Если вы новичок в Webpack, чтение документации — хорошее место для начала.Webpack имеет очень хорошую документацию, который объясняет многие части, поэтому я кратко расскажу о них.

Нулевая конфигурация: Webpack 4 не требует файлов конфигурации, что является новой функцией Webpack 4. Webpack растет постепенно, поэтому в первую очередь нет необходимости делать ужасную настройку.

повышение производительности: Webpack 4 — самый быстрый релиз.

Разумный дефолт: Основная концепция Webpack 4 — «Вход, выход, загрузчик, плагин". Я не буду вдаваться в подробности об этом. Различие между загрузчиком и плагином очень расплывчато, и его реализация полностью зависит от автора библиотеки.

Основная идея

Вход

это должно быть твоим.jsдокумент. Теперь вы можете увидеть некоторые конфиги, в которых люди включают.scssили.cssдокумент. Это серьезный взлом, который может привести к множеству неожиданных ошибок. Иногда вы также увидите один с несколькими.jsзапись файла. Хотя некоторые решения позволяют вам это сделать, я бы сказал, что обычно это добавляет сложности и должно выполняться только в том случае, если вы действительно знаете, почему вы это делаете.

выход

это вашаbuild/,dist/илиwateveryounameit/Папка, в которой будут храниться окончательные сгенерированные файлы js. Это ваш окончательный результат, состоящий из модулей.

Погрузчик

Они в основном компилируют или преобразуют ваш код, например, postcss-loader будет проходить через разные плагины. Вы узнаете об этом позже.

плагин

Плагины играют жизненно важную роль в выводе кода в файл.

Быстрый старт

Создайте новый каталог и перейдите в него:

mkdir webpack-4-tutorial
cd webpack-4-tutorial

Файл инициализации Package.json:

npm init

или

yarn init

Нам нужно скачать модульWebpack v4а такжеwebpack-cli. Запустите его в своем терминале (консоли):

npm install webpack webpack-cli --save-dev

или

yarn add webpack webpack-cli --dev

Убедитесь, что у вас установлена ​​версия 4, если нет, то можетеpackage.jsonУкажите это явно. Открой сейчасpackage.jsonЗатем добавьте скрипт сборки:

"scripts": {
  "dev": "webpack"
}

Попробуйте запустить его, и вы, скорее всего, увидите предупреждение:

WARNING in configuration

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/

Режим веб-пакета 4

Вам нужно отредактировать скрипт, чтобы включить тег шаблона:

"scripts": {
  "dev": "webpack --mode development"
}

ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'

Это означает, что Webpack ищет.src/в папкеindex.jsдокумент. Это поведение Webpack 4 по умолчанию и причина, по которой он реализует нулевую конфигурацию.

Давайте создадим с.jsкаталог файлов, таких как./src/index.js, и поместите туда код.

console.log("hello, world");

Теперь запустите скрипт разработчика:

npm run dev

或者

yarn dev

Если вы столкнулись с ошибкой на этом этапе, прочитайте обновление ниже этого подраздела. В противном случае к настоящему времени у вас должен быть./dist/main.jsсодержание. Это хорошо, потому что мы знаем, что наш код скомпилирован. Но что только что произошло?

По умолчанию Webpack имеет нулевую конфигурацию, что означает, что вам не нужно настраивать webpack.config.js, когда вы начинаете его использовать. Поэтому он должен предполагать некоторое поведение по умолчанию, например, он всегда будет искать в папке ./src по умолчанию, искать в ней index.js и выводить в ./dist/main.js . main.js — это скомпилированный файл с зависимостями.

2018.12.23 Обновить

Если вы столкнулись с этой проблемой:

ERROR in ./node_modules/fsevents/node_modules/node-pre-gyp/lib/publish.js

Module not found: Error: Can't resolve 'aws-sdk' in '/Users/mobr/Documents/workshop/test-webpack-4-setup/node_modules/fsevents/node_modules/node-pre-gyp/lib'

Более подробное описание см.здесь, то вы, скорее всего, используете более зрелую версию Webpack v4.

К сожалению, если вы не создаете файл WebPack.config.js, вы не можете это решить (я покажу вам последующий раздел этой статьи, как это сделать). Просто следите за моим учебным пособием до тех пор, пока не раздел «escape Code Code» и скопируйте файл конфигурации, которые там пасы. Вам нужно скачатьwebpack-node-externals.

npm install webpack-node-externals --save-dev

或者是

yarn add webpack-node-externals --dev

и импортируйте туда следующий код:

const nodeExternals = require('webpack-node-externals');
...
module.exports = {
    ...
    target: 'node',
    externals: [nodeExternals()],
    ...
};

из этогомодуль.

В webpack обычно используется два файла конфигурации, особенно в больших проектах. Обычно у вас будет один файл для разработки и один файл для производства. В веб-пакете 4 у вас естьразвиватьа такжеПроизводствоДва режима. Это устраняет необходимость в двух файлах (для проектов среднего размера).

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

Если вы уделяли пристальное внимание, вы должны были проверить свойmain.jsфайл и узнал, что он не был минимизирован.

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

Вы можете легко переопределить конфигурацию по умолчанию в скрипте npm, используя флаг:

"scripts": {
  "dev": "webpack --mode development ./src/index.js --output ./dist/main.js",
  "build": "webpack --mode production ./src/index.js --output ./dist/main.js"
}

Это переопределит параметры по умолчанию без необходимости что-либо настраивать.

В качестве упражнения вы также можете попробовать эти маркеры:

  • — флаг просмотра для включения режима просмотра. Он будет отслеживать изменения файлов и перекомпилировать каждый раз, когда файл обновляется.
"scripts": {
  "dev": "webpack --mode development ./src/index.js --output ./dist/main.js --watch",
  "build": "webpack --mode production ./src/index.js --output ./dist/main.js --watch"
}
  • — тег входа. Точно такой же, как выходной тег, но с переписанным входным путем.

Переведите свой код .js

Большинство современных JS-кодов написаны на ES6, однако не все браузеры поддерживают ES6. Поэтому вам нужно его транспилировать — модное слово для преобразования вашего кода ES6 в ES5. вы можете использоватьbabel(сейчас самый популярный инструмент) для решения. Конечно, транспиляция предназначена не только для кода ES6, но и для многих реализаций JS, таких как TypeScript, React и т. д.

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

或者

yarn add babel-core babel-loader babel-preset-env --dev

Это та часть, где вам нужно создать файл конфигурации для babel.

nano .babelrc

Вставьте следующее:

{
"presets": [
  "env"
  ]
}

У нас есть два варианта настройки babel-loader:

  • Использовать файлы конфигурацииwebpack.config.js
  • существуетнпм-скриптИспользуйте параметр --module-bind

Технически вы можете многое сделать с помощью новых флагов, представленных в Webpack, но для простоты я предпочитаю использоватьwebpack.config.js.

конфигурационный файл

Хотя webpack рекламирует себя как платформу с нулевой конфигурацией, в основном он работает с общими настройками по умолчанию, такими как вход и выход.

Теперь мы создадим со следующимwebpack.config.js:

// webpack v4

const path = require('path');

// update from 23.12.2018
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  target: 'node', // update from 23.12.2018
  externals: [nodeExternals()], // update from 23.12.2018
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

Мы также удалим теги из скриптов npm.

"scripts": {
  "build": "webpack --mode production",
  "dev": "webpack --mode development"
},

Теперь, когда мы бежимnpm запустить сборку или сборку пряжи, он должен выводить хорошо сжатый.jsфайл в./dist/main.js. Если нет, попробуйте переустановитьbabel-loader.

2018.12.23 Обновить

если вы столкнетесьmodule '@babel/core' conflict, что означает, что некоторые из ваших предварительно загруженных зависимостей Babel несовместимы. В моем случае я сталкивался.

Module build failed: Error: Cannot find module '@babel/core'

babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

Я решил эту проблему, выполнив

yarn add @babel/core --dev

Наиболее распространенный шаблон веб-пакета — использовать его для компиляции приложений React.js. Хотя это правда, мы не будем фокусироваться на части React в этом руководстве, потому что я хочу, чтобы она не зависела от фреймворка. Вместо этого я покажу вам, как создать конфигурации .html и .css.

Импорт HTML и CSS

Давайте сначала./distСоздайте небольшую папку в папкеindex.htmlдокумент:

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div>Hello, world!</div>
    <script src="main.js"></script>
  </body>
</html>

Как видите, здесь мы импортируем style.css. Давайте настроим его! Как мы уже говорили, у нас есть только одна точка входа Webpack. Итак, куда мы поместим css? существует./srcсоздать папкуstyle.css

div {
  color: red;
}

Не забудьте включить это в свой файл .js:

import "./style.css";
console.log("hello, world");

Специальное примечание: в некоторых статьях вы узнаете, что ExtractTextPlugin не работает с webpack 4. Он работает на моем webpack v4.2, но останавливается, когда я использую webpack v4.20. Оказывается, мои настройки модуля были расплывчатыми при сборке, и если он у вас вообще не работает, вы можете переключиться на MiniCssExtractPlugin. Я покажу вам, как настроить его позже в этой статье.

Для обратной совместимости я по-прежнему покажу пример ExtractTextPlugin, но вы можете полностью опустить его и заменить частью, в которой используется MiniCssExtractPlugin.

Создайте новое правило в Webpack для вашего файла css:

// webpack v4
const path = require('path');

// update from 23.12.2018
const nodeExternals = require('webpack-node-externals');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  target: 'node', // update from 23.12.2018
  externals: [nodeExternals()], // update from 23.12.2018  
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use: ['css-loader']
          })
      }
    ]
  }
};

В терминале (консоли) запустите:

npm install extract-text-webpack-plugin --save-dev
npm install style-loader css-loader --save-dev

или

yarn add extract-text-webpack-plugin style-loader css-loader --dev

Нам нужно использовать плагин извлечения текста для компиляции.css. Как вы можете видеть, мы также.cssДобавлено новое правило. Начиная с версии 4, Webpack 4 имеет некоторые проблемы с этим плагином, поэтому вы можете столкнуться с этой ошибкой:

Чтобы исправить это, вы можете запустить

npm install -D extract-text-webpack-plugin@next

или

yarn add --dev extract-text-webpack-plugin@next

Совет для профессионалов: загуглите полученное сообщение об ошибке, попробуйте найти похожий вопрос в списке проблем Github или задайте соответствующий вопрос на сайте StackOverflow.

После этого ваш код CSS должен скомпилироваться в./dist/style.css.

На данный момент в package.json манифест зависимости разработки выглядит следующим образом:

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "style-loader": "^0.20.3",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.12"
 }

Версии могут быть разные, но это нормально!

Обратите внимание, что другая комбинация может не работать, даже такое изменение, как обновление webpack-cli v2.0.12 до 2.0.13, может привести к тому, что она не будет работать. #простовебпаквещи

Так что теперь это должно бытьstyle.cssвывод в./distпапка.

Плагин мини-CSS

Плагин Mini CSS предназначен для замены плагина Extract-Text, что обеспечивает лучшую совместимость в будущем. я используюmini-css-extract-pluginПересобрал мой файл webpack для компиляции style.css,и это отлично работает для меня.

npm install mini-css-extract-plugin --save-dev

或者是

yarn add mini-css-extract-plugin --dev

// webpack v4
const path = require('path');

// update from 23.12.2018
const nodeExternals = require('webpack-node-externals');

// const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  target: 'node', // update from 23.12.2018
  externals: [nodeExternals()], // update from 23.12.2018
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css',
    })
  ]
};

Как указал Николай Волков, style-loader, вероятно, больше не нужен, потому что использованиеMiniCssExtractPlugin.loader может делать то же самое. Хотя это может быть правдой, я все же рекомендую оставить его в качестве запасного варианта.

Как работают правила соответствия Webpack?

Краткое описание того, как обычно работают правила сопоставления:

test: /\.YOUR_FILE_EXTENSION$/,
exclude: /SOMETHING THAT IS THAT EXTENSION BUT SHOULD NOT BE PROCESSED/,
use: {
  loader: "loader for your file extension  or a group of loaders"
}

Нам нужно использовать MiniCssExtractPlugin, потому что Webpack по умолчанию может анализировать только.jsФормат. MiniCssExtractPlugin, чтобы получить.css, а затем извлеките его в./distНезависимость в каталоге.cssдокумент.

Настроить поддержку SCSS

Разработка веб-сайтов с помощью SASS и PostCSS — обычное дело, и они очень полезны. Поэтому мы сначала включаем поддержку SASS. давайте переименуем./src/style.css, а затем создайте другую папку для хранения.scssдокумент. Теперь нам нужно добавить пару.scssподдержка форматов.

npm install node-sass sass-loader --save-dev

или

yarn add node-sass sass-loader --dev

В твоем.jsВ файле./scss/main.scssзаменятьstyle.css, измените тест на поддержку.scss.

// webpack v4
const path = require('path');
// update 23.12.2018
const nodeExternals = require('webpack-node-externals');

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  target: "node", // update 23.12.2018
  externals: [nodeExternals()], // update 23.12.2018
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  } ...

HTML-шаблон

Теперь давайте создадим.htmlшаблон документа. Добавить кindex.htmlприбыть./src, сохраняя ту же самую структуру.

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div>Hello, world!</div>
    <script src="main.js"></script>
  </body>
</html>

Чтобы использовать этот файл в качестве шаблона, нам нужно будет использовать для него плагин html.

npm install html-webpack-plugin --save-dev

или

yarn add html-webpack-plugin --dev

Добавьте это в свой файл Webpack:

// webpack v4
const path = require('path');
// update 23.12.2018
const nodeExternals = require('webpack-node-externals');

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  target: "node", // update 23.12.2018
  externals: [nodeExternals()], // update 23.12.2018

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [ 
    new MiniCssExtractPlugin({
      filename: "style.css"
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    })
  ]
};

Сейчас,./src/index.htmlФайлы являются шаблонами для окончательного файла index.html. Чтобы проверить, все ли в порядке, удалите./distКаждый файл в папке и сама папка.

rm -rf ./dist
npm run dev

или

yarn dev

ты увидишь./distПапка создается самостоятельно и содержит три файла:index.html, style.css, main.js.

Кэширование и хеширование

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

Поскольку эта запись в блоге в основном посвящена настройке веб-пакета, мы не будем сосредотачиваться на том, как работает кэширование. Я просто хочу сказать, что одним из самых распространенных способов решения проблем с кешированием является добавление в файл ресурсовХэш-значение,Напримерstyle.cssа такжеscript.js.ты сможешьздесьПрочтите об этом.Хэш необходим, чтобы указать нашему браузеру запрашивать только измененные файлы.

Webpack 4 имеетchunkhashРеализован готовый функционал. Это можно сделать:

// webpack v4
const path = require('path');

// update 23.12.2018
const nodeExternals = require("webpack-node-externals");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  target: "node",
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: [
            "style-loader",
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
          ]
       }
    ]
  },
  plugins: [ 
    new MiniCssExtractPlugin({
     filename: "style.[contenthash].css"
    }),

    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    })
  ]
};

в твоем./src/index.htmlфайл добавлен

<html>
  <head>
    <link rel="stylesheet" href="<%=htmlWebpackPlugin.files.chunks.main.css %>">
  </head>
  <body>
    <div>Hello, world!</div>
    <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
  </body>
</html>

Такой синтаксис вставит файл с хеш-значением в ваш HTML-шаблон. Это новая функция, реализованная после решения следующих проблем:

Мы будем использовать HTML-шаблон, описанный вhtmlWebpackPlugin.files.chunks.main. Проверьте наши./distфайл под давлениемindex.html.

если мы не изменим наш.jsа также.cssчто-нибудь в файле, запустите

npm run dev

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

CSS Hash проблемы и решения

2018.12.28 Обновление

Эта проблема может возникнуть, если вы используете версию веб-пакета 4 ExtractTextPlugin для CSS. Если вы используете MiniCssExtractPlugin, этой проблемы не будет, но прочитать его поучительно!

Хотя мы проделали здесь некоторую работу, она не идеальна. если мы изменим.scssА как насчет кода в файле? Давай, измени там какой-нибудь scss и снова запусти скрипт dev. Новые хэши файлов теперь не генерируются. Если мы добавим новый console.log в наш.jsфайл следующим образом:

import "./style.css";
console.log("hello, world");
console.log("Hello, world 2");

Если вы снова запустите сценарий разработки, вы увидите, что хэши в обоих файлах были обновлены.

Эта проблема известна, и на StackOverflow даже есть связанный с ней вопрос:

Как исправить эту проблему сейчас?

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

Решение 1

Возможны конфликты, так чтоТеперь давайте попробуемmini-css-extract plugin.

Решение 2

существует.cssИзвлеките плагин[hash]заменять[chunkhash]. Этовышеуказанная проблемаодно из решений. Кажется, это противоречит Webpack 4.3, который представилСам вебпакиз[contenthash]Переменная. Используйте этот плагин в сочетании с:webpack-md5-hash (Смотри ниже).

Давайте проверим это сейчас.jsФайлы: Хэши обоих файлов изменились.

JS Hash проблемы и решения

Если вы уже используете MiniCssExtractPlugin, возникает противоположная проблема:Каждый раз, когда вы что-то меняете в SCSS, хэши файлов .js и .css меняются.

решение:

Используйте этот плагин:webpack-md5-hash. если правильноmain.scssфайл и запустите скрипт разработчика, вам нужно только сгенерировать новый с новым хэшемstyle.css, не оба.

// webpack v4
const path = require('path');
// update 23.12.2018
const nodeExternals = require("webpack-node-externals");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  target: "node", // update 23.12.2018
  externals: [nodeExternals()], // update 23.12.2018
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
          })
      }
    ]
  },
  plugins: [ 
    new MiniCssExtractPlugin({
      filename: "style.[contenthash].css"
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: "./src/index.html",
      filename: "index.html"
    }),
    new WebpackMd5Hash()
  ]
};

Теперь, когда я редактирую main.scss, создается новый хэш style.css. Когда я редактирую css, меняется только хэш css, а когда я редактирую ./src/script.js, меняется только хеш script.js!

Интегрировать PostCSS

для элегантного выхода.css, мы можем добавить PostCSS вверху.

PostCSSдля тебяавтопрефиксер, cssnanoи другие приятные и полезные вещи. Покажу чем пользуюсь каждый день. мы должныpostcss-loader. Мы также установим автопрефиксер, так как он понадобится нам позже.

Обновлено: 2019.2.11

Примечание автора: Последняя версия Postcss-Loader (выше V3.0.0 выше) является комбинированной, поддерживающей AutoPRefixer, поэтому нам не нужно устанавливать AutoPRefixer.

Для получения подробной информации см.:postcss-preset-env включает автопрефиксер, поэтому вам не нужно добавлять автопрефиксер отдельно, если вы уже используете предустановленную конфигурацию.

npm install postcss-loader --save-dev
npm i -D autoprefixer

或者

yarn add postcss-loader autoprefixer --dev

СПЕЦИАЛЬНОЕ ПРИМЕЧАНИЕ: Вам не нужно использовать Webpack для использования PostCSS, Webpack имеет довольно хорошийpost-css-cliПлагины, которые позволяют использовать в скриптах npm.

Создавайте там, где нужны соответствующие плагиныpostcss.config.js, вставить

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
}

нашwebpack.config.jsТеперь это должно выглядеть так:

// webpack v4
const path = require('path');
// update 23.12.2018
const nodeExternals = require("webpack-node-externals");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  target: "node",
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash()
  ]
};

Обратите внимание на порядок плагинов, которые мы используем для .scss.

use:  ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']

Загрузчик будет применять плагины сзади вперед.

Вы можете проверить, добавив больше кода в файл .scss и проверив вывод.autoprefixer. Есть еще один способ сделать это.browserslistrcВ файле указывается, какие браузеры следует поддерживать для исправления вывода.

я проведу вас кwww.postcss.parts/Изучите плагины, доступные для PostCSS, такие как:

я буду использоватьcssnanoчтобы минимизировать мой выходной файл, используйтеcss-mqpackerдля организации моего медиа-запроса. Я также получил несколько сообщений:

Если хочешь, можешь попробоватьcleancss.

контроль версий

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

Держите вашу конфигурацию в чистоте и порядке

мы можем попробовать импортироватьclean-webpack-plugin, очистить перед регенерацией файлов./distпапка.

// webpack v4
const path = require('path');
// update 23.12.2018
const nodeExternals = require("webpack-node-externals");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  target: "node",
  externals: [nodeExternals()],

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use:  [  'style-loader', 
                 MiniCssExtractPlugin.loader, 
                 'css-loader', 
                 'postcss-loader', 
                 'sass-loader']
      }
    ]
  },
  plugins: [ 
    new CleanWebpackPlugin('dist', {} ),
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash()
  ]
};

Теперь, когда наша конфигурация чистая и опрятная, мы можем продолжить!

Здесь я даю вам свой файл конфигурации и пошаговую инструкцию по его настройке. ПРИМЕЧАНИЕ. Поскольку многие зависимости npm могут измениться, когда вы читаете это, та же конфигурация может не работать для вас! Я умоляю вас оставить ошибку в комментариях ниже, чтобы я мог отредактировать ее позже. Сегодня 2018.04.05.

Последняя версия этой статьи — 2018.12.28.

с последней версией плагинаpackage.jsonимеет следующую структуру:

{
 "name": "webpack-test",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "build": "webpack --mode production",
 "dev": "webpack --mode development"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "@babel/core": "^7.2.2",
   "autoprefixer": "^9.4.3",
   "babel-core": "^6.26.3",
   "babel-loader": "^8.0.4",
   "babel-preset-env": "^1.7.0",
   "css-loader": "^2.0.2",
   "html-webpack-plugin": "^3.2.0",
   "mini-css-extract-plugin": "^0.5.0",
   "node-sass": "^4.11.0",
   "postcss-loader": "^3.0.0",
   "sass-loader": "^7.1.0",
   "style-loader": "^0.23.1",
   "webpack": "4.28",
   "webpack-cli": "^3.1.2"
},

 "dependencies": {
   "clean-webpack-plugin": "^1.0.0",
   "webpack-md5-hash": "^0.0.6",
   "webpack-node-externals": "^1.7.2"
 }
}

Прочтите следующий раздел о настройке среды разработки с помощью React здесь:Как использовать Webpack 4 для повышения эффективности разработки React.js

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории