feat(webpack): create basic production and dev config

pull/2670/head
Chaim Lev-Ari 2018-11-01 10:29:51 +02:00
parent bedeb3e354
commit c52eb28b79
6 changed files with 149 additions and 118 deletions

View File

@ -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"

View File

@ -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');

View File

@ -0,0 +1,4 @@
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
module.exports = webpackMerge(commonConfig);

121
webpack/webpack.common.js Normal file
View File

@ -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
}
}
}
}
};

View File

@ -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
}
});

View File

@ -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"