Многостраничный Webpack реализует общую начальную и конечную части и отдельную производственную среду.

внешний интерфейс JavaScript HTML Webpack

В ежедневной разработке мы часто сталкиваемся с подобными головными и конечными частями, и несколько страниц имеют одинаковую структуру HTML.Если каждая страница будет добавлена ​​с одним и тем же кодом, файл будет раздут, а последующие затраты на обслуживание также будут снижены. очень большой. Таким образом, мы можем извлечь эти общие HTML-коды в виде похожих компонентов, которые можно напрямую вводить на страницу.

Гульп достичь общего HTML

обратитесь сюдаНе рекомендуется, так как живая компиляция невозможна.

Используйте шаблон ejs Webpack для совместного использования HTML:

Структура проекта:

Просмотр онлайнGitHub.c zero.can/webpack ком…

Исходный код GitHub, приветственная звезда

Установить

npm install ejs-loader 
npm install ejs-render-loader
npm install ejs-html-loader

Добавьте в загрузчик webpack.config.js

{
	test: /\.ejs$/,
	loader: 'ejs-html-loader',			     
},

Измените суффикс .html на .ejs

Затем укажите шаблон в HTMLWebpackPlugin как

template: 'ejs-render-loader!index.ejs',

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

common/header.html

<header class="header_tab inlink-flex">
	<a href="index.html"><div class="tabItem tabIndex">首页</div></a>
	<a href="second.html"><div class="tabItem tabSecond">第二页</div></a>
	<a href="three.html"><div class="tabItem tabThree">第三页</div></a>
</header>

common/footer.html

<footer>
	这是共用的尾部代码
</footer>

Представьте начало и конец общедоступной страницы в .ejs.

index.ejs

<% include common/header.html %>
<div>这是首页</div>
<% include common/footer.html %>

second.js

<% include common/header.html %>
	<div>这是第二页</div>
<% include common/footer.html %>

Это общие проблемы html могут быть достигнуты.

  • Но бывает ситуация, когда код отладки NPM Run DEV возникает, когда путь IMG, указанный в файле ejs, может быть найден.

Решение состоит в том, чтобы добавить CopyWebpackPlugin в webpack.config.js и скопировать папку img в производственную среду.

Добавьте плагины в webpack.config.js

var CopyWebpackPlugin = require('copy-webpack-plugin');

плагины в module.exports:

new CopyWebpackPlugin([{
     from: 'runtime/images/*'
}])

Разделение среды разработки и производственной среды

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

Например, в среде разработки мы можем использовать его.

babel,ExtractTextPlugin,UglifyJSPlugin,postcss等

Некоторое использование погрузчика и плагинов, поскольку это может ускорить нашу скорость компиляции, уменьшить время ожидания и повысить эффективность развития.

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

##метод:

в файле package.json

"scripts": {
    "build": "webpack --optimize-minimize",
    "dev": "webpack-dev-server --config webpack.dev.config.js --open",
    "start": "npm run dev"
  },

В объявлении скрипта укажите, что dev запускает webpack

npm run dev

执行webpack.dev.config.js配置

при исполнении

 npm run build
 
 执行webpack.config.js配置
Категории