I am working on a project that was initiated by preact-cli.
I have a build script that links my application. The webpack configuration is already defined in preact-cli globally, but I can change it from preact.config.js.
I checked that in preact-cli there is only one entry point, which is fine right now.
And there is one CommonsChunkPlugin. It has this configuration:
If I usually create an application with this configuration. I get a large package file.
So, I started adding my own CommonsChunkPlugin.
Preact provides a way to change webpack configurations. What is this
My preact.config.js:
export default (config, env, helpers) => {
let { rule } = helpers.getLoadersByName(config, 'babel-loader')[0];
let babelConfig = rule.options;
babelConfig.plugins.push('transform-decorators-legacy');
babelConfig.presets.push('flow');
config.plugins.push(new InterpolateHtmlPlugin(envs.raw));
config.plugins.push(new webpack.DefinePlugin(envs.stringified));
config.plugins.push(new WatchMissingNodeModulesPlugin(paths.appNodeModules));
rule.options.plugins.push('transform-regenerator');
rule.options.plugins.push(["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true
}]);
let htmlPlugin = helpers.getPluginsByName(config, 'HtmlWebpackPlugin')[0].plugin;
htmlPlugin.options.template = `!!ejs-loader!${path.resolve(__dirname, './template.html')}`;
htmlPlugin.options.title = "JApp";
htmlPlugin.options.manifest = Object.assign({}, {
name: 'JH',
short_name: 'JApp',
theme_color: '#007DC5'
});
let commonChunksPlugin = helpers.getPluginsByName(config, 'CommonsChunkPlugin')[0].plugin;
console.log(commonChunksPlugin);
if(process.env.NODE_ENV === "production") {
config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: ({ resource }) => (
resource !== undefined &&
resource.indexOf('node_modules') !== -1
),
}));
config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
name: 'preact-chunk',
filename: 'static/js/[name].[chunkhash:8].js',
minChunks: (m) => m.resource && /preact|preact-compat/.test(m.resource)
}));
config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
name: 'others-chunk',
filename: 'static/js/[name].[chunkhash:8].js',
minChunks: (m) => m.resource && /redux|preact-redux|redux-form|lodash|sane-email-validation|moment|core-decorators|lodash-decorators/.test(m.resource)
}));
config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
name: 'material-ui-chunk',
filename: 'static/js/[name].[chunkhash:8].js',
minChunks: (m) => m.resource && /material-design-lite|preact-mdl/.test(m.resource)
}));
config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
filename: 'static/js/[name].[chunkhash:8].js',
minChunks: Infinity,
}));
}
};
, 5 rom bundle.js. webpack, . , :
bundle.9b6d3.js:1 Uncaught ReferenceError: webpackJsonp is not defined
at bundle.9b6d3.js:1
, , manifest.js , bundle.js, script 'defer'. webpackJsonp manifest.js.
3 , ScriptExtHtmlWebpackPlugin preact-cli. :
, :
'ScriptExtHtmlWebpackPlugin' . , , , . preact.config.js:
let scriptPlugin = helpers.getPluginsByName(config, 'ScriptExtHtmlWebpackPlugin')[0].plugin;
scriptPlugin.options.defaultAttribute = 'async';
:
bootstrap b7b6d09314cc5ff6d290:54 Uncaught TypeError: Cannot read property 'call' of undefined
at n (bootstrap b7b6d09314cc5ff6d290:54)
at Object.<anonymous> (others-chunk.55912d9c.js:12)
at Object.E/bI (others-chunk.55912d9c.js:1207)
at n (bootstrap b7b6d09314cc5ff6d290:54)
at Object.JkW7 (bundle.9b6d3.js:18)
at n (bootstrap b7b6d09314cc5ff6d290:54)
at Object.pwNi (entry.js:13)
at n (bootstrap b7b6d09314cc5ff6d290:54)
at window.webpackJsonp (bootstrap b7b6d09314cc5ff6d290:25)
at bundle.9b6d3.js:1
script index.html :
<script defer="defer" src="/bundle.9b6d3.js"></script>
<script>window.fetch||document.write('<script src="/polyfills.d41d8.js"><\/script>')</script>
<script src="/static/js/manifest.d41d8cd9.js" async></script>
<script src="/static/js/others-chunk.55912d9c.js" async></script>
<script src="/static/js/preact-chunk.c2b64323.js" async></script>
<script src="/static/js/node-static.916ed24c.js" async></script>
- "", , , manifest.js , bundle.js. "HtmlWebpackPlugin".
htmlPlugin.options.chunksSortMode = function(entry1, entry2) {
if(entry1.names[0] === "manifest") return -1;
else return 1;
}
:
Uncaught ReferenceError: webpackJsonp is not defined
at bundle.9b6d3.js:1
index.html build :
<script defer="defer" src="/bundle.9b6d3.js"></script>
<script>window.fetch||document.write('<script src="/polyfills.d41d8.js"><\/script>')</script>
<script src="/static/js/manifest.d41d8cd9.js" defer="defer"></script>
<script src="/static/js/others-chunk.55912d9c.js" defer="defer"></script>
<script src="/static/js/preact-chunk.c2b64323.js" defer="defer"></script>
<script src="/static/js/node-static.916ed24c.js" defer="defer"></script>
. bundle.js.
preact-cli , manifest.js bundle.js. , :
<script src="/static/js/manifest.d41d8cd9.js" defer="defer"></script>
<script defer="defer" src="/bundle.9b6d3.js"></script>
<script>window.fetch||document.write('<script src="/polyfills.d41d8.js"><\/script>')</script>
<script src="/static/js/others-chunk.55912d9c.js" defer="defer"></script>
<script src="/static/js/preact-chunk.c2b64323.js" defer="defer"></script>
<script src="/static/js/node-static.916ed24c.js" defer="defer"></script>
:
Uncaught TypeError: Cannot read property 'call' of undefined
at n (bootstrap 4da816313a3eaaa2f964:54)
at window.webpackJsonp (bootstrap 4da816313a3eaaa2f964:25)
at bundle.9b6d3.js:1
, .