-
Notifications
You must be signed in to change notification settings - Fork 4.4k
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
Webpack 4 #1280
Comments
for quick reference, the changelogs:
In theory there are no backwards compatibility breaks for v3. Points to watch out for from v4:
|
It's out now: https://github.com/webpack/webpack/releases/tag/v4.0.0 |
Compelling reason for upgrading
Things to consider
nodejs 4 support is dropped (expected) a fork of vuejs-templates/webpack for webpack 4 (until everyone realizes webpack 4 has huge benefits over webpack 3) |
Not a smooth upgrade with Webpack 4 particular extract-text-webpack-plugin |
As I mentioned, webpack 4 has new plugin system The extract-text-plugin is currently in alpha version (there's no stable release for webpack 4 yet) plugins are required to rewriiten with webpack 4 compatible API plugin users have to keep an eye on releases and issues for smooth update (wait for the right time) |
Waiting for something new... |
extract-text-plugin is in beta now, and seems almost stable... |
Webpack Stable! |
Would it make sense to switch to |
It seems the maintainer of ETWP decided to deprecate this plugin on |
The |
I just tried updating all the deps to webpack 4 compatible version, and altered the config a bit but UNFORTUNATELY faced with numerous errors :-( The previous A typical stacktrace:
I think I must make sth wrong, so I hope someone familiar with webpack, ETWP, mini-css-extract-plugin or anything related to text extraction could come to help. |
I replaced ETWP with Mini-CSS-Extract-Plugin with fairly minimal changes.
optimization: {
minimize: false,
runtimeChunk: {
name: 'vendor'
},
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /node_modules/,
name: "vendor",
chunks: "initial",
minSize: 1
}
}
}
}
const MiniCSSExtractPlugin = require('mini-css-extract-plugin'); // import
// added optimization.minimize: true to settings
optimization: {
minimize: true
}
// changed `new ExtractTextPlugin({` to `new MiniCSSExtractPlugin({` with the exact same param `{filename: utils.assetsPath('css/[name].[contenthash].css')}` passed as an argument.
I have changed the build process in my project quite a bit since I used this template, so there may be some differences. I also was seeing two deprecation warnings that I wasn't able to track down, but didn't seem to have any detrimental effect:
Hopefully this helps. Edit: I also added |
@dak That's nice work.
CssSyntaxError {
name: 'CssSyntaxError',
reason: 'Unknown word',
file: 'E:\\Desktop\\QY Project\\QingyunMusicPlayer-JS\\src\\components\\TmDocContainer.vue',
source: 'exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);\n// imports\n\n\n// module\nexports.push([module.id, "\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\r\\n.tm {\\r\\n display: block;\\r\\n background-color: black;\\r\\n padding: 10px;\\r\\n}\\r\\n", ""]);\n\n// exports\n',
line: 1,
column: 1,
message: 'E:\\Desktop\\QY Project\\QingyunMusicPlayer-JS\\src\\components\\TmDocContainer.vue:1:1: Unknown word',
input:
{ line: 1,
column: 1,
source: 'exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false);\n// imports\n\n\n// module\nexports.push([module.id, "\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\r\\n.tm {\\r\\n display: block;\\r\\n background-color: black;\\r\\n padding: 10px;\\r\\n}\\r\\n", ""]);\n\n// exports\n',
file: 'E:\\Desktop\\QY Project\\QingyunMusicPlayer-JS\\src\\components\\TmDocContainer.vue' } } Did I miss sth? |
@jjyyxx I set it to always return with the function generateLoaders(loader, loaderOptions) {
const loaders = [cssLoader];
if (loader) {
loaders.push({
loader: `${loader}-loader`,
options: {
...loaderOptions,
sourceMap: options.sourceMap
}
});
}
return ['vue-style-loader'].concat(loaders);
} It looks like in the code you showed, if |
So currently CSS has to be bundled within the JS files? In addition, updating other devDeps to newest version, I did not see the |
@dak Thanks for sharing how you fixed it. |
@jjyyxx I wasn't a huge fan of that either, but it wasn't worth it to me to figure out the fix (especially for my usecase, where a single version of an application is being installed in isolation, so I get little benefit out of caching files separately). I'm not even sure there is a good solution (yet). @kinsomicrote I believe the errors are coming from the plugins being used. Apparently WebPack 4 is backwards compatible with WebPack 3 plugins, which are where the deprecation warnings are coming from. I saw |
@dak Thanks for your help. It currently works. However, without extracting css leads to no minification (remove comments, etc) of the css declarations, increasing my bundle size by 500kb. |
Hi all: I would say it need a bit work to upgrade to webpack4. |
I recommend to wait for vue-loader 15 - https://github.com/vuejs/vue-loader/tree/next, to have native support. |
I recommend to wait for vue-loader 15 |
I recommend to wait for vue-loader 15 to have native support. |
|
@LinusBorg Any updates on this? |
@dakshshah96 Vue loader 15 only recently got released, it will most likely take a while to implement it still. |
Also we should wait for vue-cli v3 |
vue-loader works great for me. Vue-loader docs and migration guide are very helpful. |
@jingzheshan I haven't looked at the implementation details regarding this but it might be useful to set up a demo repository for reference for everyone else? |
The build for my PR (#1369) is failing. I have a pretty good idea why, and I'd appreciate it if anybody familiar with CircleCI or permissions to manage the official build on CircleCI could take a quick look. The details are here: #1369 (comment). Update: the build is no longer failing. Yay. |
vuejs/vue-cli#1205 |
vue-cli beta.10 just released a few hours ago which upgraded to webpack 4 |
@LinusBorg The PR for this seems to be ready. Would you be able to review it? |
@dak your walkthrough really helped me out. thank you! |
I spent a bit more time to update to Webpack 4. I hope it's finished now... References: - vuejs-templates/webpack#1280 - vuejs-templates/webpack#1369
I spent a bit more time to update to Webpack 4. I hope it's finished now... References: - vuejs-templates/webpack#1280 - vuejs-templates/webpack#1369
Hey, Webpack 4 will be released soon. I'm creating this issue to track when this template is updated so I can update my projects. And I'm particularly interesting in how #1022 will be affected (or not).
The text was updated successfully, but these errors were encountered: