import webpack from 'webpack'; import ExtractTextPlugin from 'extract-text-webpack-plugin'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import autoprefixer from 'autoprefixer'; import path from 'path'; const ENV = process.env.NODE_ENV || 'development'; const CSS_MAPS = ENV!=='production'; module.exports = { context: path.resolve(__dirname, "src"), entry: './index.js', output: { path: path.resolve(__dirname, "build"), publicPath: '/', filename: 'bundle.js' }, resolve: { extensions: ['.jsx', '.js', '.json', '.less'], modules: [ path.resolve(__dirname, "src/lib"), path.resolve(__dirname, "node_modules"), 'node_modules' ], alias: { components: path.resolve(__dirname, "src/components"), // used for tests style: path.resolve(__dirname, "src/style"), 'react': 'preact-compat', 'react-dom': 'preact-compat' } }, module: { rules: [ { test: /\.jsx?$/, exclude: path.resolve(__dirname, 'src'), enforce: 'pre', use: 'source-map-loader' }, { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }, { // Transform our own .(less|css) files with PostCSS and CSS-modules test: /\.(less|css)$/, include: [path.resolve(__dirname, 'src/components')], use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { modules: true, sourceMap: CSS_MAPS, importLoaders: 1, minimize: true } }, { loader: `postcss-loader`, options: { sourceMap: CSS_MAPS, plugins: () => { autoprefixer({ browsers: [ 'last 2 versions' ] }); } } }, { loader: 'less-loader', options: { sourceMap: CSS_MAPS } } ] }) }, { test: /\.(less|css)$/, exclude: [path.resolve(__dirname, 'src/components')], use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { sourceMap: CSS_MAPS, importLoaders: 1, minimize: true } }, { loader: `postcss-loader`, options: { sourceMap: CSS_MAPS, plugins: () => { autoprefixer({ browsers: [ 'last 2 versions' ] }); } } }, { loader: 'less-loader', options: { sourceMap: CSS_MAPS } } ] }) }, { test: /\.json$/, use: 'json-loader' }, { test: /\.(xml|html|txt|md)$/, use: 'raw-loader' }, { test: /\.(svg|woff2?|ttf|eot|jpe?g|png|gif)(\?.*)?$/i, use: ENV==='production' ? 'file-loader' : 'url-loader' } ] }, plugins: ([ new webpack.NoEmitOnErrorsPlugin(), new ExtractTextPlugin({ filename: 'style.css', allChunks: true, disable: ENV !== 'production' }), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(ENV) }), new HtmlWebpackPlugin({ template: './index.ejs', minify: { collapseWhitespace: true } }) ]).concat(ENV==='production' ? [ new webpack.optimize.UglifyJsPlugin({ output: { comments: false }, compress: { unsafe_comps: true, properties: true, keep_fargs: false, pure_getters: true, collapse_vars: true, unsafe: true, warnings: false, screw_ie8: true, sequences: true, dead_code: true, drop_debugger: true, comparisons: true, conditionals: true, evaluate: true, booleans: true, loops: true, unused: true, hoist_funs: true, if_return: true, join_vars: true, cascade: true, drop_console: true } }) ] : []), stats: { colors: true }, node: { global: true, process: false, Buffer: false, __filename: false, __dirname: false, setImmediate: false }, devtool: ENV==='production' ? 'source-map' : 'cheap-module-eval-source-map', devServer: { inline: true, port: 1337, host: 'lnmp.dev', publicPath: '/', contentBase: './src', historyApiFallback: true, open: true, openPage: '' } };