В предыдущем блоге мы обсудили концепции установки и загрузчиков веб-пакетов.
В этом блоге мы будем обсуждать:
- Очистка кеша и плагины
- Разделение разработки и производства
Очистка кеша и плагины:
Очистка кеша - это то, как мы можем предотвратить определенные ресурсы, такие как основной пакет js или пакет css, после того, как мы создадим отдельный пакет CSS.
Всякий раз, когда мы вносим какие-либо изменения в код, он должен генерировать новый хеш, иначе хеш должен быть одинаковым каждый раз, даже при обновлении страницы. Таким образом, это означает, что URL-адрес кэшируется, если в коде не будет изменений.
webpack.config.js:
const path = require("path")
module.exports = { entry: "./src/index.js", output: { // the first thing we can configure is file name filename: "vendor.[contentHash].js", // contentHash Will generate hash // where to do , where to actually split the code // Import path from module which comes with node called path // path.resolve(__dirname,..) : It mainly resolve absolute path to the New_folder_name directory. Wherever the current directory is. e.x. in my lappy: /Users/Projects/ Work/webpack-work // "dist" name of the folder where we want to code be going path: path.resolve(__dirname, "New_folder_name") } } } }
В моем предыдущем блоге (webpack: часть 1) нас сохранили dist/main.js
в файле index.html.
Но когда мы генерируем файл через хеш, нам не нужно включать скрипт в index.html. Это можно сделать с помощью плагинов.
Плагины:
Плагины используются для настройки процесса сборки веб-пакетов различными способами.
Мы поговорим о HTMLWebpackPlugin:
HtmlWebpackPlugin упрощает создание файлов HTML для обслуживания пакетов веб-пакетов. Это особенно полезно для пакетов веб-пакетов, которые включают в себя хэш в имени файла, который изменяет каждую компиляцию. Вы можете позволить плагину сгенерировать для вас HTML-файл, предоставить свой собственный шаблон, используя шаблоны lodash, или использовать свой собственный загрузчик.
Установите HTMLWebpackPlugin.
$ npm install —save-dev html-webpack-plugin
webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
// then we can add plugins in module: plugins: [new HtmlWebpackPlugin()],
Теперь при выполнении npm start, который создаст index.html внутри папки dist, куда будет включен скрипт. автоматически.
Но на странице не будет контента. Как и раньше, мы брали еще один index.html, а теперь его файл dist / index.html, в который был добавлен только скрипт, а не HTML-контент.
Создайте новый html-файл в папке src как main.html.
И скопируйте код предыдущего файла index.html в main.html. Тег удаления скрипта был ранее взят из веб-пакета.
Удалять:
<script src="/dist/main.js" ></script>
Теперь нам нужно указать плагину использовать созданный нами шаблон. (main.html)
webpack.config.js:
const path = require("path") const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { mode : "development" entry: "./src/index.js", output: { filename: "hello.js", path.resolve(__dirname, "New_folder_name") } } }, plugins: [ new HtmlWebpackPlugin({ template: "./src/main.html" }) ], module: { rules: [ { // files which ends with .css use the below loader test: /\.scss$/, use: [ "style-loader", // 3rd. style loader inject styles into DOM "css-loader", // 2nd. CSS loader turns css into common JS "sass-loader" //1st. SASS loader which turns sass into CSS } ] } }
Теперь выполните npm start, мы увидим dist / index.html, где будет шаблон из main.html.
Разделение DEV и производства:
Мы можем создать два файла в корневом каталоге: webpack.dev.js и webpack.prod.js
И скопируйте код webpack.config.js в оба файла.
Теперь я создам один общий файл конфигурации для веб-пакета, который называется webpack.config.js.
Позже нам нужно объединить webpack.dev.js с webpack.config.js и webpack.prod.js с webpack.config.js
Для слияния файла установите плагин под названием webpack-merge.
$ npm install - save-dev webpack-merge
webpack.dev.js:
const path = require("path") const common = require('./webpack-config'); const merge = require('webpack-merge');
module.exports = merge(common ,{ mode : "development" output: { filename: "hello.js", path.resolve(__dirname, "New_folder_name") } } } })
webpack.prod.js:
const path = require("path") const common = require('./webpack-config'); const merge = require('webpack-merge');
module.exports = merge(common, { mode : "production" output: { filename: "hello.[contentHash].js", path.resolve(__dirname, "New_folder_name") } } } })
webpack.config.js:
const path = require("path") const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { entry: "./src/index.js", plugins: [ new HtmlWebpackPlugin({ template: "./src/main.html" }) ], module: { rules: [ { // files which ends with .css use the below loader test: /\.scss$/, use: [ "style-loader", // 3rd. style loader inject styles into DOM "css-loader", // 2nd. CSS loader turns css into common JS "sass-loader" //1st. SASS loader which turns sass into CSS ] }} }
Теперь мы можем изменить package.json в соответствии с dev и prod:
package.json:
"scripts":
{
"start" : "webpack --config webpack.dev.js",
"prod" : "webpack --config webpack.prod.js"
}
Проверьте команду, запустив npm start для dev и npm run prod для производства.
В настоящее время, когда мы вносим изменения каждый раз, нам нужно запускать npm start для сборки dev. Мы можем исправить это, установив сервер webpack dev.
Установите webpack-dev-server:
$ npm install - save-dev webpack-dev-server
В package.json:
"scripts":
{
"start" : "webpack-dev-server --config webpack.dev.js",
"prod" : "webpack --config webpack.prod.js"
}
- open откроет нам браузер в окне. Работает как живой сервер. Вы можете изменить код, и сервер веб-пакетов автоматически перестроит и обновит браузер для нас.
Надеюсь, этот блог был вам полезен. Если у вас возникнут вопросы, напишите мне на @suprabhasupi 😋
🌟 Twitter | 👩🏻💻 suprabha.me