При конфигурировании проекта в Webpack
столкнулся со следующими вопросами:
- Использую
html-webpack-plugin
и он генерирует базовыйhtml-документ
. Можно ли задать какие-то настройки данному плагину,чтобы при создании html внести тудаdom-элементы
(к примеру мне нужно внести div с id,дабы отрендерить в нем react-приложение)? - Как в webpack'е подключаются сторонние библиотеки\фреймворки?К примеру мне нужно подключить bootstrap. Раньше работал с Gulp. там я просто указывал путь до стилей js библиотек, которые были установлены в папке node_modules. В случае с webpack этот момент мне непонятен.
Собственно сам webpack config:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('[name].bundle.css');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
//logs config
const stats = {
assets: true
, children: false
, chunks: false
, hash: false
, modules: false
, publicPath: false
, timings: true
, version: false
, warnings: true
, colors: {
green: '\u001b[32m'
}
};
module.exports = {
context: path.resolve(__dirname, 'src/app'),
entry: './index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: { presets: ['es2015',"stage-0","react"] }
}],
include: path.join(__dirname, 'src'),
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader!sass-loader",
}),
},
],
},
devtool: "source-map",
devServer: {
port: 9000,
host: "localhost",
stats: 'errors-only',
contentBase: __dirname + '/src',
},
plugins: [
new HtmlWebpackPlugin({
title: 'react-calendar',
filename: 'index.html',
}),
extractCSS,
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false,
}
}),
],
}