accounts-frontend/webpack.config.js
2016-05-10 01:59:49 +03:00

260 lines
7.2 KiB
JavaScript

/* eslint-env node */
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var cssnano = require('cssnano');
var cssUrl = require("postcss-url");
var iconfontImporter = require('./webpack/node-sass-iconfont-importer');
/**
* TODO: https://babeljs.io/docs/plugins/
* TODO: отдельные конфиги для env (аля https://github.com/davezuko/react-redux-starter-kit)
* TODO: dev tools https://github.com/freeqaz/redux-simple-router-example/blob/master/index.jsx
* https://github.com/glenjamin/ultimate-hot-reloading-example ( обратить внимание на плагины babel )
* https://github.com/gajus/react-css-modules ( + BrowserSync)
* https://github.com/reactuate/reactuate
* https://github.com/insin/nwb
*
* Inspiration projects:
* https://github.com/davezuko/react-redux-starter-kit
*/
var isProduction = process.argv.some(function(arg) {
return arg === '-p';
});
var isTest = process.argv.some(function(arg) {
return arg.indexOf('karma') !== -1;
});
var isDockerized = !!process.env.DOCKERIZED;
process.env.NODE_ENV = isProduction ? 'production' : 'development';
if (isTest) {
process.env.NODE_ENV = 'test';
}
const CSS_CLASS_TEMPLATE = isProduction ? '[hash:base64:5]' : '[path][name]-[local]';
var config;
try {
config = require('./config/dev.json');
} catch (err) {
console.error('\n\n===\nPlease create dev.json config under ./config based on template.dev.json\n===\n\n');
throw err;
}
var rootPath = path.resolve('./src');
var webpackConfig = {
entry: {
app: path.join(__dirname, 'src'),
vendor: [
'babel-polyfill',
'whatwg-fetch',
'classnames',
'history',
'intl-format-cache',
'intl-messageformat',
'react',
'react-dom',
'react-helmet',
'react-intl',
'react-motion',
'react-redux',
'react-router',
'react-router-redux',
'redux',
'redux-thunk'
]
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js'
},
resolve: {
root: rootPath,
extensions: ['', '.js', '.jsx']
},
externals: isTest ? {
// http://airbnb.io/enzyme/docs/guides/webpack.html
'cheerio': 'window',
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true,
'react/addons': true
} : {},
devServer: {
host: 'localhost',
port: 8080,
proxy: {
'/api*': {
headers: {
host: config.apiHost.replace(/https?:|\//g, '')
},
target: config.apiHost
}
},
hot: true,
inline: true,
historyApiFallback: true
},
devtool: isTest ? 'inline-source-map' : 'eval',
plugins: [
new iconfontImporter.Plugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
},
__DEV__: !isProduction,
__TEST__: isTest,
__PROD__: isProduction
}),
new HtmlWebpackPlugin({
template: 'src/index.ejs',
favicon: 'src/favicon.ico',
hash: isProduction,
filename: 'index.html',
inject: false,
minify: {
collapseWhitespace: isProduction
}
}),
new webpack.ProvidePlugin({
// window.fetch polyfill
fetch: 'imports?this=>self!exports?self.fetch!whatwg-fetch'
})
].concat(isTest ? [] : [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
]).concat(isProduction ? [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin()
] : []),
module: {
loaders: [
{
test: /\.scss$/,
extractInProduction: true,
loader: 'style!css?modules&importLoaders=2&localIdentName=' + CSS_CLASS_TEMPLATE + '!postcss!sass'
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.(png|gif|jpg)$/,
loader: 'url?limit=1000'
},
{
test: /\.json$/,
exclude: /intl\.json/,
loader: 'json'
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.intl\.json$/,
loader: 'babel!intl-loader!json'
}
]
},
resolveLoader: {
alias: {
'intl-loader': path.resolve('./webpack/intl-loader')
}
},
sassLoader: {
importer: iconfontImporter({
test: /\.font.(js|json)$/,
types: ['woff', 'eot', 'ttf']
})
},
postcss: [
cssUrl({
url: function(url, decl, from, dirname, to, options, result) {
// scss не правильно резолвит относительные урлы.
// добавляем к урлам остаток пути, что бы они были относительно root
//
// Например:
// file: components/ui/foo.scss
// images/foo.png -> components/ui/images/foo.png
if (url[0] !== '/') {
var relativeToRoot = dirname.split(rootPath + '/')[1];
return path.join(relativeToRoot, url);
}
return url;
}
}),
cssnano({
// sourcemap: !isProduction,
autoprefixer: {
add: true,
remove: true,
browsers: ['last 2 versions']
},
safe: true,
// отключаем минификацию цветов, что бы она не ломала такие выражения:
// composes: black from './buttons.scss';
colormin: false,
discardComments: {
removeAll: true
}
})
]
};
if (isDockerized) {
webpackConfig.watchOptions = {
poll: 2000
};
webpackConfig.devServer.host = '0.0.0.0';
}
if (isProduction) {
webpackConfig.module.loaders.forEach((loader) => {
if (loader.extractInProduction) {
var parts = loader.loader.split('!');
loader.loader = ExtractTextPlugin.extract(
parts[0],
parts.slice(1)
.join('!')
.replace(/[&?]sourcemap/, '')
);
}
});
webpackConfig.plugins.push(new ExtractTextPlugin('styles.css', {
allChunks: true
}));
webpackConfig.devtool = false;
}
if (!isProduction && !isTest) {
webpackConfig.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
);
}
module.exports = webpackConfig;