BoldGrid /
controls
| @@ 1-149 (lines=149) @@ | ||
| 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 | const MinifyPlugin = require( 'babel-minify-webpack-plugin' ); |
|
| 7 | ||
| 8 | const srcDir = path.resolve( __dirname, '..', 'src' ); |
|
| 9 | const distDir = path.resolve( __dirname, '..', 'dist' ); |
|
| 10 | const nodeModulesDir = path.resolve( require.resolve( '@material/switch/mdc-switch.scss' ), '..', '..', '..' ); |
|
| 11 | ||
| 12 | module.exports = { |
|
| 13 | mode: 'production', |
|
| 14 | ||
| 15 | context: srcDir, |
|
| 16 | ||
| 17 | devtool: false, |
|
| 18 | ||
| 19 | entry: { |
|
| 20 | application: './index.js', |
|
| 21 | bundle: './controls/index.js' |
|
| 22 | }, |
|
| 23 | ||
| 24 | output: { |
|
| 25 | filename: '[name].min.js', |
|
| 26 | path: distDir, |
|
| 27 | publicPath: '/', |
|
| 28 | sourceMapFilename: '[name].map' |
|
| 29 | }, |
|
| 30 | ||
| 31 | module: { |
|
| 32 | rules: [ |
|
| 33 | { |
|
| 34 | test: /\.ejs$/, |
|
| 35 | loader: 'ejs-loader' |
|
| 36 | }, |
|
| 37 | { |
|
| 38 | test: /\.html$/, |
|
| 39 | use: [ |
|
| 40 | { |
|
| 41 | loader: 'html-loader', |
|
| 42 | options: { |
|
| 43 | minimize: true |
|
| 44 | } |
|
| 45 | } |
|
| 46 | ] |
|
| 47 | }, |
|
| 48 | { |
|
| 49 | test: /\.js$/, |
|
| 50 | loader: 'babel-loader', |
|
| 51 | include: [ srcDir ], |
|
| 52 | options: { |
|
| 53 | presets: [ '@babel/preset-env' ] |
|
| 54 | } |
|
| 55 | }, |
|
| 56 | { |
|
| 57 | test: /\.svg$/, |
|
| 58 | loader: 'svg-inline-loader' |
|
| 59 | }, |
|
| 60 | { |
|
| 61 | test: /\.js$/, |
|
| 62 | enforce: 'pre', |
|
| 63 | exclude: /node_modules/, |
|
| 64 | loader: 'eslint-loader', |
|
| 65 | options: { |
|
| 66 | emitWarning: true |
|
| 67 | } |
|
| 68 | }, |
|
| 69 | { |
|
| 70 | test: /\.(scss|css)$/, |
|
| 71 | use: ExtractTextPlugin.extract( { |
|
| 72 | fallback: 'style-loader', |
|
| 73 | use: [ |
|
| 74 | { |
|
| 75 | loader: 'css-loader', |
|
| 76 | options: { |
|
| 77 | minimize: true |
|
| 78 | } |
|
| 79 | }, |
|
| 80 | { |
|
| 81 | loader: 'sass-loader', |
|
| 82 | options: { |
|
| 83 | includePaths: [ nodeModulesDir ] |
|
| 84 | } |
|
| 85 | }, |
|
| 86 | { |
|
| 87 | loader: 'postcss-loader', |
|
| 88 | options: { |
|
| 89 | plugins: loader => [ require( 'autoprefixer' )() ] |
|
| 90 | } |
|
| 91 | } |
|
| 92 | ] |
|
| 93 | } ) |
|
| 94 | }, |
|
| 95 | { |
|
| 96 | test: /\.(jpg|jpeg|png|gif|ico)$/, |
|
| 97 | loader: 'url-loader', |
|
| 98 | query: { |
|
| 99 | limit: 10000, // Use data url for assets <= 10KB |
|
| 100 | name: './[name].[hash].[ext]' |
|
| 101 | } |
|
| 102 | } |
|
| 103 | ] |
|
| 104 | }, |
|
| 105 | ||
| 106 | plugins: [ |
|
| 107 | new CopyWebpackPlugin( [ |
|
| 108 | { |
|
| 109 | from: './../static', |
|
| 110 | to: '' |
|
| 111 | }, |
|
| 112 | { |
|
| 113 | from: require.resolve( 'Iris/dist/iris.min.js' ), |
|
| 114 | to: './static' |
|
| 115 | }, |
|
| 116 | { |
|
| 117 | from: require.resolve( 'sass.js/dist/sass.worker.js' ), |
|
| 118 | to: './static' |
|
| 119 | }, |
|
| 120 | { |
|
| 121 | from: path.resolve( require.resolve( 'Buttons/scss/buttons.scss' ), '..' ), |
|
| 122 | to: './scss/color-palette-scss/buttons' |
|
| 123 | }, |
|
| 124 | { |
|
| 125 | from: srcDir + '/controls/color/scss/utilities/color-classes.sass', |
|
| 126 | to: './scss/color-palette-scss/classes/color-classes.scss' |
|
| 127 | } |
|
| 128 | ] ), |
|
| 129 | ||
| 130 | new MinifyPlugin(), |
|
| 131 | ||
| 132 | new webpack.NamedModulesPlugin(), |
|
| 133 | ||
| 134 | new HtmlWebpackPlugin( { |
|
| 135 | template: path.join( srcDir, 'index.ejs' ), |
|
| 136 | path: distDir, |
|
| 137 | filename: 'index.html', |
|
| 138 | hash: true, |
|
| 139 | minify: { |
|
| 140 | removeComments: true, |
|
| 141 | minifyJS: true, |
|
| 142 | minifyCSS: true, |
|
| 143 | collapseWhitespace: true |
|
| 144 | } |
|
| 145 | } ), |
|
| 146 | ||
| 147 | new ExtractTextPlugin( '[name].min.css' ) |
|
| 148 | ] |
|
| 149 | }; |
|
| 150 | ||
| @@ 1-141 (lines=141) @@ | ||
| 1 | const path = require( 'path' ); |
|
| 2 | const webpack = require( 'webpack' ); |
|
| 3 | const HtmlWebpackPlugin = require( 'html-webpack-plugin' ); |
|
| 4 | const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); |
|
| 5 | const StyleLintPlugin = require( 'stylelint-webpack-plugin' ); |
|
| 6 | ||
| 7 | const srcDir = path.resolve( __dirname, '..', 'src' ); |
|
| 8 | ||
| 9 | module.exports = { |
|
| 10 | mode: 'development', |
|
| 11 | ||
| 12 | context: srcDir, |
|
| 13 | ||
| 14 | entry: [ './index.js' ], |
|
| 15 | ||
| 16 | output: { |
|
| 17 | filename: 'bundle.js', |
|
| 18 | path: path.resolve( __dirname, '..', 'dist' ), |
|
| 19 | publicPath: '/' |
|
| 20 | }, |
|
| 21 | ||
| 22 | devServer: { |
|
| 23 | contentBase: srcDir, |
|
| 24 | publicPath: '/', |
|
| 25 | historyApiFallback: true, |
|
| 26 | port: 3000, |
|
| 27 | overlay: { |
|
| 28 | errors: true, |
|
| 29 | warnings: true |
|
| 30 | } |
|
| 31 | }, |
|
| 32 | ||
| 33 | module: { |
|
| 34 | rules: [ |
|
| 35 | { |
|
| 36 | test: /\.ejs$/, |
|
| 37 | loader: 'ejs-loader' |
|
| 38 | }, |
|
| 39 | { |
|
| 40 | test: /\.html$/, |
|
| 41 | use: [ |
|
| 42 | { |
|
| 43 | loader: 'html-loader', |
|
| 44 | options: { |
|
| 45 | minimize: true |
|
| 46 | } |
|
| 47 | } |
|
| 48 | ] |
|
| 49 | }, |
|
| 50 | { |
|
| 51 | test: /\.js$/, |
|
| 52 | exclude: /node_modules/, |
|
| 53 | loader: 'babel-loader', |
|
| 54 | options: { |
|
| 55 | presets: [ '@babel/preset-env' ] |
|
| 56 | } |
|
| 57 | }, |
|
| 58 | { |
|
| 59 | test: /\.js$/, |
|
| 60 | enforce: 'pre', |
|
| 61 | ||
| 62 | loader: 'eslint-loader', |
|
| 63 | options: { |
|
| 64 | emitWarning: true |
|
| 65 | } |
|
| 66 | }, |
|
| 67 | { |
|
| 68 | test: /\.svg$/, |
|
| 69 | loader: 'svg-inline-loader' |
|
| 70 | }, |
|
| 71 | { |
|
| 72 | test: /\.(scss|css)$/, |
|
| 73 | exclude: [ |
|
| 74 | srcDir + '/controls/color/scss/utilities/color-classes.scss', |
|
| 75 | require.resolve( 'Buttons/scss/buttons.scss' ) |
|
| 76 | ], |
|
| 77 | use: [ |
|
| 78 | { |
|
| 79 | loader: 'style-loader' |
|
| 80 | }, |
|
| 81 | { |
|
| 82 | loader: 'css-loader' |
|
| 83 | }, |
|
| 84 | { |
|
| 85 | loader: 'sass-loader', |
|
| 86 | options: { |
|
| 87 | includePaths: [ 'node_modules' ] |
|
| 88 | } |
|
| 89 | } |
|
| 90 | ] |
|
| 91 | }, |
|
| 92 | { |
|
| 93 | test: /\.(jpg|jpeg|png|gif|ico)$/, |
|
| 94 | loader: 'url-loader', |
|
| 95 | query: { |
|
| 96 | limit: 10000, // Use data url for assets <= 10KB |
|
| 97 | name: 'static/images/[name].[hash].[ext]' |
|
| 98 | } |
|
| 99 | } |
|
| 100 | ] |
|
| 101 | }, |
|
| 102 | ||
| 103 | plugins: [ |
|
| 104 | new CopyWebpackPlugin( [ |
|
| 105 | { |
|
| 106 | from: './../static', |
|
| 107 | to: '' |
|
| 108 | }, |
|
| 109 | { |
|
| 110 | from: require.resolve( 'Iris/dist/iris.min.js' ), |
|
| 111 | to: './static' |
|
| 112 | }, |
|
| 113 | { |
|
| 114 | from: require.resolve( 'sass.js/dist/sass.worker.js' ), |
|
| 115 | to: './static' |
|
| 116 | }, |
|
| 117 | { |
|
| 118 | from: path.resolve( require.resolve( 'Buttons/scss/buttons.scss' ), '..' ), |
|
| 119 | to: './scss/color-palette-scss/buttons' |
|
| 120 | }, |
|
| 121 | { |
|
| 122 | from: srcDir + '/controls/color/scss/utilities/color-classes.sass', |
|
| 123 | to: './scss/color-palette-scss/classes/color-classes.scss' |
|
| 124 | } |
|
| 125 | ] ), |
|
| 126 | ||
| 127 | new webpack.HotModuleReplacementPlugin(), |
|
| 128 | ||
| 129 | new webpack.NamedModulesPlugin(), |
|
| 130 | ||
| 131 | // new StyleLintPlugin( { |
|
| 132 | // files: [ '**/*.s?(c)ss' ] |
|
| 133 | // } ), |
|
| 134 | ||
| 135 | new HtmlWebpackPlugin( { |
|
| 136 | template: path.join( srcDir, 'index.ejs' ), |
|
| 137 | path: path.resolve( __dirname, '..', 'dist' ), |
|
| 138 | filename: 'index.html' |
|
| 139 | } ) |
|
| 140 | ] |
|
| 141 | }; |
|
| 142 | ||
