Создаем webpack.config.js и app.js:
/*---- webpack.config.js ----*/
var webpack = require('webpack'),
//путь к js файлам, у вас может быть другой
path_src = 'src/js',
ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: path_src + '/app.js',
devtool: '#source-map',
resolve: {
modulesDirectories: [
"."
],
alias: {
//ссылка на jquery lib
jquery: "bower_components/jquery/dist/jquery.js"
}
},
output: {
//папка куда он все выплюнет, находится в корне проекта
path: 'dist',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
},
//webpack автоматически устранит зависимость bootstrap.js от jquery
{
test: /bower_components\/dist\/bootstrap\/js\//,
loader: 'imports?jQuery=jquery'
},
]
},
plugins: [
//чтобы в любом месте сразу писать через $
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new ExtractTextPlugin('bundle.css')
]
};
/*---- app.js ----*/
//подключаем bootstrap.css
require('bower_components/bootstrap/dist/css/bootstrap.css');
//подключаем bootstrap.js
require('bower_components/bootstrap/dist/js/bootstrap.js');
//подключаем файл стилей
require('src/css/_main.scss');
