iot-webpage

git clone git://archive.git.mtrnord.blog/Nordgedanken/iot-webpage.git
Log | Files | Refs | README | LICENSE

webpack.config.js (3822B)

      1 const path = require('path');
      2 const webpack = require('webpack');
      3 const HtmlWebpackPlugin = require('html-webpack-plugin');
      4 const ExtractTextPlugin = require('extract-text-webpack-plugin');
      5 const CopyWebpackPlugin = require('copy-webpack-plugin');
      6 
      7 module.exports = {
      8     entry: {
      9         'bundle': './src/index.js',
     10         'theme': './src/index.scss'
     11     },
     12     module: {
     13         rules: [
     14             { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre', exclude: /node_modules/, },
     15             { test: /\.js$/, loader: 'babel-loader', include: path.resolve('./src'), options: {sourceMap: true}, exclude: /node_modules/, },
     16             {
     17                 test: /\.s?css$/,
     18                 use: ExtractTextPlugin.extract({
     19                     use: [
     20                         {loader: 'css-loader', options: {modules: true, minimize: true, importLoaders: 1, sourceMap: true}},
     21                         {loader: 'postcss-loader', options: {path: './postcss.config.js', sourceMap: true}}
     22                     ]
     23                 })
     24             },
     25         ]
     26     },
     27     output: {
     28         path: path.join(__dirname, 'webapp'),
     29 
     30         // the generated js (and CSS, from the ExtractTextPlugin) are put in a
     31         // unique subdirectory for the build. There will only be one such
     32         // 'bundle' directory in the generated tarball; however, hosting
     33         // servers can collect 'bundles' from multiple versions into one
     34         // directory and symlink it into place - this allows users who loaded
     35         // an older version of the application to continue to access webpack
     36         // chunks even after the app is redeployed.
     37         //
     38         filename: 'bundles/[hash]/[name].js',
     39         chunkFilename: 'bundles/[hash]/[name].js',
     40         devtoolModuleFilenameTemplate: function(info) {
     41             // Reading input source maps gives only relative paths here for
     42             // everything. Until I figure out how to fix this, this is a
     43             // workaround.
     44             // We use the relative resource path with any '../'s on the front
     45             // removed which gives a tree with matrix-react-sdk and vector
     46             // trees smashed together, but this fixes everything being under
     47             // various levels of '.' and '..'
     48             // Also, sometimes the resource path is absolute.
     49             return path.relative(process.cwd(), info.resourcePath).replace(/^[\/\.]*/, '');
     50         },
     51     },
     52     plugins: [
     53         new CopyWebpackPlugin([{ from: './res', to: './' }]),
     54         new webpack.DefinePlugin({
     55             'process.env': {
     56                 NODE_ENV: JSON.stringify(process.env.NODE_ENV),
     57             },
     58         }),
     59 
     60         new HtmlWebpackPlugin({
     61             template: './src/index.html',
     62 
     63             // we inject the links ourselves via the template, because
     64             // HtmlWebpackPlugin wants to put the script tags either at the
     65             // bottom of <head> or the bottom of <body>, and I'm a bit scared
     66             // about moving them.
     67             inject: true,
     68         }),
     69         new ExtractTextPlugin({
     70             filename: 'bundles/[hash]/[name].css',
     71             allChunks: true,
     72         }),
     73     ],
     74     resolve: {
     75         extensions: ['.css', '.scss', '.js', '.json'],
     76         alias: {
     77             // alias any requires to the react module to the one in our path, otherwise
     78             // we tend to get the react source included twice when using npm link.
     79             'react': path.resolve('./node_modules/react'),
     80             'react-dom': path.resolve('./node_modules/react-dom'),
     81         },
     82     },
     83     devServer: {
     84         // serve unwebpacked assets from webapp.
     85         contentBase: './webapp',
     86 
     87         stats: {
     88             // don't fill the console up with a mahoosive list of modules
     89             chunks: false,
     90         },
     91     },
     92     devtool: 'source-map',
     93 };