diff --git a/package.json b/package.json index 73f31c082..2f3c378a5 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,8 @@ "webpack": "^4.20.2", "webpack-build-notifier": "^0.1.30", "webpack-bundle-analyzer": "^3.0.3", - "webpack-cli": "^3.1.2" + "webpack-cli": "^3.1.2", + "webpack-merge": "^4.1.4" }, "resolutions": { "jquery": "^3.3.1" diff --git a/webpack.config.js b/webpack.config.js index bf3c97430..f706cb88d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,116 +1 @@ -const path = require('path'); -const { ProvidePlugin, ContextReplacementPlugin } = require('webpack'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const WebpackBuildNotifierPlugin = require('webpack-build-notifier'); -const CleanTerminalPlugin = require('clean-terminal-webpack-plugin'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const CleanWebpackPlugin = require('clean-webpack-plugin'); -const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); -const npmPackage = require('./package.json'); - -module.exports = { - entry: { - main: './app/__module.js' - }, - output: { - filename: '[name].[hash].js', - path: path.resolve(__dirname, 'dist/public') - }, - module: { - rules: [ - { - test: /\.js$/, - exclude: /node_modules/, - use: [ - 'babel-loader', - 'auto-ngtemplate-loader', - { - // enforce: 'pre', - loader: 'eslint-loader' - } - ] - }, - { - test: /\.html$/, - exclude: path.resolve(__dirname, './app/index.html'), - use: [ - { loader: 'ngtemplate-loader', options: { relativeTo: __dirname } }, - { loader: 'html-loader' } - ] - }, - { - test: /\.(woff|woff2|eot|ttf|svg|)$/, - use: [ - { - loader: 'url-loader', - options: { limit: 25000 } - } - ] - }, - { - test: /\.(ico|png|jpg|gif)$/, - use: [ - { - loader: 'url-loader', - options: { - limit: 25000 - } - } - ] - }, - { - test: /.xml$/, - use: 'file-loader' - }, - { - test: /\.css$/, - use: [MiniCssExtractPlugin.loader, 'css-loader?sourceMap'] - } - ] - }, - mode: 'development', - plugins: [ - new HtmlWebpackPlugin({ - template: './app/index.html', - templateParameters: { - name: npmPackage.name, - author: npmPackage.author - }, - manifest: './assets/ico/manifest.json' - }), - new WebpackBuildNotifierPlugin({ - title: 'Portainer build', - logo: path.resolve('./assets/favicon-32x32.png'), - suppressSuccess: true - }), - new CleanTerminalPlugin(), - new ProvidePlugin({ - $: 'jquery', - jQuery: 'jquery', - 'window.jQuery': 'jquery' - }), - new MiniCssExtractPlugin({ - // Options similar to the same options in webpackOptions.output - // both options are optional - filename: '[name].css', - chunkFilename: '[id].css', - sourceMap: true - }), - new CleanWebpackPlugin(['dist/public']), - new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/), - new BundleAnalyzerPlugin() - ], - optimization: { - splitChunks: { - cacheGroups: { - vendor: { - test: /node_modules/, - chunks: 'initial', - name: 'vendor', - priority: 10, - enforce: true - } - } - } - } -}; +module.exports = require('./webpack/webpack.develop'); diff --git a/webpack/proudction.config.js b/webpack/proudction.config.js new file mode 100644 index 000000000..33368971e --- /dev/null +++ b/webpack/proudction.config.js @@ -0,0 +1,4 @@ +const webpackMerge = require('webpack-merge'); +const commonConfig = require('./webpack.common.js'); + +module.exports = webpackMerge(commonConfig); \ No newline at end of file diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js new file mode 100644 index 000000000..3424b2024 --- /dev/null +++ b/webpack/webpack.common.js @@ -0,0 +1,121 @@ +const path = require('path'); +const { ProvidePlugin, ContextReplacementPlugin } = require('webpack'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const WebpackBuildNotifierPlugin = require('webpack-build-notifier'); +const CleanTerminalPlugin = require('clean-terminal-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const CleanWebpackPlugin = require('clean-webpack-plugin'); +// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); +const npmPackage = require('../package.json'); +const projectRoot = path.resolve( __dirname, '..'); + +module.exports = { + entry: { + main: './app/__module.js' + }, + output: { + filename: '[name].[hash].js', + path: path.resolve(projectRoot, 'dist/public') + }, + module: { + rules: [ + { + test: /\.js$/, + exclude: /node_modules/, + use: [ + 'babel-loader', + 'auto-ngtemplate-loader', + { + // enforce: 'pre', + loader: 'eslint-loader' + } + ] + }, + { + test: /\.html$/, + exclude: path.resolve(projectRoot, './app/index.html'), + use: [ + { + loader: 'ngtemplate-loader', + options: { + relativeTo: projectRoot + } + }, + { loader: 'html-loader' } + ] + }, + { + test: /\.(woff|woff2|eot|ttf|svg|)$/, + use: [ + { + loader: 'url-loader', + options: { limit: 25000 } + } + ] + }, + { + test: /\.(ico|png|jpg|gif)$/, + use: [ + { + loader: 'url-loader', + options: { + limit: 25000 + } + } + ] + }, + { + test: /.xml$/, + use: 'file-loader' + }, + { + test: /\.css$/, + use: [MiniCssExtractPlugin.loader, 'css-loader?sourceMap'] + } + ] + }, + plugins: [ + new HtmlWebpackPlugin({ + template: './app/index.html', + templateParameters: { + name: npmPackage.name, + author: npmPackage.author + }, + manifest: './assets/ico/manifest.json' + }), + new WebpackBuildNotifierPlugin({ + title: 'Portainer build', + logo: path.resolve('./assets/favicon-32x32.png'), + suppressSuccess: true + }), + new CleanTerminalPlugin(), + new ProvidePlugin({ + $: 'jquery', + jQuery: 'jquery', + 'window.jQuery': 'jquery' + }), + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: '[name].css', + chunkFilename: '[id].css', + sourceMap: true + }), + new CleanWebpackPlugin(['dist/public']), + new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/) + // new BundleAnalyzerPlugin() + ], + optimization: { + splitChunks: { + cacheGroups: { + vendor: { + test: /node_modules/, + chunks: 'initial', + name: 'vendor', + priority: 10, + enforce: true + } + } + } + } +}; diff --git a/webpack/webpack.develop.js b/webpack/webpack.develop.js new file mode 100644 index 000000000..179faa9b9 --- /dev/null +++ b/webpack/webpack.develop.js @@ -0,0 +1,13 @@ +const path = require('path'); +const webpackMerge = require('webpack-merge'); +const commonConfig = require('./webpack.common.js'); + +module.exports = webpackMerge(commonConfig, { + // devtool: 'cheap-module-source-map', + mode: 'development', + devServer: { + contentBase: path.join(__dirname, '.tmp'), + compress: true, + port: 90000 + } +}); diff --git a/yarn.lock b/yarn.lock index 9651bf306..bd9ca6b86 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5591,7 +5591,7 @@ lodash@^4.17.10: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7" integrity sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg== -lodash@^4.17.3, lodash@~4.17.4: +lodash@^4.17.3, lodash@^4.17.5, lodash@~4.17.4: version "4.17.11" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== @@ -9167,6 +9167,13 @@ webpack-cli@^3.1.2: v8-compile-cache "^2.0.2" yargs "^12.0.2" +webpack-merge@^4.1.4: + version "4.1.4" + resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.4.tgz#0fde38eabf2d5fd85251c24a5a8c48f8a3f4eb7b" + integrity sha512-TmSe1HZKeOPey3oy1Ov2iS3guIZjWvMT2BBJDzzT5jScHTjVC3mpjJofgueEzaEd6ibhxRDD6MIblDr8tzh8iQ== + dependencies: + lodash "^4.17.5" + webpack-sources@^1.1.0, webpack-sources@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"