Это мое первое использование bootstrap-sass вместе с webpack 2.0. Я основан на его использовании react-redux-universal-hot-example с небольшими изменениями.
Я настроил следующие пакеты:
"dependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-display-name": "^6.23.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.22.0",
"babel-register": "^6.23.0",
"babel-runtime": "^6.23.0",
"body-parser": "^1.16.1",
"compression": "^1.6.2",
"containers": "0.0.1",
"express": "^4.14.1",
"express-session": "^1.15.1",
"file-loader": "^0.10.1",
"http-proxy": "^1.16.2",
"immutable": "^3.8.1",
"less": "^2.7.2",
"less-loader": "^3.0.0",
"multireducer": "^3.1.0",
"piping": "^1.0.0-rc.4",
"pretty-error": "^2.0.3",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-helmet": "^4.0.0",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"react-transform-catch-errors": "^1.0.2",
"redbox-react": "^1.3.4",
"redux": "^3.6.0",
"redux-async-connect": "^1.0.0-rc4",
"redux-form": "^6.5.0",
"redux-thunk": "^2.2.0",
"serialize-javascript": "^1.3.0",
"serve-favicon": "^2.4.1",
"socket.io": "^1.7.3",
"socket.io-client": "^1.7.3",
"superagent": "^3.5.0",
"url-loader": "^0.5.8",
"violet-paginator": "^3.0.0-beta-3",
"webpack-isomorphic-tools": "^2.6.6"
},
"devDependencies": {
"babel-cli": "^6.24.0",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-typecheck": "^3.9.0",
"babel-preset-env": "^1.2.1",
"better-npm-run": "0.0.14",
"bootstrap-sass": "^3.3.7",
"bootstrap-sass-loader": "^1.0.10",
"clean-webpack-plugin": "^0.1.15",
"concurrently": "^3.3.0",
"eslint": "^3.17.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-loader": "^1.6.3",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.0",
"extract-text-webpack-plugin": "^2.1.0",
"font-awesome": "^4.7.0",
"font-awesome-webpack": "0.0.4",
"react-a11y": "^0.3.3",
"sass-loader": "^6.0.3",
"strip-loader": "^0.1.2",
"style-loader": "^0.14.0",
"webpack": "^2.2.1",
"webpack-dev-middleware": "^1.10.1",
"webpack-hot-middleware": "^2.17.0"
}
My boostrap.config.js:
/**
* Bootstrap configuration for bootstrap-sass-loader
*
* Scripts are disabled to not load jQuery.
* If you depend on Bootstrap scripts consider react-bootstrap instead.
* https://github.com/react-bootstrap/react-bootstrap
*
* In order to keep the bundle size low in production
* disable components you don't use.
*
*/
module.exports = {
preBootstrapCustomizations: './src/theme/variables.scss',
mainSass: './src/theme/bootstrap.overrides.scss',
verbose: false,
debug: false,
scripts: {
transition: false,
alert: false,
button: false,
carousel: false,
collapse: false,
dropdown: false,
modal: false,
tooltip: false,
popover: false,
scrollspy: false,
tab: false,
affix: false
},
styles: {
mixins: true,
normalize: true,
print: true,
glyphicons: true,
scaffolding: true,
type: true,
code: true,
grid: true,
tables: true,
forms: true,
buttons: true,
'component-animations': true,
dropdowns: true,
'button-groups': true,
'input-groups': true,
navs: true,
navbar: true,
breadcrumbs: true,
pagination: true,
pager: true,
labels: true,
badges: true,
jumbotron: true,
thumbnails: true,
alerts: true,
'progress-bars': true,
media: true,
'list-group': true,
panels: true,
wells: true,
'responsive-embed': true,
close: true,
modals: true,
tooltip: true,
popovers: true,
carousel: true,
utilities: true,
'responsive-utilities': true
}
};
И выдача webpack как:
webpack --colors --display-error-details --progress --config webpack/prod.config.js
Где prod.config.js содержимое:
требуют ('babel-polyfill');
// Webpack config for creating the production bundle.
var path = require('path');
var webpack = require('webpack');
var CleanPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var strip = require('strip-loader');
var projectRootPath = path.resolve(__dirname, '../');
var assetsPath = path.resolve(projectRootPath, './static/dist');
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
module.exports = {
devtool: 'source-map',
context: path.resolve(__dirname, '..'),
entry: {
'main': [
'bootstrap-sass!./src/theme/bootstrap.config.prod.js',
'font-awesome-webpack!./src/theme/font-awesome.config.prod.js',
'./src/client.js'
]
},
output: {
path: assetsPath,
filename: '[name]-[chunkhash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: '/dist/'
},
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: [strip.loader('debug'), 'babel-loader']},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style', use: 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap=true&sourceMapContents=true'} ) },
{ test: /\.scss$/, loader: ExtractTextPlugin.extract({ fallback: 'style', use: 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true'} ) },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.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" },
{ test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
]
},
resolve: {
modules: [
'src',
'node_modules'
],
extensions: ['.json', '.js', '.jsx']
},
plugins: [
new CleanPlugin([assetsPath], { root: projectRootPath }),
// css files from the extract-text-plugin loader
new ExtractTextPlugin({ filename: '[name]-[chunkhash].css', allChunks: true}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
},
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: false,
__DEVTOOLS__: false
}),
// ignore dev config
new webpack.IgnorePlugin(/\.\/dev/, /\/config$/),
// optimizations
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
webpackIsomorphicToolsPlugin
]
};
Во время выполнения я получаю следующую ошибку:
clean-webpack-plugin: D:\DEV\myprj\static\dist has been removed.
Hash: 2387464bdcca3b073b5a Version: webpack 2.2.1
Time: 6404ms
Asset Size Chunks Chunk Names
main-e3e431cb3191c47eae45.js 384 kB 0 [emitted] [big] main
[10] ./~/react/react.js 56 bytes {0} [built]
[14] (webpack)/buildin/global.js 509 bytes {0} [built]
[156] ./~/react-redux/es/index.js 194 bytes {0} [built]
[258] ./~/bootstrap-sass/assets/javascripts/bootstrap.js!./src/theme/bootstrap.config.prod.js 2.25 kB {0} [built] [failed] [1 error]
[259] ./~/font-awesome-webpack/index.loader.js!./src/theme/font-awesome.config.prod.js 247 bytes {0} [built]
[260] ./src/client.js 2.91 kB {0} [built]
[263] ./~/babel-polyfill/lib/index.js 833 bytes {0} [built]
[487] ./~/react-dom/index.js 59 bytes {0} [built]
[560] ./~/react-router-redux/lib/index.js 1.97 kB {0} [built]
[567] ./~/react-router/es/Router.js 5.3 kB {0} [built]
[569] ./~/react-router/es/applyRouterMiddleware.js 1.9 kB {0} [built]
[575] ./~/react-router/es/index.js 1.46 kB {0} [built]
[597] ./~/redux-async-connect/lib/index.js 797 bytes {0} [built]
[603] ./~/socket.io-client/lib/index.js 2.17 kB {0} [built]
[620] multi bootstrap-sass!./src/theme/bootstrap.config.prod.js font-awesome-webpack!./src/theme/font-awesome.config.prod.js ./src/client.js 52 bytes {0} [built]
+ 606 hidden modules
ERROR in ./~/bootstrap-sass/assets/javascripts/bootstrap.js!./src/theme/bootstrap.config.prod.js
Module build failed: Error: Bootstrap's JavaScript requires jQuery
at Object.<anonymous> (D:\DEV\myprj\node_modules\bootstrap-sass\assets\javascripts\bootstrap.js:8:9)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at loadLoader (D:\DEV\myprj\node_modules\loader-runner\lib\loadLoader.js:13:17)
at iteratePitchingLoaders (D:\DEV\myprj\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at runLoaders (D:\DEV\myprj\node_modules\loader-runner\lib\LoaderRunner.js:362:2)
at NormalModule.doBuild (D:\DEV\myprj\node_modules\webpack\lib\NormalModule.js:129:2)
at NormalModule.build (D:\DEV\myprj\node_modules\webpack\lib\NormalModule.js:180:15)
at Compilation.buildModule (D:\DEV\myprj\node_modules\webpack\lib\Compilation.js:142:10)
at factoryCallback (D:\DEV\myprj\node_modules\webpack\lib\Compilation.js:324:11)
at D:\DEV\myprj\node_modules\webpack\lib\NormalModuleFactory.js:242:4
at D:\DEV\myprj\node_modules\webpack\lib\NormalModuleFactory.js:93:13
at D:\DEV\myprj\node_modules\tapable\lib\Tapable.js:204:11
at NormalModuleFactory.params.normalModuleFactory.plugin (D:\DEV\myprj\node_modules\webpack\lib\CompatibilityPlugin.js:52:5)
at NormalModuleFactory.applyPluginsAsyncWaterfall (D:\DEV\myprj\node_modules\tapable\lib\Tapable.js:208:13)
at onDoneResolving (D:\DEV\myprj\node_modules\webpack\lib\NormalModuleFactory.js:68:11)
at onDoneResolving (D:\DEV\myprj\node_modules\webpack\lib\NormalModuleFactory.js:189:6)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
@ multi bootstrap-sass!./src/theme/bootstrap.config.prod.js font-awesome-webpack!./src/theme/font-awesome.config.prod.js ./src/client.js
