-
-
Notifications
You must be signed in to change notification settings - Fork 623
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Extended help section for standard webpack #626
Conversation
@bigopon That's an excellent documentation. Well done. You may also want to add in section 8) Reminder another point to: |
const CopyWebpackPlugin = require('copy-webpack-plugin'); | ||
const AureliaWebpackPlugin = require('aurelia-webpack-plugin'); | ||
const WebpackMd5Hash = require('webpack-md5-hash'); | ||
const DefinePlugin = require('webpack/lib/DefinePlugin'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
require('webpack/lib/DefinePlugin')
is redundant. Use new webpack.DefinePlugin(
for the same effect.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed. Thanks for pointing that out. I also commented out cssnano, but still leave it there just as reminder
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@bigopon thanks for writing this! I really appreciate the markup.... following your instructions I noticed an error with the commands:
webpack build: 2.1.0.beta-23 should be 2.1.0-beta.23
npm install webpack-dev-server@2.1.0.beta-0 --save-dev should be 2.1.0-beta.0
Also need to:
const DefinePlugin = require('webpack/lib/DefinePlugin');
as webpack wont load with out it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah just realized that, fixed 👍
Also changed webpack version to beta.25
@boazblake did it work for you ? Did you also change new DefinePlugin()
to new webpack.DefinePlugin()
, this way we don't need to require a module inside webpack
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thats what it was! ...
however, after adding that I now see html-minifier-loader
issues:
Module not found: Error: Can't resolve 'html-minifier-loader'
but even
npm install html-minifier html-minifier-loader --save
still resulted in:
ERROR in ./~/html-minifier/~/uglify-js/tools/node.js
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah sorry, I fixed that after your comment, shoulda pointed out. I'll check the html-minifier-loader
. Don't know why it works for me. Can you try to comment out the line
minifyJS: true
in 'html-minifier-loader' configs and check again ?
Edit: did you install its dependency: html-minifier
? Sorry I missed several things
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did as you suggested regarding commenting out minifyJS and still have this error:
ERROR in ./~/html-minifier/~/uglify-js/tools/node.js Module not found: Error: Can't resolve 'fs' in '/Users/Boaz/Desktop/aurelia_webpack_skel/node_modules/html-minifier/node_modules/uglify-js/tools' @ ./~/html-minifier/~/uglify-js/tools/node.js 8:9-22 @ ./~/html-minifier/src/htmlminifier.js @ ./src ^\.\/.*$ @ ./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js @ multi aurelia
I went through the directions and webpack.config line by line so its more than likely I made a mistake or typo... I will copy and paste your code in the morning and let you know.
I really appreciate the help and your hard work!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I guess that's some loaders loading content asynchronously:
A suggested fix for that is to add:
node: {
fs: "empty"
},
to your base config object.
@boazblake I also updated the first section about dependencies to make it clearer
May i suggest to use const metadata = {
...
HMR: process.argv.join('').indexOf('hot') >= 0 || !!process.env.WEBPACK_HMR and delete the very first line: const hasProcessFlag = flag => process.argv.join('').indexOf(flag) > -1; |
@nashwaan Fixed 👍 . I was not sure if any other flags should be used so I extracted it to a separate function after inline-ing it. Originally copied from @boazblake I also added a section to guide how to use aurelia plugins. Hope it helps |
Thank you for your help! So far I am still getting the same |
@bigopon Apart from this typo, point 3 provides a workaround if the aurelia plugin itself has improper |
Typo fixed. I don't think it's the best idea to put in official document about plugins, but future plugin may have that problem and i think it's quite necessary to let other developers know. What do you suggest @nashwaan ? |
Ideally, the user should not be bothered about properly configuring Probably, the source of the problem is we don't have A Plugin Author section in the docs as mentioned here. I guess that's why such a problem exists in the first place and quite possibly will grow more. Until a doc for developing a plugin is provided, then I think it is ok to keep the information you mentioned in section 9.3 as a workaround solution. |
@bigopon |
@bigopon In webpack 2, It is no longer necessary to manually eat up the string after the extension in test: /\.(png|jpe?g|gif|svg|eot|woff|woff2|ttf)(\?\S*)?$/, Can be safely removed: test: /\.(png|jpe?g|gif|svg|eot|woff|woff2|ttf)$/, |
@bigopon , you mentioned in the NOTE of this page:
Another solution will be (from Webpack from First Principles see at 13:10) to ensure the css, which transformed into javascript, is loaded in the new HtmlWebpackPlugin({
inject: 'head', // to ensure css styles are inserted into <head> before processing <body>
title: title,
template: 'index.html',
chunksSortMode: 'dependency'
}), And if this solves the problem, will this make |
@boazblake glad that it worked for you @nashwaan I separated the guide into basic and advanced sections. It does look simpler to start with and more beginner friendly. All of your suggestions have been added. For loading style in a |
Looking at the basic version. Hmmm, I was thinking of even simpler version. A minimal version with no gadgets, no debug, no optimizations, and not much comment. More preciesly: const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AureliaWebpackPlugin = require('aurelia-webpack-plugin');
const project = require('./package.json');
module.exports = {
entry: {
app: [], // <-- this array will be filled by the aurelia-webpack-plugin
aurelia: Object.keys(project.dependencies).filter(dep => dep.startsWith('aurelia-'))
},
output: {
path: path.resolve('dist'),
filename: '[name].bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/, // or include: path.resolve('src'),
loader: 'babel-loader',
query: {
presets: ['es2015', 'stage-1'],
plugins: ['transform-decorators-legacy']
}
},
{
test: /\.html$/,
exclude: /index\.html$/, // index.html will be taken care by HtmlWebpackPlugin
loader: 'html-loader'
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpe?g|gif|svg|eot|woff|woff2|ttf)$/,
loader: 'url-loader'
}
]
},
plugins: [
new webpack.ProvidePlugin({
regeneratorRuntime: 'regenerator-runtime', // to support await/async syntax
Promise: 'bluebird', // because Edge browser has slow native Promise object
jQuery: 'jquery', // because 'bootstrap' by Twitter depends on jQuery
}),
new AureliaWebpackPlugin({
root: path.resolve(),
src: path.resolve('src'),
baseUrl: '/'
}),
new HtmlWebpackPlugin({
template: 'index.html',
}),
new webpack.optimize.CommonsChunkPlugin({ // to eliminate code duplication across bundles
name: ['aurelia']
})
]
}; Even preferably without The aim is to make it more digestible for newcomers so they would understand what is minimally required to get aurelia running. More of a I would also prefer to remove <!DOCTYPE html>
<html>
<head>
<title>Aurelia Webpack Skeleton</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<!-- imported CSS are concatenated and added automatically -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
</head>
<body aurelia-app="main">
<div class="splash">
<div class="message">Aurelia Webpack Skeleton</div>
<i class="fa fa-spinner fa-spin"></i>
</div>
<!-- Uncomment below line for Webpack Dev Server auto reload -->
<!--<script src="/webpack-dev-server.js"></script>-->
</body>
</html> Again, the idea is to throw less technologies in the beginning. |
Hi,
After some investigation I found bug in your code namely in
there should be stringified ENV and WEBPACK values so it should be sth like this:
After that everything works fine |
@nashwaan I'm not sure if merging Aurelia & bootstrap chunks would be ok. All of official docs seem to separate them. @lares83 Haven't tried to run after removing @boazblake I think something wrong with your configurations. Btw what do you mean by not |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
one more typo :) then we can merge
|
||
3. **Javascript optimization**. | ||
|
||
* To diliver a smaller bundle for production. Add to your `plugins` in the configuration: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
diliver -> deliver
@boazblake no problem :)
it looks like in webpack.beta25 there can't be an empty array in an entry
|
@lares83 I've opened an issue webpack/webpack#3123 |
@niieani great thanks :) |
@niieani In the initial const aureliaBootstrap = [
'aurelia-bootstrapper-webpack',
'aurelia-polyfills',
'aurelia-pal-browser',
'regenerator-runtime'
];
const aureliaModules = Object.keys(project.dependencies).filter(dep => dep.startsWith('aurelia-'));
module.exports = {
entry: {
'app': [],
'aurelia-bootstrap': aureliaBootstrap,
'aurelia': aureliaModules.filter(pkg => aureliaBootstrap.indexOf(pkg) === -1)
}, In the simplified version, we used this only: module.exports = {
entry: {
'app': [],
'aurelia': Object.keys(project.dependencies).filter(dep => dep.startsWith('aurelia-'))
}, But, for a production setup, does the first version provide faster initial loading of aurelia? Aren't |
@bigopon @nashwaan using Separating aurelia-bootstrap and aurelia entrypoints was necessary before the most recent changes to the way bootstrapper-webpack works, because of the way PAL was initialized. Right now it should work without the additional chunk, but I've not tested it. They're injected into |
Wow. Tons of collaboration going on here. Great work all! Where are we on this? Ready to go or needs more iterations? |
@EisenbergEffect Generally, I guess the doc is ready. Thanks for the excellent efforts by @bigopon. The only one point that I am still not sure about is the comment by @niieani
I assume @niieani suggested to revert back to manual loading of aurelia modules: const coreBundles = {
bootstrap: [
'aurelia-bootstrapper-webpack',
'aurelia-polyfills',
'aurelia-pal',
'aurelia-pal-browser',
'regenerator-runtime',
'bluebird'
],
aurelia: [
'aurelia-bootstrapper-webpack',
'aurelia-binding',
'aurelia-dependency-injection',
'aurelia-event-aggregator',
'aurelia-framework',
'aurelia-history',
'aurelia-history-browser',
'aurelia-loader',
'aurelia-loader-webpack',
'aurelia-logging',
'aurelia-logging-console',
'aurelia-metadata',
'aurelia-pal',
'aurelia-pal-browser',
'aurelia-path',
'aurelia-polyfills',
'aurelia-route-recognizer',
'aurelia-router',
'aurelia-task-queue',
'aurelia-templating',
'aurelia-templating-binding',
'aurelia-templating-router',
'aurelia-templating-resources'
]
} rather than using |
@EisenbergEffect Also, it seems that there is an issue as reported by @lares83 regarding empty array |
@nashwaan that's right. We should revert back to manually listing all Aurelia modules to be included in the |
@bigopon As advised by @niieani , I suggest to do following changes in the final const aureliaModules: [
'aurelia-bootstrapper-webpack',
'aurelia-binding',
'aurelia-dependency-injection',
'aurelia-event-aggregator',
'aurelia-framework',
'aurelia-history',
'aurelia-history-browser',
'aurelia-loader',
'aurelia-loader-webpack',
'aurelia-logging',
'aurelia-logging-console',
'aurelia-metadata',
'aurelia-pal',
'aurelia-pal-browser',
'aurelia-path',
'aurelia-polyfills',
'aurelia-route-recognizer',
'aurelia-router',
'aurelia-task-queue',
'aurelia-templating',
'aurelia-templating-binding',
'aurelia-templating-router',
'aurelia-templating-resources'
];
module.exports = {
entry: {
'app': ['./src/main'],
'aurelia': aureliaModules
}, Note: not tested. |
@nashwaan @niieani @EisenbergEffect Fixed for last suggestion. I could go further with Javascript mangling section in last section, by adding a list of private properties in aurelia core modules to help reduce bundle size a lot more, but wasn't sure if it should be. |
@bigopon I found a small mistake in docs (Suggested Production Setup) there should be I think that we should also add |
Accdidentally hit close & comment @lares83 I think for very basic version, having aurelia core bundle's dependencies into aurelia is ok. @nashwaan has a good point here is that keep this section extremely simple so anyone can start without feeling intimidated. We have a last section for production build, with things done right so probably it won't be a problem. Maybe leave the decision to @EisenbergEffect |
@bigopon I see your point, thanks for explanation :) I wondering about one more thing, do we still need bluebird? @EisenbergEffect @niieani what do you think about it? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm @niieani, and I approve this PR.
Thanks for all the hard work @bigopon and for the help/ideas/comments, @lares83 and @nashwaan.
CC: @EisenbergEffect
@niieani I'm still testing this webpack configuration and I stubmle across one issue namely when I setup in
and launch
but I get only
and additionally these warnings
|
@lares83 is there an issue for the problem you're describing? |
@niieani I haven't seen any issue reported for this problem. |
I have no clue where to report this, sorry if this is not the correct place :3 After switching from the @easy-webpack config to the regular one i started getting issues with the presets for babel (namely : stage-1 and es2015 not being found), In case anyone else was having this issue, replacing babel-env with babel-preset-stage-1 and babel-preset-es2015 does the trick. |
Doc: (setup-webpack.md): Update doc for setup with standard webpack configuration
File changed:
Setup-webpack.md
This gives some basic guide line for standard webpack configuration, enabling flexibility in modifying the configs.
This is a result of as the orginial author refused to make a pull request
2.1.0.beta-23
, that no longer allow custom properties on config