Перед тем как знать WebPack очень сильным, но не было изучена в глубине, этот учебник рассматривается с самого начала, начиная с 0, а затем установить строительный лес для разработки многопользовательских порталов, с которыми сталкиваются многие проблем во время так решил рассортировать надежду дают нам некоторую помощь.
Multi-сайт с использованием HTML необходимости WebPack
Если мы получим такую миссию, разработать простой официальный сайт, например, только десяток HTML-страницу. Проект очень прост, мы не должны использовать любой большой кадр, но если вы просто написать несколько традиционных HTML, JS и CSS, обязательно сталкиваться с этими проблемами:
- Навигация по сайту и в нижней части каждой страницы баннера является обычным явлением, как повторное использование? Если вы больше не использовать, то время будет меняться с изменением п страниц, было бы слишком глупо
- Как заставить пользователя очистить кэш-память после изменения? Мы не можем требовать от пользователей, чтобы вручную очистить кэш браузера, так что глупо
- Я хочу использовать ES6 развитие расслоения плотного, и как решить проблемы совместимости браузера?
- Я хочу использовать были разработаны меньше стилей CSS, как конвертировать?
Как можно видеть, не существует автоматизированных средств расфасованных не присоединиться, мы очень трудно решить эти проблемы, поэтому использование WebPack императива.
Для достижения поставленной цели
Смотрите здесь, некоторые студенты могут беспокоиться, не фигня, я чувствую себя добраться до бара, не надо! Давайте ставить цели! Что бы вы ни делали, они должны ставить перед собой цели, а не там, где оператор где сохнуть, так что не будет большой подъем, он должен преодолеть множество проблем на пути к цели, у нас есть прогресс, делая это Перед подмостей, я надеюсь, что это
- HTML файлы могут быть упакованы во множество файлов и JS, т.е. поддерживает множественный вход
- Имя файла должен быть поставлен на хэш-значений, вопросы кэширования Решимость
- Уметь использовать повторно сайт главы навигационной панели и нижнего баннера
- Письменное укладка за счет использования менее
- Для поддержки ES6 развития
- Для того, чтобы облегчить их использовать, чтобы увеличить страницы не нужно вручную изменить настройки WebPack вход, в надежде автоматической настройки на основе каталога файлов
- Не хочу, чтобы вставить динамически JS CSS стилей, это заставит страницу мерцать, надежда вводится непосредственно в CSS адрес HTML, как обычно, развитие как
- Вы можете видеть в реальном времени эффект развития
- можно построить код сжатия
Ну, поставленная цель, начать
Структура каталогов
Не волнуйтесь, пусть гладит каталог обводки, не беспокойтесь писать код, каталог хороший, давайте ясное мышление, моя структура каталогов выглядит следующим образом
+ config //环境变量配置文件，开发模式和生产模式使用不同的环境变量，比如接口地址，开发环境用的接口域名是http://a.com，生产环境使用的是http://b.com
- dev.env.js //本地开发变量
- prod.env.js //生产环境变量
+ src
+ css //自己的less组件或者第三方css库
+ component //自己组件的less
+ lib //第三方的css库，比如bootstrap
+ html //html代码，主要是一些模板，如头部导航，底部通栏，侧边栏
+ tpl //模板文件
+ img //图片文件
+ js //自己的js组件库或者第三方js库
+ mod //自己的js组件放这里
+ lib //第三方js库
+ page //页面文件
+ index //这个根据自己情况设置，有的页面相关性强，可以放到一个文件夹下，比如一个user文件夹，可以放个人中心的所有页面
- index.html //每个页面都要有一个html
- index.js //每个页面都要有一个js，名称和html的名称保持一致
- index.less //每个页面都要有一个同名less文件
+ test
- test.html
- test.js
- test.less
+ webpack //webpack的配置文件
- dev-server.js //开发服务设置，可以通过localhost访问页面，页面的实时编译
- webpack.common.js //开发环境和生产环境通用配置
- webpack.dev.js //开发环境特有的配置
- webpack.prod.js //生产环境特有的配置Первый каталог конфигурации, теперь я в основном положить некоторые переменные окружения, это среда разработки и производств являются различными переменными, такими как адреса интерфейса, когда мы разработали с локальным адресом апи интерфейса, и времени упаковки, заменить производственную среду апи адрес.
WebPack каталог содержит WebPack конфигурационный файл, который разрабатывать и производить общую конфигурацию в webpack.common.js, разработка уникальной конфигурации в webpack.dev.js, уникальная конфигурация в производство в webpack.prod.js.
ЦСИ развивать наш домашний каталог, в котором размещен наш файл подкачки каталог страниц и может работать иначе, чем обычно, я использовал каждую страницу HTML, JS файлы и менее вместе взятые, некоторые студенты могут поставить все HTML в каталог, JS в каталог, но есть такая проблема, каждый раз, когда страница изменяется, мы должны смотреть через каталог, очень неудобно, мы должны собрать это весьма соответствующие документы и выписка JS CSS различные компоненты или блоки могут быть помещены отдельно от страницы.
GitHub Адрес: HTTPS: //github.com/501351981 / ...
Multi-запись конфигурации
WebPack поддержка мульти-запись, а именно учитывая многократные въездные JS файлы, вы можете вывести несколько файлов расслоение плотной, HTML, как это сделать? Я надеюсь, что процесс развития, как это, я установить заголовок в HTML, SEO и другой информации, запись кода содержимого HTML, WebPack файл соответствующих Js автоматически вставляются в нижнюю части HTML на линии, вы можете, которые нужно использовать HTML-WebPack-плагин плагин , могут быть упакованы с помощью вызова шаблона HTML файла конечный HTML.
Установка HTML-WebPack-плагин
npm install --save-dev html-webpack-pluginМульти вход расположен webpack.common.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry:[
index:'../src/page/index/index.js',
test:'../src/page/test/test.js'
],
output: {
filename: '[name].[hash].js', //输出名称后面跟哈希值，解决缓存问题
path: path.resolve(__dirname,'../dist')
},
....
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: '../src/page/index/index.html',
chunks: ['index'],
})
new HtmlWebpackPlugin({
filename: 'test.html',
template: '../src/page/test/test.html',
chunks: ['test'],
})
]
}Установка такой проблемы, каждый раз, когда новая страница, я добавлю здесь, слишком много хлопот, на самом деле, мы можем прочитать файл JS в SRC / странице автоматически добавляются к входной конфигурации, чтению / под Src страницы Все файлы HTML, автоматически вызывать новый HtmlWebpackPlugin быть создан.
Читать все имена файлов в каталоге, необходимо ввести Glob, установить
npm install --save-dev globУлучшенная конфигурация
const glob = require('glob')
const CleanWebpackPlugin = require('clean-webpack-plugin');
//多入口js的配置，读取src/page下所有的js文件
function entries() {
let jsDir = path.resolve(__dirname, '../src/page')
let entryFiles = glob.sync(jsDir + '/**/*.js')
let map = {};
for (let i = 0; i < entryFiles.length; i++) {
let filePath = entryFiles[i];
let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
map[filename] = filePath;
}
return map;
}
//读取多个html模板，进行插件实例化
function newHtmlWebpackPlugins(){
let jsDir = path.resolve(__dirname, '../src/page')
let htmls = glob.sync(jsDir + '/**/*.html')
let plugins=[]
for (let i = 0; i < htmls.length; i++) {
let filePath = htmls[i];
let filename_no_extension = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
let filename=filename_no_extension.concat('.html')
plugins.push(new HtmlWebpackPlugin({
filename: filename,
template: filePath,
chunks: [filename_no_extension],
}))
}
return plugins
}
module.exports={
entry:entries(),
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname,'../dist')
},
....
plugins: [
...newHtmlWebpackPlugins()
]
}Ну, а теперь новая страница не нуждается в изменении конфигурации WebPack и нужно только повторно запустить старт НПМ запустить в
Есть голова и нижняя часть мультиплекса
Глава навигации и нижней части каждой страницы баннера мы все одинаковы, и, следовательно, должен быть введен, то, как ввести другой HTML HTML в нем, что нужно использовать необработанный-загрузчик или HTML-withimg-погрузчик
Установка сырой-погрузчик, сырой-погрузчик может загрузить содержимое исходного файла (UTF-8 формата)
npm install --save-dev raw-loader//目录结构
+ src
+ html
+ tpl
- navbar.html //共用的头部导航
- footer.html //共用的底部导航
+ page //页面文件
+ index
- index.html
+ test
- test.htmlТаким образом, мы можем ссылаться и панель навигации в нижней части через index.html
<!--引入通用的导航部分-->
<%=require('raw-loader!../../html/tpl/navbar.html')%>
<!--页面的正式内容在这里-->
<div id="app">
<p>首页的内容在这里</p>
</div>
<!--引入通用的底部栏-->
<%=require('raw-loader!../../html/tpl/footer.html')%>Изначально я искал решение, я видел статья рекомендуется использовать необработанный-загрузчик, но обнаружил, что есть такая проблема, которая не может ссылаться на местные навигационные изображения, такие как навигация цитируемого изображение логотипа, не может быть найдено, потому что мы при упаковке изображение будет обработано, чтобы добавить обратно хэш-значение, запись непосредственно на пути изображения не работает, то я переключаюсь на HTML-withimg-погрузчик решена
Установите HTML-withimg-загрузчик, как следует из названия, этот плагин может быть загружен HTML с картинками
npm install --save-dev html-withimg-loader<!--引入通用的导航部分-->
<%=require('html-withimg-loader!../../html/tpl/navbar.html')%>
<!--页面的正式内容在这里-->
<div id="app">
<p>首页的内容在这里</p>
</div>
<!--引入通用的底部栏-->
<%=require('html-withimg-loader!../../html/tpl/footer.html')%>Кстати, HTML, упоминаемые в картине является необходимостью адреса написана необходимость требовать для работы, просто введите адрес картинки не хватает
<img src="${require('../../img/react.png')}" width="50" height="50">Поддержка ES6 JS записи
Я считаю, что мы теперь узнали ES6, но с точки зрения совместимости браузера, а не по произвольному закону требует плагин поддержки, мы установили первый
npm install --save-dev babel-loader babel-core babel-preset-envДобавить WebPack Конфигурация
webpack.common.js, мы только Js Src преобразование каталога
{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
include: path.resolve(__dirname,'../src')
},
При добавлении файла в каталоге проекта под названием .babelrc, набор Бабеля, поддержку более чем 1% акций большинства последних двух версий браузера
{
"presets": [
["env",{
"targets": {
"browsers": ["> 1%", "last 2 versions"]
}
}]
],
}Бабель просто ES6 синтаксиса в синтаксис ES5, такие как функция стрелки в функцию () {}, но для некоторых ES6 специфических особенностей не переводить, такие как новые карты (), после того, как упаковка или новая карта (), мы по-прежнему необходимо установить плагин для завершения преобразования работы.
npm install --save-dev babel-plugin-transform-runtimeИзмените файл .babelrc
{
"presets": [
["env",{
"targets": {
"browsers": ["> 1%", "last 2 versions"]
}
}]
],
"plugins": ["transform-runtime"] //引入插件
}
Теперь вы можете свободно использовать в ES6
Используйте меньше стиль письма
Сначала установите соответствующий плагины или
npm install --save-dev less less-loader css-loader style-loaderКонфигурация webpack.common.js
{
test: /\.css$/,
use:["style-loader","css-loader","less-loader"]
},В index.js файла, так что мы можем подать введение менее
import './index.less'После того, как упаковка, бег страницы HTML, index.js динамически вставляется в HTML-страницы CSS стиля, это вызовет проблемы, просто нагрузка стиля HTML, стили CSS вставлены после JS другого стиля, в результате чего страницы блестит, опыт не является хорошим (технической, но и стремлением к пользовательскому опыту ах, не только менеджер продукта вещи). Есть два пути решения этого, первый один завершен до не загружен JS, отображать загрузочную анимацию, чтобы покрыть всю страницу, а второй является путем файла CSS упакованного в HTML, не добавляйте динамически JS, я выбрал второй вариант.
Нам нужно меньше файлов упакованы в файл CSS, вам нужно использовать плагин экстракт-текст-WebPack-плагин
npm install --save-dev extract-text-webpack-pluginwebpack.common.js
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports={
rules: [
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader!less-loader"
})
},
]
}
plugins: [
new ExtractTextPlugin("[name].[hash:8].css"),
]HTML после этого пакет будет введен файл CSS, как это
<link href="index.5eb2501d.css" rel="stylesheet">
Конфигурация WebPack
Я на самом деле в процессе, начиная с 0, построенными в, должна быть WebPack этой конфигурации, причина поставить окончательный не хотело влиять на содержимое багажника, ниже мы кратко объяснить мою конфигурацию WebPack.
WebPack официальную рекомендацию не писать дубликата конфигурации, а именно местной среды и производства в общий файл конфигурации, а затем объединены путем слияния
webpack.dev.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
const env=require("../config/dev.env")
module.exports=merge(common,{
mode:"development",
devtool: 'inline-source-map',
plugins:[
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new OpenBrowserPlugin({ url: 'http://localhost:5000' })
],
})Мы можем видеть, что с помощью WebPack-слияния плагина, общего webpack.common.js конфигурации и объединение развития
new webpack.DefinePlugin({
'process.env': env
}),DefinePlugin определяет глобальные переменные process.env
new OpenBrowserPlugin({ url: 'http://localhost:5000' })Этот плагин после мы допускаем для запуска НПМ запуска, автоматически откройте страницу HTTP: // локальный : 5000, избежать вручную открывать каждый раз.
WebPack-DEV-сервер предоставляет нам простой веб - сервер, и может быть перезагружен в режиме реального времени, так что мы можем видеть результаты в развитии реального времени, конфигурации веб - сервера, я положил в Dev-server.js
const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');
const config = require('./webpack.dev');
const options = {
contentBase: './dist',
hot: true,
host: 'localhost',
};
webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);
server.listen(5000, 'localhost', () => {
console.log('dev server listening on port 5000');
});
В package.json, мы добавим два сценария
"scripts": {
"start": "node webpack/dev-server.js",
"build": "npx webpack --config webpack/webpack.prod.js",
},Так что мы можем ввести два командной строки
NPM старт запуска: войти в режим развития
NPM перспектива сборка: производства упаковки кода
Ну, в основном я делаю введение этого леса закончена, реальная потребность понять свои собственные, чтобы попытаться увидеть это одно, а делает другое дело, другие говорят, что это более трудно понять, и передний конец дорога длинная, мы будем пробовать.
GitHub Адрес: HTTPS: //github.com/501351981 / ...
Строительные леса не является совершенным, но основной достаточно, я сделаю несколько позади леса, такие как совместная разработка вю многостраничных или развития мобильного терминала H5, мы заинтересованы может продолжать фокусироваться.