diff options
Diffstat (limited to 'webpack.config.js')
-rw-r--r-- | webpack.config.js | 68 |
1 files changed, 36 insertions, 32 deletions
diff --git a/webpack.config.js b/webpack.config.js index 602147e5..a73758cc 100644 --- a/webpack.config.js +++ b/webpack.config.js | |||
@@ -2,26 +2,21 @@ const path = require('path'); | |||
2 | const glob = require('glob'); | 2 | const glob = require('glob'); |
3 | 3 | ||
4 | // Minify JS | 4 | // Minify JS |
5 | const MinifyPlugin = require('babel-minify-webpack-plugin'); | 5 | const TerserPlugin = require('terser-webpack-plugin'); |
6 | 6 | ||
7 | // This plugin extracts the CSS into its own file instead of tying it with the JS. | 7 | // This plugin extracts the CSS into its own file instead of tying it with the JS. |
8 | // It prevents: | 8 | // It prevents: |
9 | // - not having styles due to a JS error | 9 | // - not having styles due to a JS error |
10 | // - the flash page without styles during JS loading | 10 | // - the flash page without styles during JS loading |
11 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); | 11 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); |
12 | 12 | ||
13 | const extractCssDefault = new ExtractTextPlugin({ | 13 | const extractCss = new MiniCssExtractPlugin({ |
14 | filename: "../css/[name].min.css", | 14 | filename: "../css/[name].min.css", |
15 | publicPath: 'tpl/default/css/', | ||
16 | }); | ||
17 | |||
18 | const extractCssVintage = new ExtractTextPlugin({ | ||
19 | filename: "../css/[name].min.css", | ||
20 | publicPath: 'tpl/vintage/css/', | ||
21 | }); | 15 | }); |
22 | 16 | ||
23 | module.exports = [ | 17 | module.exports = [ |
24 | { | 18 | { |
19 | mode: 'production', | ||
25 | entry: { | 20 | entry: { |
26 | thumbnails: './assets/common/js/thumbnails.js', | 21 | thumbnails: './assets/common/js/thumbnails.js', |
27 | thumbnails_update: './assets/common/js/thumbnails-update.js', | 22 | thumbnails_update: './assets/common/js/thumbnails-update.js', |
@@ -45,23 +40,23 @@ module.exports = [ | |||
45 | loader: 'babel-loader', | 40 | loader: 'babel-loader', |
46 | options: { | 41 | options: { |
47 | presets: [ | 42 | presets: [ |
48 | 'babel-preset-env', | 43 | '@babel/preset-env', |
49 | ] | 44 | ] |
50 | } | 45 | } |
51 | } | 46 | } |
52 | }, | 47 | }, |
53 | { | 48 | { |
54 | test: /\.s?css/, | 49 | test: /\.s?css/, |
55 | use: extractCssDefault.extract({ | 50 | use: [ |
56 | use: [{ | 51 | { |
57 | loader: "css-loader", | 52 | loader: MiniCssExtractPlugin.loader, |
58 | options: { | 53 | options: { |
59 | minimize: true, | 54 | publicPath: 'tpl/default/css/', |
60 | } | 55 | }, |
61 | }, { | 56 | }, |
62 | loader: "sass-loader" | 57 | 'css-loader', |
63 | }], | 58 | 'sass-loader', |
64 | }) | 59 | ], |
65 | }, | 60 | }, |
66 | { | 61 | { |
67 | test: /\.(gif|png|jpe?g|svg|ico)$/i, | 62 | test: /\.(gif|png|jpe?g|svg|ico)$/i, |
@@ -81,17 +76,21 @@ module.exports = [ | |||
81 | options: { | 76 | options: { |
82 | name: '../fonts/[name].[ext]', | 77 | name: '../fonts/[name].[ext]', |
83 | // do not add a publicPath here because it's already handled by CSS's publicPath | 78 | // do not add a publicPath here because it's already handled by CSS's publicPath |
84 | publicPath: '', | 79 | publicPath: '../default/', |
85 | } | 80 | } |
86 | }, | 81 | }, |
87 | ], | 82 | ], |
88 | }, | 83 | }, |
84 | optimization: { | ||
85 | minimize: true, | ||
86 | minimizer: [new TerserPlugin()], | ||
87 | }, | ||
89 | plugins: [ | 88 | plugins: [ |
90 | new MinifyPlugin(), | 89 | extractCss, |
91 | extractCssDefault, | ||
92 | ], | 90 | ], |
93 | }, | 91 | }, |
94 | { | 92 | { |
93 | mode: 'production', | ||
95 | entry: { | 94 | entry: { |
96 | shaarli: [ | 95 | shaarli: [ |
97 | './assets/vintage/js/base.js', | 96 | './assets/vintage/js/base.js', |
@@ -115,21 +114,23 @@ module.exports = [ | |||
115 | loader: 'babel-loader', | 114 | loader: 'babel-loader', |
116 | options: { | 115 | options: { |
117 | presets: [ | 116 | presets: [ |
118 | 'babel-preset-env', | 117 | '@babel/preset-env', |
119 | ] | 118 | ] |
120 | } | 119 | } |
121 | } | 120 | } |
122 | }, | 121 | }, |
123 | { | 122 | { |
124 | test: /\.css$/, | 123 | test: /\.css$/, |
125 | use: extractCssVintage.extract({ | 124 | use: [ |
126 | use: [{ | 125 | { |
127 | loader: "css-loader", | 126 | loader: MiniCssExtractPlugin.loader, |
128 | options: { | 127 | options: { |
129 | minimize: true, | 128 | publicPath: 'tpl/vintage/css/', |
130 | } | 129 | }, |
131 | }], | 130 | }, |
132 | }) | 131 | 'css-loader', |
132 | 'sass-loader', | ||
133 | ], | ||
133 | }, | 134 | }, |
134 | { | 135 | { |
135 | test: /\.(gif|png|jpe?g|svg|ico)$/i, | 136 | test: /\.(gif|png|jpe?g|svg|ico)$/i, |
@@ -145,9 +146,12 @@ module.exports = [ | |||
145 | }, | 146 | }, |
146 | ], | 147 | ], |
147 | }, | 148 | }, |
149 | optimization: { | ||
150 | minimize: true, | ||
151 | minimizer: [new TerserPlugin()], | ||
152 | }, | ||
148 | plugins: [ | 153 | plugins: [ |
149 | new MinifyPlugin(), | 154 | extractCss, |
150 | extractCssVintage, | ||
151 | ], | 155 | ], |
152 | }, | 156 | }, |
153 | ]; | 157 | ]; |