Skip to content

Commit 6a9c9d6

Browse files
jsorjsor
committed
Update npm dependencies and restructure asset handling
1 parent 4b37af9 commit 6a9c9d6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+8730
-4929
lines changed

‎config/webpack-dev-server.config.js‎

Lines changed: 56 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,82 @@
11
const path = require('path');
22

33
module.exports = {
4+
mode: 'development',
45
entry: [
5-
path.resolve(process.cwd(), 'theme/assets/promise-polyfill.js'),
6-
path.resolve(process.cwd(), 'theme/assets/main-critical.js'),
7-
path.resolve(process.cwd(), 'theme/assets/main.js')
6+
path.resolve(process.cwd(), 'theme/assets/index.js')
87
],
98
output: {
109
publicPath: 'http://localhost:8080/_assets/',
1110
filename: '[name].js',
1211
chunkFilename: '[id].js'
1312
},
13+
resolve: {
14+
extensions: ['.js', '.css', '.json']
15+
},
1416
module: {
17+
strictExportPresence: true,
1518
rules: [
1619
{
1720
test: /\.js$/,
18-
exclude: /node_modules/,
19-
use: ['babel-loader']
21+
use: [
22+
{
23+
loader: 'babel-loader',
24+
options: {
25+
cacheDirectory: true,
26+
babelrc: false,
27+
presets: [
28+
[
29+
'@babel/preset-env',
30+
{
31+
useBuiltIns: 'entry',
32+
modules: false,
33+
debug: false,
34+
}
35+
]
36+
],
37+
plugins: [
38+
'@babel/plugin-syntax-dynamic-import',
39+
]
40+
},
41+
},
42+
],
2043
},
2144
{
2245
test: /\.css$/,
2346
use: [
2447
'style-loader',
25-
'css-loader?importLoaders=1&minimize=true',
26-
'postcss-loader'
27-
]
48+
{
49+
loader: 'css-loader',
50+
options: {
51+
importLoaders: 1,
52+
minimize: false,
53+
}
54+
},
55+
{
56+
loader: 'postcss-loader',
57+
options: {
58+
plugins: [
59+
require('postcss-import')(),
60+
require('postcss-cssnext')(),
61+
require('postcss-flexbugs-fixes')()
62+
]
63+
}
64+
}
65+
],
2866
},
2967
{
30-
test: /\.(gif|png|jpe?g|svg)(\?.+)?$/,
31-
use: ['url-loader']
68+
test: /\.(gif|png|jpe?g|svg)$/i,
69+
use: [
70+
'file-loader',
71+
],
3272
},
3373
{
34-
test: /\.(eot|ttf|woff|woff2)(\?.+)?$/,
35-
use: ['url-loader']
36-
}
37-
]
74+
test: /\.(woff|woff2|eot|ttf|otf)$/,
75+
use: [
76+
'file-loader',
77+
],
78+
},
79+
],
3880
},
3981
devtool: 'eval',
4082
devServer: {

‎config/webpack.config.js‎

Lines changed: 113 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,120 @@
11
const path = require('path');
22
const webpack = require('webpack');
3-
const ExtractTextPlugin = require("extract-text-webpack-plugin");
3+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4+
const CleanWebpackPlugin = require('clean-webpack-plugin');
5+
const PostCSSAssetsPlugin = require('postcss-assets-webpack-plugin');
46
const ManifestPlugin = require('webpack-manifest-plugin');
57

6-
module.exports = {
7-
entry: {
8-
'main-critical': [
9-
path.resolve(process.cwd(), 'theme/assets/webpack-public-path.js'),
10-
path.resolve(process.cwd(), 'theme/assets/main-critical.js')
11-
],
12-
main: [
13-
path.resolve(process.cwd(), 'theme/assets/webpack-public-path.js'),
14-
path.resolve(process.cwd(), 'theme/assets/promise-polyfill.js'),
15-
path.resolve(process.cwd(), 'theme/assets/main.js')
16-
]
17-
},
18-
output: {
19-
path: path.resolve(process.cwd(), 'static-files/assets'),
20-
filename: '[name].[chunkhash].js',
21-
chunkFilename: '[name].[chunkhash].js'
22-
},
23-
module: {
24-
rules: [
25-
{
26-
test: /\.js$/,
27-
exclude: /node_modules/,
28-
use: ['babel-loader']
29-
},
30-
{
31-
test: /\.css$/,
32-
use: ExtractTextPlugin.extract({
33-
fallback: 'style-loader',
8+
module.exports = () => {
9+
const mode = 'production';
10+
const targetPath = path.resolve(process.cwd(), 'static-files/assets');
11+
12+
return {
13+
mode: mode,
14+
entry: {
15+
'main': [
16+
path.resolve(process.cwd(), 'theme/assets/webpack-public-path.js'),
17+
path.resolve(process.cwd(), 'theme/assets/index.js'),
18+
],
19+
},
20+
output: {
21+
path: path.resolve(process.cwd(), targetPath),
22+
filename: '[name].[contenthash].js',
23+
chunkFilename: '[name].[contenthash].js',
24+
},
25+
optimization: {
26+
runtimeChunk: 'single'
27+
},
28+
resolve: {
29+
extensions: ['.js', '.css', '.json']
30+
},
31+
module: {
32+
strictExportPresence: true,
33+
rules: [
34+
{
35+
test: /\.js$/,
36+
use: [
37+
{
38+
loader: 'babel-loader',
39+
options: {
40+
cacheDirectory: true,
41+
babelrc: false,
42+
presets: [
43+
[
44+
'@babel/preset-env',
45+
{
46+
useBuiltIns: 'entry',
47+
modules: false,
48+
debug: false,
49+
}
50+
]
51+
],
52+
plugins: [
53+
'@babel/plugin-syntax-dynamic-import',
54+
]
55+
},
56+
},
57+
],
58+
},
59+
{
60+
test: /\.css$/,
61+
use: [
62+
mode !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
63+
{
64+
loader: 'css-loader',
65+
options: {
66+
importLoaders: 1,
67+
minimize: false, // Minification done by the PostCSSAssetsPlugin
68+
}
69+
},
70+
{
71+
loader: 'postcss-loader',
72+
options: {
73+
plugins: [
74+
require('postcss-import')(),
75+
require('postcss-cssnext')(),
76+
require('postcss-flexbugs-fixes')()
77+
]
78+
}
79+
}
80+
],
81+
},
82+
{
83+
test: /\.(gif|png|jpe?g|svg)$/i,
84+
use: [
85+
'file-loader',
86+
],
87+
},
88+
{
89+
test: /\.(woff|woff2|eot|ttf|otf)$/,
3490
use: [
35-
'css-loader?importLoaders=1&minimize=true',
36-
'postcss-loader'
37-
]
38-
})
39-
},
40-
{
41-
test: /\.(gif|png|jpe?g|svg)(\?.+)?$/,
42-
use: ['file-loader']
43-
},
44-
{
45-
test: /\.(eot|ttf|woff|woff2)(\?.+)?$/,
46-
use: ['file-loader']
47-
}
91+
'file-loader',
92+
],
93+
},
94+
],
95+
},
96+
plugins: [
97+
new CleanWebpackPlugin([targetPath + '/*'], {
98+
root: process.cwd()
99+
}),
100+
// https://webpack.js.org/guides/caching/#module-identifiers
101+
new webpack.HashedModuleIdsPlugin(),
102+
new MiniCssExtractPlugin({
103+
filename: '[name].[contenthash].css',
104+
chunkFilename: '[name].[contenthash].css',
105+
}),
106+
new PostCSSAssetsPlugin({
107+
plugins: [
108+
require('cssnano')({
109+
preset: ['default', {
110+
discardComments: {
111+
removeAll: true,
112+
},
113+
}]
114+
}),
115+
],
116+
}),
117+
new ManifestPlugin(),
48118
]
49-
},
50-
plugins: [
51-
new ExtractTextPlugin('[name].[chunkhash].css'),
52-
new webpack.optimize.UglifyJsPlugin({
53-
output: {
54-
comments: false
55-
}
56-
}),
57-
new ManifestPlugin()
58-
]
119+
};
59120
};

0 commit comments

Comments
 (0)