Skip to content

Commit be3c0b8

Browse files
pspgbhupspgbhu
committed
feat: support dynamic import
1 parent af3a976 commit be3c0b8

File tree

10 files changed

+247
-178
lines changed

10 files changed

+247
-178
lines changed

‎bin/www

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ require('babel-register')({
1313
'stage-2',
1414
],
1515
plugins: [
16+
'dynamic-import-node',
1617
['transform-runtime', {
1718
polyfill: false,
1819
regenerator: true,

‎build/webpack.base.js

+76-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,25 @@
11
const path = require('path');
2+
const devMode = process.env.NODE_ENV !== 'production';
3+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4+
const autoprefixer = require('autoprefixer');
5+
6+
const postcssOpts = {
7+
ident: 'postcss',
8+
plugins: () => [
9+
require('postcss-flexbugs-fixes'),
10+
autoprefixer({
11+
browsers: [
12+
'>1%',
13+
'Android > 4',
14+
'iOS > 7',
15+
'last 4 versions',
16+
'Firefox ESR',
17+
'not ie < 9', // React doesn't support IE8 anyway
18+
],
19+
flexbox: 'no-2009',
20+
}),
21+
],
22+
};
223

324
const config = {
425
entry: {
@@ -21,9 +42,59 @@ const config = {
2142
'react',
2243
'stage-2'
2344
],
45+
plugins: [
46+
'syntax-dynamic-import',
47+
],
2448
},
2549
},
26-
50+
{
51+
test: /\.css$/,
52+
use: [
53+
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
54+
{
55+
loader: 'css-loader',
56+
options: { importLoaders: 1 },
57+
},
58+
{
59+
loader: 'postcss-loader',
60+
options: postcssOpts,
61+
},
62+
],
63+
},
64+
{
65+
test: /\.less$/,
66+
use: [
67+
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
68+
{
69+
loader: 'css-loader',
70+
options: { importLoaders: 1 },
71+
},
72+
{
73+
loader: 'postcss-loader',
74+
options: postcssOpts,
75+
},
76+
{
77+
loader: 'less-loader',
78+
},
79+
],
80+
},
81+
{
82+
test: /\.(sass|scss)$/,
83+
use: [
84+
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
85+
{
86+
loader: 'css-loader',
87+
options: { importLoaders: 1 },
88+
},
89+
{
90+
loader: 'postcss-loader',
91+
options: postcssOpts,
92+
},
93+
{
94+
loader: 'sass-loader',
95+
},
96+
],
97+
},
2798
{
2899
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
29100
loader: 'url-loader',
@@ -52,6 +123,10 @@ const config = {
52123
},
53124

54125
plugins: [
126+
new MiniCssExtractPlugin({
127+
filename: 'css/style.css',
128+
chunkFilename: 'css/[name].css',
129+
}),
55130
],
56131
};
57132

‎build/webpack.dev.js

-74
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,6 @@ const baseConfig = require('./webpack.base');
1010
// ].concat(baseConfig.entry[name]);
1111
// });
1212

13-
const postcssOpts = {
14-
ident: 'postcss',
15-
plugins: () => [
16-
require('postcss-flexbugs-fixes'),
17-
autoprefixer({
18-
browsers: [
19-
'>1%',
20-
'Android > 4',
21-
'iOS > 7',
22-
'last 4 versions',
23-
'Firefox ESR',
24-
'not ie < 9', // React doesn't support IE8 anyway
25-
],
26-
flexbox: 'no-2009',
27-
}),
28-
],
29-
};
30-
3113
const config = merge(baseConfig, {
3214
mode: 'development',
3315

@@ -38,62 +20,6 @@ const config = merge(baseConfig, {
3820
},
3921

4022
devtool: 'cheap-module-source-map',
41-
42-
module: {
43-
rules: [
44-
{
45-
test: /\.css$/,
46-
use: [
47-
'style-loader',
48-
{
49-
loader: 'css-loader',
50-
options: { importLoaders: 1 },
51-
},
52-
{
53-
loader: 'postcss-loader',
54-
options: postcssOpts,
55-
},
56-
],
57-
},
58-
{
59-
test: /\.less$/,
60-
use: [
61-
'style-loader',
62-
{
63-
loader: 'css-loader',
64-
options: { importLoaders: 1 },
65-
},
66-
{
67-
loader: 'postcss-loader',
68-
options: postcssOpts,
69-
},
70-
{
71-
loader: 'less-loader',
72-
},
73-
],
74-
},
75-
{
76-
test: /\.(sass|scss)$/,
77-
use: [
78-
'style-loader',
79-
{
80-
loader: 'css-loader',
81-
options: { importLoaders: 1 },
82-
},
83-
{
84-
loader: 'postcss-loader',
85-
options: postcssOpts,
86-
},
87-
{
88-
loader: 'sass-loader',
89-
},
90-
],
91-
},
92-
],
93-
},
94-
95-
plugins: [
96-
],
9723
});
9824

9925
module.exports = config;

‎build/webpack.prod.js

+53-65
Original file line numberDiff line numberDiff line change
@@ -12,81 +12,69 @@ const config = merge(baseConfig, {
1212
path: path.resolve(__dirname, '../server/public'),
1313
filename: 'js/[name].js',
1414
publicPath: '/',
15-
},
16-
17-
module: {
18-
rules: [
19-
{
20-
test: /\.(css)$/,
21-
loader: ExtractTextPlugin.extract(extracter()),
22-
},
23-
{
24-
test: /\.(less)$/,
25-
loader: ExtractTextPlugin.extract(extracter({
26-
loader: require.resolve('less-loader'),
27-
})),
28-
},
29-
{
30-
test: /\.(sass|scss)$/,
31-
loader: ExtractTextPlugin.extract(extracter({
32-
loader: require.resolve('sass-loader'),
33-
})),
34-
},
35-
],
15+
chunkFilename: 'js/[name].js',
3616
},
3717

3818
plugins: [
3919
new UglifyJSPlugin(),
40-
41-
new ExtractTextPlugin({
42-
filename: 'css/style.css',
43-
}),
4420
],
45-
});
46-
4721

48-
function extracter(loader) {
49-
const cfg = {
50-
fallback: {
51-
loader: 'style-loader',
52-
options: {
53-
hmr: false,
54-
},
55-
},
56-
use: [
57-
{
58-
loader: require.resolve('css-loader'),
59-
options: { importLoaders: 1, minimize: true },
60-
},
61-
{
62-
loader: require.resolve('postcss-loader'),
63-
options: {
64-
ident: 'postcss',
65-
plugins: () => [
66-
require('postcss-flexbugs-fixes'),
67-
autoprefixer({
68-
browsers: [
69-
'>1%',
70-
'Android > 4',
71-
'iOS > 7',
72-
'last 4 versions',
73-
'Firefox ESR',
74-
'not ie < 9', // React doesn't support IE8 anyway
75-
],
76-
flexbox: 'no-2009',
77-
}),
78-
],
22+
optimization: {
23+
splitChunks: {
24+
cacheGroups: {
25+
common: {
26+
name: 'vendors',
27+
test: /[\\/]node_modules[\\/]/,
28+
chunks: 'initial',
7929
},
8030
},
81-
],
82-
};
31+
},
32+
},
33+
34+
});
35+
36+
// function extracter(loader) {
37+
// const cfg = {
38+
// fallback: {
39+
// loader: 'style-loader',
40+
// options: {
41+
// hmr: false,
42+
// },
43+
// },
44+
// use: [
45+
// {
46+
// loader: require.resolve('css-loader'),
47+
// options: { importLoaders: 1, minimize: true },
48+
// },
49+
// {
50+
// loader: require.resolve('postcss-loader'),
51+
// options: {
52+
// ident: 'postcss',
53+
// plugins: () => [
54+
// require('postcss-flexbugs-fixes'),
55+
// autoprefixer({
56+
// browsers: [
57+
// '>1%',
58+
// 'Android > 4',
59+
// 'iOS > 7',
60+
// 'last 4 versions',
61+
// 'Firefox ESR',
62+
// 'not ie < 9', // React doesn't support IE8 anyway
63+
// ],
64+
// flexbox: 'no-2009',
65+
// }),
66+
// ],
67+
// },
68+
// },
69+
// ],
70+
// };
8371

84-
if (loader) {
85-
cfg.use.push(loader);
86-
}
72+
// if (loader) {
73+
// cfg.use.push(loader);
74+
// }
8775

88-
return cfg;
89-
}
76+
// return cfg;
77+
// }
9078

9179

9280
module.exports = config;

0 commit comments

Comments
 (0)