Skip to content

Commit 2414a8f

Browse files
reznordreznord
authored
Merge pull request #564 from developit/next-hrmny-webpack4
webpack4
2 parents bc0678e + c0516b4 commit 2414a8f

File tree

10 files changed

+1651
-933
lines changed

10 files changed

+1651
-933
lines changed

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
"test": "eslint packages && lerna run test"
66
},
77
"devDependencies": {
8-
"babel-eslint": "^8.2.2",
8+
"babel-eslint": "^8.2.3",
99
"eslint": "^4.19.1",
1010
"eslint-plugin-react": "^7.7.0",
1111
"jest": "^22.4.3",
12-
"lerna": "^2.10.0",
13-
"puppeteer": "^1.2.0"
12+
"lerna": "^2.11.0",
13+
"puppeteer": "^1.3.0"
1414
}
1515
}

‎packages/cli/lib/lib/babel-config.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ module.exports = function (env, options={}) {
2727
require.resolve('babel-plugin-transform-react-constant-elements'),
2828
isProd && require.resolve('babel-plugin-transform-react-remove-prop-types'),
2929
[require.resolve('babel-plugin-transform-react-jsx'), { pragma: 'h' }],
30-
[require.resolve('babel-plugin-jsx-pragmatic'), {
31-
module: 'preact',
32-
export: 'h',
33-
import: 'h'
34-
}]
30+
// [require.resolve('babel-plugin-jsx-pragmatic'), {
31+
// module: 'preact',
32+
// export: 'h',
33+
// import: 'h'
34+
// }]
3535
].filter(Boolean)
3636
};
3737
};

‎packages/cli/lib/lib/webpack/push-manifest.js

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
module.exports = class PushManifestPlugin {
22
apply(compiler) {
33
compiler.plugin('emit', function(compilation, callback) {
4-
let routes = [], mainJs, mainCss;
4+
let mainJs, mainCss, scripts=[], styles=[];
55

66
for (let filename in compilation.assets) {
77
if (!/\.map$/.test(filename)) {
88
if (/route-/.test(filename)) {
9-
routes.push(filename);
10-
} else if (/^style(.+)\.css$/.test(filename)) {
9+
scripts.push(filename);
10+
} else if (/chunk\.(.+)\.css$/.test(filename)) {
11+
styles.push(filename);
12+
} else if (/^bundle(.+)\.css$/.test(filename)) {
1113
mainCss = filename;
1214
} else if (/^bundle(.+)\.js$/.test(filename)) {
1315
mainJs = filename;
@@ -29,14 +31,14 @@ module.exports = class PushManifestPlugin {
2931
'/': defaults
3032
};
3133

32-
routes.forEach(filename => {
33-
let path = filename.replace(/route-/, '/').replace(/\.chunk(\.\w+)?\.js$/, '').replace(/\/home/, '/');
34-
manifest[path] = Object.assign({}, defaults, {
35-
[filename]: {
36-
type: 'script',
37-
weight: 0.9
38-
}
39-
});
34+
let path, css, obj;
35+
scripts.forEach((filename, idx) => {
36+
css = styles[idx];
37+
obj = Object.assign({}, defaults);
38+
obj[filename] = { type:'script', weight:0.9 };
39+
if (css) obj[css] = { type:'style', weight:0.9 };
40+
path = filename.replace(/route-/, '/').replace(/\.chunk(\.\w+)?\.js$/, '').replace(/\/home/, '/');
41+
manifest[path] = obj;
4042
});
4143

4244
let output = JSON.stringify(manifest);

‎packages/cli/lib/lib/webpack/run-webpack.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@ async function devBuild(env) {
2222
let compiler = webpack(config);
2323
return new Promise((res, rej) => {
2424
compiler.plugin('emit', (compilation, callback) => {
25-
var missingDeps = compilation.missingDependencies;
26-
var nodeModulesPath = resolve(__dirname, '../../../node_modules');
25+
let missingDeps = compilation.missingDependencies;
26+
let nodeModulesPath = resolve(__dirname, '../../../node_modules');
2727

2828
// ...tell webpack to watch node_modules recursively until they appear.
29-
if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
29+
if (Array.from(missingDeps).some(file => file.indexOf(nodeModulesPath) !== -1)) {
3030
compilation.contextDependencies.push(nodeModulesPath);
3131
}
3232

‎packages/cli/lib/lib/webpack/transform-config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ module.exports = async function (env, config, ssr=false) {
1616
}
1717

1818
require('babel-register')({
19-
presets: [require.resolve('babel-preset-env')]
19+
presets: [[require.resolve('babel-preset-env'), {
20+
"targets": { "node": "current" }
21+
}]]
2022
});
2123
const m = require(myConfig);
2224
const transformer = m && m.default || m;

‎packages/cli/lib/lib/webpack/webpack-base-config.js

Lines changed: 50 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const { resolve } = require('path');
33
const { readFileSync } = require('fs');
44
const autoprefixer = require('autoprefixer');
55
const requireRelative = require('require-relative');
6-
const ExtractTextPlugin = require('extract-text-webpack-plugin');
6+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
77
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
88
const ReplacePlugin = require('webpack-plugin-replace');
99
const createBabelConfig = require('../babel-config');
@@ -67,7 +67,7 @@ module.exports = function (env) {
6767
},
6868

6969
module: {
70-
loaders: [
70+
rules: [
7171
{ // ES2015
7272
enforce: 'pre',
7373
test: /\.jsx?$/,
@@ -134,54 +134,50 @@ module.exports = function (env) {
134134
source('components'),
135135
source('routes')
136136
],
137-
loader: ExtractTextPlugin.extract({
138-
fallback: 'style-loader',
139-
use: [
140-
{
141-
loader: 'css-loader',
142-
options: {
143-
modules: true,
144-
localIdentName: '[local]__[hash:base64:5]',
145-
importLoaders: 1,
146-
sourceMap: isProd
147-
}
148-
},
149-
{
150-
loader: 'postcss-loader',
151-
options: {
152-
ident: 'postcss',
153-
sourceMap: true,
154-
plugins: [autoprefixer({ browsers })]
155-
}
137+
use: [
138+
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
139+
{
140+
loader: 'css-loader',
141+
options: {
142+
modules: true,
143+
localIdentName: '[local]__[hash:base64:5]',
144+
importLoaders: 1,
145+
sourceMap: isProd
156146
}
157-
]
158-
})
147+
},
148+
{
149+
loader: 'postcss-loader',
150+
options: {
151+
ident: 'postcss',
152+
sourceMap: true,
153+
plugins: [autoprefixer({ browsers })]
154+
}
155+
}
156+
]
159157
},
160158
{ // External / `node_module` styles
161159
test: /\.(css|less|s[ac]ss|styl)$/,
162160
exclude: [
163161
source('components'),
164162
source('routes')
165163
],
166-
loader: ExtractTextPlugin.extract({
167-
fallback: 'style-loader',
168-
use: [
169-
{
170-
loader: 'css-loader',
171-
options: {
172-
sourceMap: isProd
173-
}
174-
},
175-
{
176-
loader: 'postcss-loader',
177-
options: {
178-
ident: 'postcss',
179-
sourceMap: true,
180-
plugins: [autoprefixer({ browsers })]
181-
}
164+
use: [
165+
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
166+
{
167+
loader: 'css-loader',
168+
options: {
169+
sourceMap: isProd
182170
}
183-
]
184-
})
171+
},
172+
{
173+
loader: 'postcss-loader',
174+
options: {
175+
ident: 'postcss',
176+
sourceMap: true,
177+
plugins: [autoprefixer({ browsers })]
178+
}
179+
}
180+
],
185181
},
186182
{ // Arbitrary file loaders
187183
test: /\.json$/,
@@ -200,19 +196,13 @@ module.exports = function (env) {
200196

201197
plugins: [
202198
new webpack.NoEmitOnErrorsPlugin(),
203-
new webpack.DefinePlugin({
204-
'process.env.NODE_ENV': JSON.stringify(isProd ? 'production' : 'development')
199+
new webpack.ProvidePlugin({
200+
h: ['preact', 'h'],
205201
}),
206202
// Extract CSS
207-
new ExtractTextPlugin({
208-
filename: isProd ? 'style.[contenthash:5].css' : 'style.css',
209-
disable: !isProd,
210-
allChunks: true
211-
}),
212-
new webpack.optimize.CommonsChunkPlugin({
213-
children: true,
214-
async: false,
215-
minChunks: 3
203+
new MiniCssExtractPlugin({
204+
filename: isProd ? "[name].[contenthash:5].css" : "[name].css",
205+
chunkFilename: isProd ? "[id].chunk.[contenthash:5].css" : "[id].chunk.css"
216206
}),
217207
new ProgressBarPlugin({
218208
format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m',
@@ -235,6 +225,14 @@ module.exports = function (env) {
235225
})
236226
] : []),
237227

228+
optimization: {
229+
splitChunks: {
230+
minChunks: 3,
231+
},
232+
},
233+
234+
mode: isProd ? 'production' : 'development',
235+
238236
devtool: isProd ? 'source-map' : 'cheap-module-eval-source-map',
239237

240238
node: {

‎packages/cli/lib/lib/webpack/webpack-client-config.js

Lines changed: 51 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ const merge = require('webpack-merge');
55
const { filter } = require('minimatch');
66
const CopyWebpackPlugin = require('copy-webpack-plugin');
77
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
8+
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
9+
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
810
const RenderHTMLPlugin = require('./render-html-plugin');
911
const PushManifestPlugin = require('./push-manifest');
1012
const baseConfig = require('./webpack-base-config');
@@ -45,7 +47,7 @@ function clientConfig(env) {
4547

4648
// automatic async components :)
4749
module: {
48-
loaders: [
50+
rules: [
4951
{
5052
test: /\.jsx?$/,
5153
include: [
@@ -103,45 +105,56 @@ function isProd(config) {
103105
}, config.pkg.performance),
104106

105107
plugins: [
106-
new webpack.optimize.UglifyJsPlugin({
107-
output: { comments:false },
108-
mangle: true,
109-
sourceMap: true,
110-
compress: {
111-
properties: true,
112-
keep_fargs: false,
113-
pure_getters: true,
114-
collapse_vars: true,
115-
warnings: false,
116-
screw_ie8: true,
117-
sequences: true,
118-
dead_code: true,
119-
drop_debugger: true,
120-
comparisons: true,
121-
conditionals: true,
122-
evaluate: true,
123-
booleans: true,
124-
loops: true,
125-
unused: true,
126-
hoist_funs: true,
127-
if_return: true,
128-
join_vars: true,
129-
cascade: true,
130-
drop_console: false,
131-
pure_funcs: [
132-
'classCallCheck',
133-
'_classCallCheck',
134-
'_possibleConstructorReturn',
135-
'Object.freeze',
136-
'invariant',
137-
'warning'
138-
]
139-
}
140-
}),
141108
new webpack.DefinePlugin({
142109
'process.env.ADD_SW': config.sw
143110
}),
144-
]
111+
],
112+
113+
optimization: {
114+
minimizer: [
115+
new UglifyJsPlugin({
116+
cache: true,
117+
parallel: true,
118+
uglifyOptions: {
119+
sourceMap: true,
120+
output: { comments:false },
121+
mangle: true,
122+
compress: {
123+
properties: true,
124+
keep_fargs: false,
125+
pure_getters: true,
126+
collapse_vars: true,
127+
warnings: false,
128+
// screw_ie8: true,
129+
sequences: true,
130+
dead_code: true,
131+
drop_debugger: true,
132+
comparisons: true,
133+
conditionals: true,
134+
evaluate: true,
135+
booleans: true,
136+
loops: true,
137+
unused: true,
138+
hoist_funs: true,
139+
if_return: true,
140+
join_vars: true,
141+
// cascade: true,
142+
drop_console: false,
143+
pure_funcs: [
144+
'classCallCheck',
145+
'_classCallCheck',
146+
'_possibleConstructorReturn',
147+
'Object.freeze',
148+
'invariant',
149+
'warning'
150+
]
151+
},
152+
},
153+
sourceMap: true,
154+
}),
155+
new OptimizeCssAssetsPlugin({}),
156+
],
157+
},
145158
};
146159

147160
if (config.sw) {
@@ -177,7 +190,7 @@ function isDev(config) {
177190

178191
devServer: {
179192
inline: true,
180-
hot:true,
193+
hot: true,
181194
compress: true,
182195
publicPath: '/',
183196
contentBase: src,

0 commit comments

Comments
 (0)