содержание
1 небольшой тестовый нож
1.1 Создание и инициализация проекта
1.2 Создание каталогов и файлов
1.3 Изменить package.json
1.4 Напишите код проекта
1.5 Настройка webpack.config.js
1.6 Тестовая упаковка
2 Создайте инфраструктуру
2.1 Реализовать автоматическую очистку каталога dist перед каждой компиляцией
2.2 Реализовать автоматическую генерацию окончательного html из шаблона html
2.3 Создание проекта
3 Создайте сервер теплового мониторинга для среды разработки
3.1 Установите webpack-dev-сервер
3.2 Использование исходной карты для отслеживания ошибок исходного кода
4 Отдельные файлы конфигурации для рабочей среды и среды разработки
5 Интегрируйте общедоступные библиотеки JS (например, jQuery)
5.1 Установите и интегрируйте jQuery
5.2 Глобальное применение jQuery
5.3 Использование jQuery
5.4 Пакет jQuery отдельно
6 Совместимость с методом обработки IE8
6.1 Исправление ошибки IE8 «отсутствует идентификатор»
6.2 Преобразование ES6 в ES5
6.3 Устранение ошибки IE8 «объект не поддерживает метод атрибута привязки»
7 Использование CSS и Stylus
7.1 Загрузка CSS и стилуса
7.2 Разделение стилей на файлы css
7.3 Оптимизация и разделение общих стилей CSS
8 Используйте ejs для модуляции html
9 Загрузите ресурсы изображения
9.1 css загрузка изображения
9.2 HTML-загрузка изображения
9.3 Решить проблему несоответствия путей эталонных изображений в css и html
10 Загрузить значок шрифта
11 Используйте cnpm для ускорения загрузки
1 небольшой тестовый нож
1.1 Создание и инициализация проекта
Найдите понравившийся каталог и выполните следующую команду:
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
1.2 Создание каталогов и файлов
※Примечание: «+» в начале каждой строки в области кода этой статьи означает добавление, «- или D» означает удаление, «M» означает изменение, а «...» означает исключение.
dist — это окончательный скомпилированный код рабочей среды, а src — код среды разработки.
/- webpack-demo
|- package.json
+ |- /dist
+ |- index.html
+ |- /src
+ |- index.js
1.3 Изменить package.json
Отрегулируйте файл package.json, чтобы убедиться, что наш пакет является частным и удалить основную запись. Это предотвращает случайное освобождение вашего кода.
В то же время добавьте команду скрипта, чтобы выполнение npx webpack было эквивалентно выполнению npm run build.
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "main": "index.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack --mode production",
+ "dev": "webpack --mode development"
},
...
1.4 Напишите код проекта
Напишите dist/index.html, обратите внимание на введение bundle.js (bundle.js будет автоматически сгенерирован при упаковке)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Demo</title>
<script src="bundle.js"></script>
</head>
<body>
</body>
</html>
Пишите src/index.js, что хотите.
document.write('hello world');
1.5 Настройка webpack.config.js
Создайте webpack.config.js в корневом каталоге проекта, чтобы настроить webpack.
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
+ |- webpack.config.js
Напишите webpack.config.js:
const path = require('path');
module.exports = {
// 入口js路径
entry: './src/index.js',
// 编译输出的js及路径
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
1.6 Тестовая упаковка
Выполните npm run build, сгенерированный dist выглядит следующим образом:
|- /dist
|- index.html
+ |- bundle.js
Браузер запускает index.html и отображает «hello world».
Вышеупомянутый самый примитивный способ, требующий настройки html в dist, что не является научным. Чего нам нужно добиться, так это разработать в src, а затем сгенерировать их все в dist. Пожалуйста, перейдите к следующей главе.
2 Создайте инфраструктуру
2.1 Реализовать автоматическую очистку каталога dist перед каждой компиляцией
Установите clean-webpack-plugin, см. 2.3 для установки кода
npm install clean-webpack-plugin --save-dev
2.2 Реализовать автоматическую генерацию окончательного html из шаблона html
Установите html-webpack-plugin, см. 2.3 для установки кода
npm install html-webpack-plugin --save-dev
2.3 Создание проекта
Каталог сборки выглядит следующим образом
|- package.json
|- webpack.config.js
|- /dist
|- /src
|- /html
|- index.html
|- login.html
|- /js
|- index.js
|- login.js
Переписать webpack.config.js
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口js路径
entry: {
index: './src/js/index.js',
login: './src/js/login.js'
},
plugins: [
// 自动清空dist目录
new CleanWebpackPlugin(),
// 设置html模板生成路径
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/html/index.html',
chunks: ['index']
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: './src/html/login.html',
chunks: ['login']
}),
],
// 编译输出配置
output: {
// js生成到dist/js，[name]表示保留原js文件名
filename: 'js/[name].js',
// 输出路径为dist
path: path.resolve(__dirname, 'dist')
}
};
Теперь выполните npm run build, чтобы сгенерировать dist следующим образом:
|- /dist
|- index.html
|- login.html
|- /js
|- index.js
|- login.js
Проверьте html-код и обнаружите, что соответствующий js был введен.
3 Создайте сервер теплового мониторинга для среды разработки
Теперь мы создаем сервер на основе nodejs, запускаем код в среде разработки и реализуем автоматическое горячее обновление страницы без обновления кода при изменении кода.
3.1 Установите webpack-dev-сервер
Автоматически обнаруживайте изменения кода и обновляйте браузер в режиме реального времени.
npm install webpack-dev-server --save-dev
Измените package.json:
"scripts": {
"build": "webpack --mode production",
- "dev": "webpack --mode development"
+ "serve": "webpack-dev-server --open --mode development"
},
Измените webpack.config.js:
module.exports = {
entry: {...},
+ // 动态监测并实时更新页面
+ devServer: {
+ contentBase: './dist',
+ // 默认8080，可不写
+ port: 8080,
+ // 热更新，无需刷新
+ hot: true
+ },
plugins: [...],
...
};
Выполните npm run serve, веб-служба nodejs будет запущена локально, и браузер автоматически откроет http://localhost:8080/.
Доступ к странице входа можно получить через http://localhost:8080/login.html.
В это время измените файл js или html в src, и страница будет автоматически обновлена.
3.2 Использование исходной карты для отслеживания ошибок исходного кода
В сгенерированном при компиляции каталоге dist повторно обфусцирован js-код, при возникновении ошибки ошибка не может быть корректно локализована в соответствующую позицию исходного кода, что делает неудобным отладку кода сгенерированного окружения. Если вам нужно точно отладить код рабочей среды, вы можете использовать для этого исходную карту. (Если вам не нужна эта функция, вы можете пропустить этот раздел)
Измените webpack.config.js:
inline-source-map: преобразовать исходную карту в DataUrl и добавить ее в js страницы, сгенерированный файл js большой (не рекомендуется)
исходная карта: сгенерируйте соответствующий файл карты, js небольшой, но требуется настройка сервера, чтобы запретить доступ к файлу карты (рекомендуется)
module.exports = {
...
devServer: {...},
+ // 方便追踪源代码错误
+ devtool: 'source-map',
plugins: [...],
..
};
4 Отдельные файлы конфигурации для рабочей среды и среды разработки
webpack.config.js содержит конфигурацию производственной среды и среды разработки.После разделения это способствует сопровождению кода.
Установите плагин webpack-merge
Используйте webpack-merge для разделения.
npm install webpack-merge --save-dev
Разделить webpack.config.js
Создайте следующие 3 файла: webpack.common.js (общая конфигурация) webpack.dev.js (конфигурация среды разработки) webpack.prod.js (конфигурация производственной среды) После разделения кода webpack.config.js вы можете удалить webpack.config.js.
|- package.json
- |- webpack.config.js
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js
|- /dist
|- /src
webpack.common.js хранит код для общей конфигурации
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {...},
plugins: [...],
output: {...}
};
webpack.dev.js хранит код, настроенный средой разработки
const merge = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
// 动态监测并实时更新页面
devServer: {
contentBase: './dist',
// 默认端口8080，可不填
port: 8080,
// 热更新，无需刷新
hot: true
}
});
webpack.prod.js сохраняет код, настроенный для производственной среды.
const merge = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
// 方便追踪源代码错误
//（如果不需要3.2小节的追踪功能，可以注释掉下行代码）
devtool: 'source-map'
});
Измените package.json:
"scripts": {
M "build": "webpack --config webpack.prod.js --mode production",
M "serve": "webpack-dev-server --open --config webpack.dev.js --mode development"
},
5 Интегрируйте общедоступные библиотеки JS (например, jQuery)
В этом разделе jQuery используется в качестве примера для объяснения того, как внедрять общедоступные библиотеки JS. При использовании AngularJS, React или Vue рекомендуется использовать официальный инструмент командной строки.
5.1 Установите и интегрируйте jQuery
Установите JQuery:
npm install jquery --save
5.2 Глобальное применение jQuery
jQuery требуется для каждой страницы. Импортировать на каждой странице слишком громоздко. Измените webpack.common.js для глобальной конфигурации:
...
+ const webpack = require('webpack');
module.exports = {
...
plugins: [
+ new webpack.ProvidePlugin({
+ $: 'jquery',
+ jQuery: 'jquery'
+ }),
new CleanWebpackPlugin(),
...
5.3 Использование jQuery
Измените src/html/index.html и добавьте div для тестирования:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Demo</title>
</head>
<body>
<div id="app">
<div id="info"></div>
</div>
</body>
</html>
Измените src/js/index.js:
$('#info').text('jQuery正常使用');
Выполните npm run build для создания dist следующим образом:
|- /dist
|- index.html
|- login.html
|- /js
|- index.js <--jQuery代码已集成到这里
|- login.js
В login.js нет кода jQuery, потому что jQuery в настоящее время не используется в login.js, а механизм упаковки webpack «действительно используется» до того, как он будет фактически упакован.
Если в нашем проекте много html статических страниц, каждая js интегрирована с jQuery, а код jQuery принципиально не меняется, что приведет к избыточным js файлам, мы можем упаковать jQuery отдельно, что может облегчить кеширование браузера и уменьшить размер js запросов.
5.4 Пакет jQuery отдельно
Используйте splitChunks webpack для создания отдельной упаковки.
Измените webpack.common.js:
plugins: [
...
// 设置html模板生成路径
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/html/index.html',
M chunks: ['jquery', 'index']
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: './src/html/login.html',
M chunks: ['jquery', 'login']
}),
],
+ optimization: {
+ splitChunks: {
+ cacheGroups: {
+ commons: {
+ test: /jquery/,
+ name: 'jquery',
+ chunks: 'all'
+ }
+ }
+ }
+ },
// 编译输出配置
output: {...}
Выполните npm run build, страница запустится нормально, и сгенерированный dist будет выглядеть следующим образом:
|- /dist
|- index.html
|- login.html
|- /js
|- index.js
|- login.js
+ |- jquery.js <--jQuery已独立出来
6 Совместимость с методом обработки IE8
Если вы хотите быть совместимым с браузерами более ранних версий, такими как IE8, использование ES6 и другого синтаксиса js более высоких версий в процессе разработки приведет к сбою запуска браузера более ранней версии. Кроме того, jQuery может использовать только 1.x для установки более ранней версии jQuery. (Если вам не нужна совместимость с IE8, пропустите эту главу напрямую)
Сначала установите jQuery, совместимый с IE6~8.
npm install jquery-1x --save
Измените webpack.common.js:
...
plugins: [
new webpack.ProvidePlugin({
M $: 'jquery-1x',
M jQuery: 'jquery-1x'
}),
...
6.1 Исправление ошибки IE8 «отсутствует идентификатор»
Для кода, который сейчас создан, IE8 сообщит об ошибке «отсутствует идентификатор» в коде e.default. Необходимо установить uglifyjs-webpack-plugin.
npm install uglifyjs-webpack-plugin --save-dev
Изменить webpack.common.js
...
+ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
...
optimization: {
splitChunks: { ... },
+ minimizer: [
+ new UglifyJsPlugin({
+ uglifyOptions: {
+ ie8: true
+ }
+ })
+ ]
},
6.2 Преобразование ES6 в ES5
Если вы используете синтаксис ES6, например стрелочные функции, сборка завершится с ошибкой. Чтобы преобразовать ES6 в ES5, вам необходимо установить следующие плагины (подробнее): вавилон-погрузчик @бабель/ядро @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-transform-modules-commonjs @babel/время выполнения
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install @babel/plugin-transform-runtime @babel/plugin-transform-modules-commonjs --save-dev
npm install @babel/runtime --save
Измените webpack.common.js, функция этого кода заключается в преобразовании ES6 в файле js в ES5 во время компиляции:
optimization: {...},
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ exclude: /(node_modules|bower_components)/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-env'],
+ plugins: [
+ '@babel/plugin-transform-runtime',
+ '@babel/plugin-transform-modules-commonjs'
+ ]
+ }
+ }
+ }
+ ]
+ },
// 编译输出配置
output: {...}
Теперь выполняем npm run build, компиляция пройдена. Но IE8 сообщает об ошибке «Объект не поддерживает метод атрибута привязки», это связано с тем, что IE8 не поддерживает ES5, и необходимо ввести es5-shim и es5-sham (см. следующий раздел).
6.3 Устранение ошибки IE8 «объект не поддерживает метод атрибута привязки»
Я перепробовал много методов в Интернете, но ни один из них не увенчался успехом, в конце концов, я просто использовал метод прямой ссылки для ее решения.
Скачать плагин
Сначала зайдите на официальный сайтGitHub.com/starvation-smith/голодание…
Скачать es5-shim.min.js и es5-sham.min.js
Создайте статический каталог в src для хранения статических ресурсов. С помощью CopyWebpackPlugin статические ресурсы не упаковываются, а копируются непосредственно в каталог dist.
|- /src
|- /css
(略)
|- /html
|- index.html
|- login.html
|- /js
(略)
|- /static
|- /js
|- es5-shim.min.js
|- es5-sham.min.js
Затем напрямую импортируйте в src/html/index.html и src/html/login.html.
<head>
<meta charset="UTF-8">
<title>>Webpack Demo</title>
+ <script type="text/javascript" src="static/js/es5-shim.min.js"></script>
</head>
es5-sham.min.js можно импортировать позже, когда он будет использоваться.
Установите плагин copy-webpack-plugin
npm install --save-dev copy-webpack-plugin
Измените webpack.common.js, функция кода состоит в том, чтобы скопировать src/static непосредственно в dist и переименовать его в static.
...
+ const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
...
plugins: [
...
new HtmlWebpackPlugin({
filename: 'login.html',
template: './src/html/login.html',
chunks: ['jquery', 'login']
}),
+ new CopyWebpackPlugin([
+ { from: './src/static', to: 'static' }
+ ])
Выполните сборку npm run, она может успешно работать в IE8.
7 Использование CSS и Stylus
7.1 Загрузка CSS и стилуса
В этом разделе в качестве примера используется Stylus.Если вы используете Sass/Less, вы можете обратиться к этому методу. Смешивание CSS — это умение одновременно использовать CSS.
Установите связанные зависимости:
npm install style-loader css-loader --save-dev
npm install stylus-loader stylus --save-dev
Теперь каталог src выглядит следующим образом:
|- /src
+ |- /css
+ |- /common
+ |- common.css
+ |- frame.css （这个文件@import common.css和reset.css）
+ |- reset.css
+ |- /pages
+ |- index.styl
+ |- login.styl
|- /html
|- index.html
|- login.html
|- /js
（略）
Код стиля в css и style, пожалуйста, добавьте сами, здесь он отображаться не будет.
Добавьте стили в index.js:
import '../css/common/frame.css';
import '../css/pages/index.styl';
Добавьте стили в login.js:
import '../css/common/frame.css';
import '../css/pages/login.styl';
Измените webpack.common.js:
module.exports = {
...
optimization: { ... }
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ },
+ {
+ test: /\.styl$/,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ 'stylus-loader'
+ ]
+ }
+ ]
+ },
...
После выполнения сборки код стиля будет упакован и вставлен непосредственно в html-файл.
7.2 Разделение стилей на файлы css
Теперь мы хотим импортировать стили по ссылке.
Сначала установите MiniCssExtractPlugin
npm install mini-css-extract-plugin --save-dev
Затем измените webpack.common.js
···
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
...
+ new MiniCssExtractPlugin({
+ filename: 'css/[name].css'
+ }),
new CopyWebpackPlugin([
{ from: './src/static', to: 'static' }
])
],
module: {
rules: [
{
test: /\.css$/,
use: [
+ // 将原来的style-loader替换
M MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.styl$/,
use: [
+ // 将原来的style-loader替换
M MiniCssExtractPlugin.loader,
'css-loader',
'stylus-loader'
]
}
···
Выполните npm run build, сгенерированный dist выглядит следующим образом:
|- /dist
|- index.html
|- login.html
+ |- /css
+ |- index.css
+ |- login.css
|- /js
（略）
И index.css, и login.css содержат общие стили и могут быть дополнительно оптимизированы для разделения общих стилей.
7.3 Оптимизация и разделение общих стилей CSS
Измените webpack.common.js, используйте обычный пакет и ссылку на css в src/css/common/ отдельно.
...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/html/index.html',
M chunks: ['style', 'jquery', 'index']
}),
new HtmlWebpackPlugin({
filename: 'login.html',
template: './src/html/login.html',
M chunks: ['style', 'jquery', 'login']
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
],
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /jquery/,
name: 'jquery',
chunks: 'all'
},
+ styles: {
+ test: /[\\/]common[\\/].+\.css$/,
+ name: 'style',
+ chunks: 'all',
+ enforce: true
+ }
}
}
},
Выполните npm run build, сгенерированный dist выглядит следующим образом:
|- /dist
|- index.html
|- login.html
+ |- /css
+ |- index.css
+ |- login.css
|- style.css <-- 公用css
|- /js
|- index.js
|- login.js
|- jquery.js
|- style.js <-- 怎么会有这个？
Обнаружено, что в каталоге dist/js/ будет сгенерирован дополнительный style.js, и html также будет ссылаться на этот дополнительный js. Это баг webpack4.Не решается с 2016 года и находится в открытом состоянии.Пробовали сторонние плагины,но пока не решилась.Надеюсь в webpack5 решится.
Видеть:GitHub.com/Webpack/Веб…
Сторонние подключаемые модули, задействованные в онлайн-решении:
disable-output-webpack-plugin
html-webpack-exclude-assets-plugin
remove-source-webpack-plugin
Вышеуказанные плагины давно не обновлялись, и их нельзя использовать в последней версии webpack 4.35.0.
8 Используйте ejs для модуляции html
Если у каждой страницы есть заголовок, вы можете извлечь заголовок в html-модуль, а затем импортировать его на нужную страницу. Это достигается с помощью ejs. ejs — это, по сути, html, но с большим количеством шаблонов.
Установить ejs-загрузчик
npm install ejs-loader --save-dev
Возьмите index.html в качестве примера, переименуйте index.html в index.ejs.
Измените webpack.common.js для поддержки ejs:
plugins: [
...
new HtmlWebpackPlugin({
filename: 'index.html',
+ // 这里将html改成ejs
M template: './src/html/index.ejs',
chunks: ['style', 'jquery', 'index']
}),
...
module: {
rules: [
...
+ {
+ test: /\.ejs/,
+ use: ['ejs-loader'],
+ }
...
Создайте src/html/components/header/header.ejs
<div id="header" class="G-header">这是公用头部</div>
Его можно импортировать в src/html/index.ejs.
...
<div id="app">
+ <%= require('./components/header/header.ejs')() %>
<div id="info"></div>
</div>
...
9 Загрузите ресурсы изображения
В этой главе описывается, как ссылаться на изображения в css и html.
Установите плагины file-loader и url-loader, url-loader основан на file-loader, поэтому оба должны быть установлены. (Вы также можете использовать только загрузчик файлов, url-loader имеет расширенные функции на основе загрузчика файлов, например, сколько изображений КБ можно установить для транскодирования base64 и т. д.).
npm install file-loader url-loader --save-dev
9.1 css загрузка изображения
Изменить webpack.common.js
module: {
rules: [
...
+ {
+ test: /\.(png|svg|jpg|gif|webp)$/,
+ use: [
+ {
+ loader: 'url-loader',
+ options: {
+ // 最终生成的css代码中,图片url前缀
+ publicPath: '../images',
+ // 图片输出的实际路径(相对于dist)
+ outputPath: 'images',
+ // 当小于某KB时转为base64
+ limit: 0
+ }
+ }
+ ]
+ }
...
]
},
Добавьте изображение 1.jpg в src/images
|- /src
|- /css
(略)
|- /html
(略)
+ |- /images
+ |- 1.jpg
|- /js
(略)
|- /static
(略)
Добавьте код в src/css/pages/index.styl:
.bg-pic
width: 200px
height: 200px
background: url(../../images/1.jpg) no-repeat
Добавьте код в src/html/index.ejs:
<div id="app">
<%= require('./components/header/header.ejs')() %>
<div id="info"></div>
+ <div class="bg-pic"></div>
</div>
Выполните сборку npm run, изображения будут доступны в обычном режиме, а сгенерированный каталог dist выглядит следующим образом:
|- /dist
|- /css
(略)
|- /images
+ |- f0a89ff457b237711f8306a000204128.jpg
|- /js
(略)
|- /static
(略)
|- index.html
|- login.html
9.2 HTML-загрузка изображения
Способ загрузки картинок в html это загрузка картинок с img, вам нужно извлечь адрес картинки в html, вам нужно установить плагин html-loader
npm install html-loader --save-dev
Добавьте изображение 2.jpg в src/images
|- /src
|- /css
(略)
|- /html
(略)
|- /images
|- 1.jpg
+ |- 2.jpg
|- /js
(略)
|- /static
(略)
Измените webpack.common.js, чтобы можно было извлекать и упаковывать изображения в формате html.
module: {
rules: [
...
+ {
+ test: /\.(html)$/,
+ use: {
+ loader: 'html-loader',
+ options: {
+ attrs: ['img:src', 'img:data-src', 'audio:src'],
+ minimize: true
+ }
+ }
+ }
...
Добавьте код в src/html/index.ejs:
<div id="app">
<%= require('./components/header/header.ejs')() %>
<div id="info"></div>
<div class="bg-pic"></div>
+ <img src="${require('../images/2.jpg')}" alt="">
</div>
Выполните npm run build, изображения будут доступны в обычном режиме, а сгенерированный каталог dist выглядит следующим образом.
|- /dist
|- /css
(略)
|- /images
|- f0a89ff457b237711f8306a000204128.jpg
+ |- dab63db25d48455007edc5d81c476076.jpg
|- /js
(略)
|- /static
(略)
|- index.html
|- login.html
Но я обнаружил, что изображение img в html не может отображаться. Глядя на сгенерированный код находит:
расстояние/index.htmlИсточник: ../images/xxxx.jpg
URL-адрес фона в dist/css/index.css также ../images/xxxx.jpg
Поскольку пути html и css отличаются на один уровень, пути несовместимы. Поэтому необходимо различать пути изображений в html и css.
9.3 Решить проблему несоответствия путей эталонных изображений в css и html
Измените webpack.common.js и замените MiniCssExtractPlugin.loader на объектный метод:
module: {
rules: [
...
{
test: /\.css$/,
use: [
M {
M loader: MiniCssExtractPlugin.loader,
M options: {
M // css中的图片路径增加前缀
M publicPath: '../'
M }
M },
'css-loader'
]
},
{
test: /\.styl$/,
use: [
M {
M loader: MiniCssExtractPlugin.loader,
M options: {
M // css中的图片路径增加前缀
M publicPath: '../'
M }
M },
'css-loader',
'stylus-loader'
]
},
...
{
test: /\.(png|svg|jpg|gif|webp)$/,
use: [
{
loader: 'url-loader',
options: {
D // 最终生成的图片路径代码 (删除)
D // publicPath: '../images', (删除)
// 图片输出的实际路径
outputPath: 'images',
// 当小于某KB时转为base64
limit: 0
}
}
]
},
...
Затем выполните сборку npm run, путь отображается нормально.
10 Загрузить значок шрифта
С веб-сайта значков Alibabawww.iconfont.cn/Загрузите файлы шрифтов и стилей и импортируйте их в проект.Структура выглядит следующим образом:
|- /src
|- /css
|- /common
|- common.css
|- frame.css
+ |- iconfont.css
|- reset.css
|- /pages
|- index.styl
|- login.styl
+ |- /fonts
+ |- iconfont.eot
+ |- iconfont.svg
+ |- iconfont.ttf
+ |- iconfont.woff
+ |- iconfont.woff2
|- /html
(略)
|- /images
(略)
|- /js
(略)
|- /static
(略)
В src/css/common/frame.css вам нужно @import "iconfont.css", а затем изменить путь каждого шрифта в iconfont.css.
Используйте шрифт непосредственно в src/html/index.ejs (стиль шрифта определяется на веб-сайте iconfont):
<i class="G-iconfont G-ficon-cart"></i>
Измените webpack.common.js,
module: {
rules: [
...
+ {
+ test: /\.(woff|woff2|eot|ttf|svg)$/,
+ use: {
+ loader: 'file-loader',
+ options: {
+ // 保留原文件名和后缀名
+ name: '[name].[ext]',
+ // 输出到dist/fonts/目录
+ outputPath: 'fonts',
+ }
+ }
+ }
]
},
Выполните npm run build для создания каталога dist следующим образом:
|- /dist
|- /css
(略)
|- /images
(略)
+ |- /fonts
|- iconfont.eot
|- iconfont.svg
|- iconfont.ttf
|- iconfont.woff
|- /js
(略)
|- /static
(略)
|- index.html
|- login.html
Файл woff2 не создается, потому что в css нет ссылки.
11 Используйте cnpm для ускорения загрузки
Иногда скорость загрузки npm очень низкая, вы можете установить cnpm, скачать его с домашнего зеркала Taobao и выполнить следующую команду:
npm install -g cnpm --registry=https://registry.npm.taobao.org
В будущем npm будет напрямую заменен на cnpm.
Выше приведено техническое описание создания стандартных интерфейсных проектов на основе webpack4.x.
Добро пожаловать в мой личный общедоступный аккаунт WeChat, чтобы получать последние статьи в любое время ^_^